I got website with facebook login, anatitycs and also I added basic facebook pixel.
[1] https://i.imgur.com/HrfCMlX.png "Facbook App snip"
Suddenly I noticed that the Facebook Pixel Helper Chrome extension shows that there are 2 pixels found on the site. All the time there was only one (PageView)
Where did the other (fb_page_view) come from?
[2] https://i.imgur.com/b9tJfYd.png "Facebook Pixel Helper snip"
I looked at the results of both and each of them shows different statistics
Facebook Pixel code in my page:
<!-- Facebook Pixel Code -->
<script>
!function (f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function () {
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)
}(window, document, 'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '7095...'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=7095...&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Why Chrome FB Pixel Helpers shows two different pixels?
I'm expecting only one pixel - PageView, that I added (code above)
You had autoLogAppEvents set to true in your initialization of the Customer Chat SDK (which itself is just an extension of the “standard” JS SDK), and that causes it to do its own tracking, using the app id as pixel id.
Related
Full disclosure - I'm not a programmer, but I'm the only one in my organisation who might be able to get this working. Can anyone help with the following please?
I'm trying to use Facebook's conversion pixel code to track certain button clicks on our site. Facebook's developer docs give the following instructions for tracking in-page events:
After the base code snippet is installed, you can track in-page actions, such as clicks on a button, by making a _fbq.push('track') call for the conversion pixel through registering different event handlers on an HTML DOM element. For example:
function trackConversionEvent(val, cny) {
var cd = {};
cd.value = val;
cd.currency = cny;
_fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');" /
The problem I'm facing is it's not clear to me what Facebook means by "the base code snippet". My initial assumption was that it's the conversion pixel code they give you to install in the head section of the page, i.e.
<!-- Facebook Conversion Code -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '<pixel_id>', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=<pixel_id>&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
However, if I install the above on our page it loads/fires the conversion pixel code each time the page loads rather than on the button click (presumably because it's typically used on a thank you/confirmation page). Can anyone shed any light on this for me? I believe I understand where to position the onClick code to associate it with a button click but I'm struggling to understand where I need to position the trackConversionEvent code and what the base code snippet is. Through testing, I know that removing the following lines from the larger code snippet stops the pixel from loading:
window._fbq = window._fbq || [];
window._fbq.push(['track', '<pixel_id>', {'value':'0.00','currency':'USD'}]);
but I'm not sure if that's actually what I need to do. Do I for example, need to replace those two lines with the trackConversionEvent code so that the pixel doesn't fire when the page loads but the onClick code actually functions instead when the button is clicked?
Many thanks in advance for any pointers or suggestions.
This should work, I.ve just tested on a blog based on WP.
<!-- Facebook Conversion Code -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=<pixel_id>&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
<!-- End Of Facebook Conversion Code -->
This is the event handler that you could bind to any button, link or any DOM element::
function trackConversionEvent(val, cny) {
var cd = {};
cd.value = val;
cd.currency = cny;
_fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');"
I need to add Facebook tracking code to a specific page in Drupal 7. I was wondering if there was a way to add the code to the html.tpl.php file where there is some code that calls for it to be added to a specific page.
I tried adding the code to a block which would live on the page, but the code is being stripped out (disable rich text, add code and save)
This is the code I am trying to add
<!-- Facebook Conversion Code for Ecuador landing page leads -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6026961635755', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6026961635755&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
After I save it this is what I am getting
<!-- Facebook Conversion Code for Ecuador landing page leads --><noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6026961635755&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
Facebook Tracking Pixel module provides an easy to use interface that enables you to include the conversion code to the page(s) you select.
It applies the 'new' Facebook pixel code, the one that Facebook recommends using.
Drupal project page:
https://www.drupal.org/project/facebook_tracking_pixel
When you create a static block for text format (drop-down bellow body field) select "plain text" so drupal shouldn't filter out some tags. Under visibility settings you can specify on what pages this block should be shown. For more powerful mechanism for specifying on what page to display the block look for "context" module.
How can I drop items (like image, or other object from other canvas) into canvas which is managed by fabricjs? I have found many examples how to move items inside canvas but I would like to drag and drop item from outer element into canvas.
Since you asked for an example and I haven't tried it out myself yet, here goes:
Example Fiddle
Markup
<div id="images">
<img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img>
<img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img>
<img draggable="true" src="http://i.imgur.com/wMU4SFn.jpg" width="238" height="319"></img>
</div>
<div id="canvas-container">
<canvas id="canvas" width="800" height="600"></canvas>
</div>
JS Breakdown
1. Fabric.canvas instance
First we want our canvas, of course:
var canvas = new fabric.Canvas('c');
2. Feature Detection (optional)
Not sure this is necessary, since the fact that you have a canvas makes it very likely that the browser has Drag and Drop as well. Were you to use it, you can do so like this, using Modernizr:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
// Bind the event listeners for the image elements
// Bind the event listeners for the canvas
} else {
// Replace with a fallback to a library solution.
alert("This browser doesn't support the HTML5 Drag and Drop API.");
}
3. Events
Again, unlike the source article I below, the source and target elements are different (in that articles's example, you just move divs around within the same parent container), so I failed to notice that some of the events are meant for the element being dragged, but most are bound to the element into which you are dropping.
NOTE: I know this is technically a question about Fabric.js, but it's really kind of a question about Drag and Drop in the context of adding objects to a <canvas> with Fabric.js, which is why I'm going a bit more in depth about the DnD stuff now.
For the <img>
dragstart (I added a class here to lower the opacity)
dragend (and removed that class here)
For #canvas-container:
dragenter (added a class to give the canvas container that nifty dotted line)
dragover: Here you can set the event.dataTransfer.dropEffect property to show one of the native cursor types. The default would be 'move' here, but I set it to 'copy' since I don't actually remove the <img> element (in fact in the fiddle you can, for example create several McClures).
dragleave (removed the dotted line here)
drop: The handler for this event creates and adds the fabric.Image object (see the fiddle).
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
// Bind the event listeners for the image elements
var images = document.querySelectorAll('#images img');
[].forEach.call(images, function (img) {
img.addEventListener('dragstart', handleDragStart, false);
img.addEventListener('dragend', handleDragEnd, false);
});
// Bind the event listeners for the canvas
var canvasContainer = document.getElementById('canvas-container');
canvasContainer.addEventListener('dragenter', handleDragEnter, false);
canvasContainer.addEventListener('dragover', handleDragOver, false);
canvasContainer.addEventListener('dragleave', handleDragLeave, false);
canvasContainer.addEventListener('drop', handleDrop, false);
} else {
// Replace with a fallback to a library solution.
alert("This browser doesn't support the HTML5 Drag and Drop API.");
}
Sources:
HTML5 Rocks - Native HTML5 Drag and Drop
Modernizr
Web Platform Docs > DOM > Properties - dropEffect
Web Platform Docs > DOM > Events
dragstart
dragend
dragenter
dragover
dragleave
drop
I had gone through fiddle of #natchiketa, And fixed the problem , just check this fiddle..
http://jsfiddle.net/Ahammadalipk/w8kkc/185/
window.onload = function () {
var canvas = new fabric.Canvas('canvas');
/*
NOTE: the start and end handlers are events for the <img> elements; the rest are bound to
the canvas container.
*/
function handleDragStart(e) {
[].forEach.call(images, function (img) {
img.classList.remove('img_dragging');
});
this.classList.add('img_dragging');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'copy';
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
var img = document.querySelector('#images img.img_dragging');
var newImage = new fabric.Image(img, {
width: img.width,
height: img.height,
// Set the center of the new object based on the event coordinates relative
// to the canvas container.
left: e.layerX,
top: e.layerY
});
newImage.hasControls = newImage.hasBorders = false;
canvas.add(newImage);
return false;
}
function handleDragEnd(e) {
// this/e.target is the source node.
[].forEach.call(images, function (img) {
img.classList.remove('img_dragging');
});
}
if (Modernizr.draganddrop) {
var images = document.querySelectorAll('#images img');
[].forEach.call(images, function (img) {
img.addEventListener('dragstart', handleDragStart, false);
img.addEventListener('dragend', handleDragEnd, false);
});
var canvasContainer = document.getElementById("canvas-container");
canvasContainer.addEventListener('dragenter', handleDragEnter, false);
canvasContainer.addEventListener('dragover', handleDragOver, false);
canvasContainer.addEventListener('dragleave', handleDragLeave, false);
canvasContainer.addEventListener('drop', handleDrop, false);
} else {
alert("This browser doesn't support the HTML5 Drag and Drop API.");
}
}
Thanks
Well, the question is quite old^^
I have updateted the fiddle, no it will work in Firefox as well.
Fiddle
function handleDrop(e) {
// this / e.target is current target element.
e.preventDefault(); //I've altert this line for FireFox
As far as I understand, drag and drop is not already provided by fabricjs,
fiddling it will be quite interesting.
Well I m new to javascript and fabricJS but I think this fiddle might help
fiddle
html code
<div class="img_cont">
<img class="img" id="ele1" draggable="true" ondragstart="dragElement(event)" src="https://webkit.org/wp-content/uploads/STP-300x300.png">
<img class="img" id="ele2" draggable="true" ondragstart="dragElement(event)" src="https://webkit.org/wp-content/uploads/ephy-webkit-graphic.png">
<img class="img" id="ele3" draggable="true" ondragstart="dragElement(event)" src="https://res.cloudinary.com/css-tricks/image/upload/w_600,q_auto,f_auto/buysellads/uu/7/112766/1646327381-MC_CSSTricks_Logo_600x600-_1_.png">
<img class="img" id="ele4" draggable="true" ondragstart="dragElement(event)" src="https://miro.medium.com/max/1400/1*9hd_8qR0CMZ8L0pVbFLjDw.png">
</div>
<br>
<div id="canvas_cont" ondragover="allowDrop(event)" ondrop="dropElement(event)">
<canvas id="canvas" width="650" height="350" ></canvas>
</div>
javascript code
// allowDrop function called on ondragover event.
function allowDrop(e) {
e.preventDefault();
}
//dragElement function called on ondrag event.
function dragElement(e) {
e.dataTransfer.setData("id", e.target.id); //transfer the "data" i.e. id of the target dragged.
}
//Initializing fabric canvas on window load event.
var canvas;
window.onload = function(){
canvas = new fabric.Canvas(document.getElementById("canvas"));
}
//dropElement function called on ondrop event.
function dropElement(e) {
e.preventDefault();
var data = e.dataTransfer.getData("id"); //receiving the "data" i.e. id of the target dropped.
var imag = document.getElementById(data); //getting the target image info through its id.
var img = new fabric.Image(imag, { //initializing the fabric image.
left: e.layerX - 80, //positioning the target on exact position of mouse event drop through event.layerX,Y.
top: e.layerY - 40,
});
img.scaleToWidth(imag.width); //scaling the image height and width with target height and width, scaleToWidth, scaleToHeight fabric inbuilt function.
img.scaleToHeight(imag.height);
canvas.add(img);
}
The accepted answer no longer works.
This is for drag and drop from desktop using the dataTransfer interface.
canvas.on('drop', function(event) {
// prevent the file to open in new tab
event.e.stopPropagation();
event.e.stopImmediatePropagation();
event.e.preventDefault();
// Use DataTransfer interface to access the file(s)
if(event.e.dataTransfer.files.length > 0){
var files = event.e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (f.type.match('image.*')) {
// Read the File objects in this FileList.
var reader = new FileReader();
// listener for the onload event
reader.onload = function(evt) {
// put image on canvas
fabric.Image.fromURL(evt.target.result, function(obj) {
obj.scaleToHeight(canvas.height);
obj.set('strokeWidth',0);
canvas.add(obj);
});
};
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
}
});
Resources
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
I'm building a GWT application and am trying to dynamically add facebook comment boxes in certain places. This is working fine, except that the facebook SDK isn't calculating the height correctly. It always sets it at 160px.
This means that only half of the first comment is visible, even if there are multiple comments (i.e. it gets visibly cut in half). If I use the same code outside of GWT it works fine (i.e. the height is calculated correctly).
Does anybody know how the facebook SDK calculates the height of the box? Or what else I can try?
The details:
I initialise the facebook SDK as follows:
public static native void initFacebookSDK()
/*-{
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '<my-app-id>', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true
// parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
(function(d, debug) {
var js, id = 'facebook-jssdk', ref = d
.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all"
+ (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, false));
}-*/;
I add the div as follows:
//_root is a vertical panel
_root.add(new HTML("<div id=\"mydiv\"></div>"));
and then I populate the div like this:
public static native void showComments(String currentUrl_)
/*-{
var mydiv = $doc.getElementById('mydiv');
mydiv.innerHTML = "<fb:comments href='" + currentUrl_
+ "' num_posts='5' width='422'></fb:comments>";
FB.XFBML.parse(mydiv);
}-*/;
The problem is that the facebook SDK always populates the div with the following:
<span style="height: 160px; width: 422px;">
<iframe ...>...</iframe>
</span>
whereas if I don't use GWT, the height parameter changes appropriately, e.g:
<span style="height: 1469px; width: 422px;">
<iframe ...>...</iframe>
</span>
Hope someone can help.
Worked it out.
In JSNI I should be using $doc and $wnd, instead of document and window, respectively. https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing
In my defence I had tried this, but the missing ingredient was that I needed to reference the FB object as $wnd.FB, e.g:
$wnd.FB.init(...) and $wnd.FB.XFBML.parse(...)
Hope this helps someone.
I have multiple apps on facebook and am having an issue with one app. It is rendering wider than 520px which is causing scroll bars to appear, even though all my content fits on the screen (just white space when you scroll over). I have double checked my css styling and settings and it appears to be the same as another app that is rendering correctly. Any suggestions?
Here is a link to the app giving me the issue.
https://www.facebook.com/slp.cc#!/slp.cc?sk=app_195351823894125
if you look at the 2012 snow show schedule, it renders correclty.
I had a similar problem and changed the css of body! Just try to do the following and change the numbers u need:
position:relative;
top:-5px;
left:-5px,
width:520px,
You can try using FB.Canvas.setAutoResize(). It will get rid of both horizontal and vertical scrollbars.
Refer the following snippet:
<body onload="sizeChangeCallback()">
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
function sizeChangeCallback() {
FB.Canvas.setAutoResize();
}
</script>
If the scroll bar still exists, you set the overflow style of the body as hidden.
EX: <body style="overflow: hidden; onload="sizeChangeCallback()"></body>