I am trying access the custom parameters for the I've set within my Facebook pixel for the Purchase event. The developer documentation doesn't address my question so I'm looking for help. Has anyone been successful at accessing these custom(dynamic) variables through the Marketing API so that we can report on purchase amount, time/date, product purchased, purchase(order) id?
Thanks,
Matthew
<!-- 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxxxxxxxxxxxxxxx');
fbq('track', 'PageView');
fbq('track', 'Purchase', {
content_name: {{prodName}},
content_category: {{prodCat}},
content_ids: {{prodID}},
content_type: 'product',
order_id: {{orderID}},
value: {{orderRev}},
currency: 'USD'
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
Related
I am trying to add a Facebook Pixel to our Heroku HAML site. Google analytics is working by having the Javascript in _google_analytics.html.haml then listed in the Home.html.haml file in the same layout folder referenced as below:
!!!
%html
%head
= javascript_include_tag "application", "data-turbolinks-track" => true
= csrf_meta_tags
= render 'layouts/bold_chat'
= render 'layouts/google_analytics'
= render 'layouts/fb_pixel'
Not sure what I am missing but the pixel is not loading when the site loads in the manner that Google Analytics is. Thank You, dev left the organization and I the Admin are picking up the pieces. Ouch! I am able to get the script to fire but the site will not load in heroku I receive a load error. HELP
This is the actual JavaScript
<!-- 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', '123123123123123');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=123123123123&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Ok, so I attempted to convert this to a Coffee script based on another article. The code is
!((f, b, e, v, n, t, s) ->
if f.fbq
return
n =
f.fbq = ->
if n.callMethod then n.callMethod.apply(n, arguments) else
n.queue.push(arguments)
return
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
return
)(window, document, 'script',
'https://connect.facebook.net/en_US/fbevents.js')
fbq 'init', '252482198497323'
fbq 'track', 'PageView'
Now I receive an error when trying to deploy to Test
Running: rake assets:precompile
rake aborted!
NoMethodError: undefined method `+#' for ["fb_pixels"]:Array
Update, The issue was with the section loading the image..
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=123123123123&ev=PageView
&noscript=1"/>
</noscript>
Once I removed this code from the script and loaded it into the index page by itself the pixel worked.
The noscript tag is used when users have disabled scripts in their browser or if their browser doesn't support scripts. Ideally, you wouldn't have to remove this section of the code. Here's the haml code that should work.
:javascript
!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', '123123123123');
fbq('track', 'PageView');
%noscript
%img{:height => "1", :width => "1", :src => "https://www.facebook.com/tr?id=123123123123&ev=PageView&noscript=1"}
I've setup my webshop with the Facebook Pixel code (with the standard 'PageView' event) in the header so it appears on all pages. In addition to that, I have inserted the same Facebook Pixel base code + 'Purchase' event on the success page via success.phtml found in app/design/frontend/default/theme/template/checkout
So the base Pixel code is there two times on the success page. It works, but I am looking for a better way of doing it, where the basecode is only there once on the success page.
Can anyone help with that? :)
To illustrate - this is how it is setup up now:
All pages across the website:
(in the head)
<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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
Success page:
(in the head)
<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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
(in the body)
<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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'Purchase', {value: '<?php echo $grandTotal; ?>', currency: 'DKK'});</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
And this is how I want it to be on the success page:
<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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', "PageView");
fbq('track', 'Purchase', {value: '<?php echo $grandTotal; ?>', currency: 'DKK'});</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
I assume you already have Google Analytics setup, and if you have Google Tag Manager along with it, I reckon best is to use Google Tag Manager to install FB pixel to your site, Look at the following link,
https://www.facebook.com/business/help/1021909254506499
Doing this may help with bit of a site speed improvement as well.
I have 4 FB pixel on my page and it is showing "Facebook Pixel Warning: Multiple pixels with conflicting versions were detected on this page" warning.
I am getting following error:
Facebook Pixel Warning: Multiple pixels with conflicting versions were detected on this page
Facebook Pixel Warning: Multiple different pixels were detected on this page
How can i get rid of it? Does it stop firing and tracking pixels?
<!-- 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', 'XXXXXXXXXXX', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=XXXXXXXXXXX&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
<!-- Facebook Conversion Code -->
<!-- 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', 'XXXXXXXXXXX');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- 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', 'XXXXXXXXXXX');
fbq('track', "PageView");
window._fbq.push(['track', 'Lead']);
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- 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', 'XXXXXXXXXXX');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
I'm trying to install the Facebook tracking pixel on my magento store, from what iv read online it supposed to be added in the following location/file:
app\design\frontend\XXXX\YYYY\template\checkout\success.phtml
However my theme, Ultimo does not have success.phtml in the above location!
The only location this file exists is app\design\frontend\base\default\template\checkout\success.phtml
I have added it in to that file but Facebook can't verify the pixel.
Any help would be much appreciated.
Thanks in advance.
I'm using Ultimo theme too, if you don't have success.phtml at your app/design/frontend/ultimo/[YOURTHEME]/template/checkout folder copy it from base/default/template/checkout/success.phtml to your frontend/ultimo/[YOURTHEME]/template/checkout folder and use the code below (I'm using it with my ultimo theme and its verified by Facebook)
<?php
//Get Order Number & Order Total
$order = Mage::getModel('sales/order')->loadByIncrementId(Mage::getSingleton('checkout/session')->getLastRealOrderId());
$amount = number_format($order->getGrandTotal(),2);
?>
<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', '[YOURCUSTOMID]', {'value':'<?php echo $amount; ?>','currency':'TRY'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=[YOURCUSTOMID]&cd[value]=<?php echo $amount; ?>&cd[currency]=TRY&noscript=1" /></noscript>
Just place this at the top of that success.phtml template and it should do the trick. Don't forget to replace [YOURCUSTOMID] with the ID at the code you got from Facebook. I hope this helps.
Since November 2015 Facebook asked me to install their new tracking pixel code. Like the last code they forget an alt tag to make sure the code is W3C conform.
I decided to track a PURCHASE and (home)PAGEVIEW.
Within my code you will find more options to track:
Just uncomment and create some PHP IF ike I did with home and success-page
fbq('track', 'ViewContent');
fbq('track', 'Search');
fbq('track', 'AddToCart');
fbq('track', 'CompleteRegistration');
fbq('track', 'Lead');
Use the code and change your ID (1234567890):
<!-- 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '1234567890YOURID');
<?php
// IF WE ARE ON HOMEPAGE
if( Mage::getSingleton('cms/page')->getIdentifier() == 'home' && Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' ) : ?>
fbq('track', "PageView");
<?php endif; ?>
<?php // Facebook Conversion Code for Kaufbestätigungen - Online Trainer Lizenz
if((strpos($_SERVER['REQUEST_URI'],'success')==true)):
$orderObj = Mage::getModel('sales/order')->loadByIncrementId(Mage::getSingleton('checkout/session')->getLastRealOrderId()); ?>
fbq('track', 'Purchase', {value: '<?php echo number_format($orderObj->getBaseGrandTotal(),2) ?>', currency: '<?php echo $orderObj->getOrderCurrencyCode()?>'});
<?php endif; ?>
<?php /*?>
fbq('track', 'ViewContent');
fbq('track', 'Search');
fbq('track', 'AddToCart');
fbq('track', 'CompleteRegistration');
fbq('track', 'Lead');
<?php */?>
</script>
<?php
// IF WE ARE ON HOMEPAGE
if( Mage::getSingleton('cms/page')->getIdentifier() == 'home' && Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' ) : ?>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=1234567890&ev=PageView&noscript=1" /></noscript>
<?php endif; ?>
<?php // Facebook Conversion Code for PURCHASES - PROJECT NAME
if((strpos($_SERVER['REQUEST_URI'],'success')==true)):
$orderObj = Mage::getModel('sales/order')->loadByIncrementId(Mage::getSingleton('checkout/session')->getLastRealOrderId()); ?>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=1234567890&ev=Purchase&noscript=1" /></noscript>
<?php endif; ?>
<!-- End Facebook Pixel Code -->
Please check the free facebook pixel magento extensions.
https://www.pearlbells.co.uk/facebook-pixel-magento-extension/
I have a https website with a facebook like button on it. I'm already tracking events and integrating them into google analytics. I would like to be able to add a redirect as well once someone clicks on the like button and posts to facebook. My facebook button is set up with the following:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
And the facebook like button code is as follows:
<fb:like style="float: left; margin: 1px 10px 0 0;" href="<?php echo $share_url;?>" send="false" layout="box_count" width="65" show_faces="false" font="verdana"></fb:like>
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackSocial', 'Facebook', 'Like', href]);
_gaq.push(['_trackEvent', 'Social Shares', 'Facebook Like', href]);});
FB.Event.subscribe('edge.remove', function(href, widget) { _gaq.push(['_trackSocial', 'Facebook', 'Unike', href]); });
</script>`
Is there anyway I can add a redirect to this and still be able to track clicks with google analytics?
Just add window.location = 'URL YOU WANT' after your GA code in the subscribe callback.
Example:
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackSocial', 'Facebook', 'Like', href]);
_gaq.push(['_trackEvent', 'Social Shares', 'Facebook Like', href]);
window.location = 'URL HERE';
});
Sorry about that, I assumed that the callback was after completion.
Much more complicated but working solution:
The regular 'like' button does not have a callback function for when the person actually finishes in the dialog box. Luckily you can create a custom dialog using FB.ui. You will have to create a FB app for your domain.
I modified and tested their example code to use a redirect instead of an alert box.
<div id='fb-root'></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<a id="link" href="#">Post to Feed</a>
<script>
FB.init({appId: "000000000000000", status: true, cookie: true}); //You'll need to insert your appId.
$('#link').click(function(){
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
window.location = "http://www.google.com"
} else {
// Do something else here if they do not post.
}
});
return false;
});
</script>
Well after plucking away at this for a while now and much frustration I was able to get a solution that worked. I ended up creating my own app and using the direct url feed dialog method
https://developers.facebook.com/docs/reference/dialogs/feed/
to create a dialog app and added an onClick event for GA tracking and redirecting. In the end my facebook buttons link looks something like
Post This
Wasn't exactly what I had originally planned on and this is not using "Likes", but instead "Posts" or "Shares". However, it does work great. I would like to thank Marcelo for pointing me in the right direction.