Magento: Facebook purchase tracking - without duplicate base code - facebook

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.

Related

Trying to Add Facebook Pixel to Heroku HAML site

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"}

Facebook Pixel Warning: Multiple pixels with conflicting versions were detected on this page

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 -->

Facebook Ads API conversion pixel custom variables reporting

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 -->

How to install facebook tracking pixel in magento?

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/

AddThis toolbox multiple times

How can I do addthis.toolbox('.addthis_toolbox') multiple times?
I have a list of posts, and each is opened in popup window (jquery ui dialog). So I need to reload AddThis bar for each post.
Now I have:
<div id="addThis_<?=$postID?>" class="addthis_toolbox addthis_default_style" addthis:title="<?=$fullTitle?>" addthis:url="https://<?=$url?>">
<a class="share-button addthis_button_preferred_1"></a>
<a class="share-button addthis_button_preferred_2"></a>
<a class="share-button addthis_button_preferred_3"></a>
<a class="share-button addthis_button_preferred_4"></a>
<a class="share-button addthis_button_twitter" addthis:title="<?=$fullTitle?>" addthis:url="http://lj.is/<?=$postID?>"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
$(function(){
var addthis_config = {
data_track_clickback:true,data_track_addressbar:true,pubid:'...',ui_delay:300
};
var addthis_share = {url:"https://<?=$url?>", title:'<?=$fullTitle?>'};
if (window.addthis) {addthis.toolbox('#addThis_<?=$postID?>'); addthis.button("#addThis_<?=$postID?> .share-button"); addthis.counter("#addThis_<?=$postID?> .addthis_bubble_style");}
else $.getScript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=...&async=1', function(){addthis.init();});
})
</script>
Now first launch is ok. But next - bar is built, but without correct click, anchor title and etc.
You can see that on https://littlejoys.ru/
And additional problem - compact menu has incorrect position when my popup window is scrolled.
You can repeat the div multiple times. But you need to change the URL, title, description using Addthis optional attributes (addthis:url, addthis:title, addthis:description).
<!-- First Post -->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/1"
addthis:title="My cool first post"
addthis:description="An Example Description 1">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
<!-- Second Post-->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/2"
addthis:title="My hot second post"
addthis:description="An Example Description 2">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
Therefore you can add it in a loop and it will pick up the correct data.
If Addthis is not getting re-initialized in UI dialog then you need to re-initialize the addthis buttons again using addthis.button(".share-button")
where share-button is the class of the addthis share anchor link.
Check this Addthis article: http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript