Jump to content

Facebook pixel for tracking purchases


Recommended Posts

hello

if you want to track purchases you have to insert pixel to order confirmation page.

in this case you have to later order confirmation template file from your theme directory
you can do it with html box pro (it has features to build tracking code on order confirmation page) or with dedicated module fbpixel for conversion tracking 

  • Like 2

Share this post


Link to post
Share on other sites

Hi thanks!

 

I have read the thread but I don't understand which is the file in which I have to add the Facebook pixel in the header section - sorry for the too many which :)

I got I have to add it to the Confirmation Order page though :)

 

Think you are dealing with a beginner here :)

 

thanks!

Share this post


Link to post
Share on other sites

Hello there,

 

thank you Vekia for finding solutions for every problem and keeping this tpic live, can you help me please? I am stuck with the pixel implementation. I am using 1.5.6.0 with one page checkout. The pixel is created for checkout confirmation, i want to do it like this, the cart price contains the total order price, product + shipping + taxes and I wnat to pay the ad only when the users rich to the checkout page ( I have red all the other threads but couldn't find a solution for this matter...just to implement the default checkout fb pixel, nothing more)

 

1. I have added that code you suggested for the OrderConfirmationController.php file above that specific line

$order = new Order($this->id_order);
	    $cart = new Cart($order->id_cart);
	    $description="";
	    foreach ($cart->getProducts() AS $k=>$v){
		    $description.=$v['name']."X".$v['quantity'];
	    }	   
	    $description=urlencode($description);
	   
	    $this->context->smarty->assign(array(
	    'total_to_pay'=>$order->getOrdersTotalPaid(),
	    'description'=>$description
	    ));

2. but the Facebook code seems to be different and I don;t know what to change to it 

 

For testing i have added COD payment method and wire transfer (regularry I dont use this just for tsting now) and for these and any other payment methods I am receving blank page confirmation

 

the facebook code look like this(where the xxxxxxxxxx is the tracking id- i'll replace it with the real one): 

 

I even placed the "Facebook Pixel Helper" an addon for chrome to see if the code is implemented wright

<!-- Facebook Conversion Code for Checkout - MiniMeCraft -->
<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', 'XXXXXXXXXXXXXXXXXX', {'value':'0.00','currency':'RON'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=XXXXXXXXXXXXXXXXXX&cd[value]=0.00&cd[currency]=RON&noscript=1" /></noscript>

I have replaced the value 0.00 with {$total_to_pay} , but in this fb the variables it looks different than previuos verisions, I have tried everything and I an still get blank page and the code is still unverified ( I have tried to verify it by placing many orders after i have implemented the code) please help I don't know what else to try (I don't need an extra module for this)

 

What is wrong or how can I do this to work?Thanks a lot!

Edited by Cata100 (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Guys can you help a little bit please?! it is not normal to pay for some module to insert a piece of code in the Prestashop platform, can anyone help with thise please? thanks in advance

Share this post


Link to post
Share on other sites

I think there should be OFFICIAL GUIDELINES about installing tracking codes for purchases as in the end we want to bring people on our shops and installing the code is part of it.

 

Now I understand there are premium modules for Facebook, but what about the other million marketing platforms existing out there than haven't got a specific module?

 

Again e-shops are built to be visited and not as a mere programming exercise and be able to install a tracking code through SIMPLE AND CLEAR information should be something the Prestashop developers and community should provide.  

Edited by palmerstoneroad (see edit history)

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Shame this is not answered, I have the same problem. I don't understand how something theoretically so easy turns being so tricky. For me, nothing of what I'm trying is working.

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 1 month later...

Hi,
In the header.tpl of your template you have to paste the facebook pixel using LITERAL tags as you can see bellow:
After the <script> on the first line and before the </noscript> on the last one

  <script>{literal}(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;
  }
  _fbq.push(['addPixelId', '288710801334961']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook...ixelInitialized" />{/literal}</noscript>
Edited by omar2886 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...

 

Hi,

In the header.tpl of your template you have to paste the facebook pixel using LITERAL tags as you can see bellow:

After the <script> on the first line and before the </noscript> on the last one

  <script>{literal}(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;
  }
  _fbq.push(['addPixelId', '288710801334961']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook...ixelInitialized" />{/literal}</noscript>

 

Does it work just like that? Without any changes?

Shouldn't this be outise <script> tag?

http://www.smarty.net/docsv2/en/language.function.literal

  • Like 1

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hi guys,

 

I'm having the same issue as many here I guess. Adding the code to my header.tpl as provided by facebook doesn't work, neither by surrounding it with {literal} tags.

 

It even forbids my site from loading.

 

Let's keep searching!

Share this post


Link to post
Share on other sites

can you check browser console please?

 ctrl+shift+j in chrome, then open your front office

do you see there some errors (in console) related to facebook?

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Where do I find my header.tpl andotherfiles.

 

I see a link that asks us to go here: themes/your_theme/order-confirmation.tpl

 

I cannot find this place in my themes. I’m using Prestashop 1.6.

 

How do we access these files?

 

 

 

I do see the following errors under Console for Facebook:

 

Mixed Content: The page at  www.prestashop.com/:2518  'https://www.prestashop.com/forums/topic/395927-facebook-pixel-for-tracking-purchases/' was loaded over HTTPS, but requested an insecure image 'http://i.imgur.com/MndfRK4.png'. This content should also be served over HTTPS.

Blocked a frame with origin "https://tpc.googlesyndication.com" from chrome-extension://fdgfkebogiimcoedlicjlajpkdmockpc/js/DOMTagParser.js:121 Blocked a frame with origin "https://tpc.googlesyndication.com" from accessing a frame with origin "https://www.prestashop.com". Protocols, domains, and ports must match.
_parseLegacyScriptTag @ chrome-extension://fdgfkebogiimcoedlicjlajpkdmockpc/
 
Mixed Content: The page at  www.prestashop.com/:4620 'https://www.prestashop.com/forums/topic/395927-facebook-pixel-for-tracking-purchases/' was loaded over HTTPS, but requested an insecure image 'http://i.imgur.com/MndfRK4.png'. This content should also be served over HTTPS.

Invalid App Id: Must be a number or connect.facebook.net/en_US/all.js:64 numeric string representing the application id.
 
FB.getLoginStatus() called before  connect.facebook.net/en_US/all.js:64 calling FB.init().
 
 
 
What now?

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Hi guys,

 

if anyone still cares, here's the method for implementing the Facebook tracking pixel on Prestashop 1.6 confirmation page.

 

1. Find your order confirmation page. Usually it's inside your theme's folder and it's named order-confirmation.tpl

 

2. Open the file. 

 

3. Go to Facebook and copy the pixel tracking code provided by them inside the notepad or sublime, whatever you're using. Now you have to add {literal} tags in order for this to work. Add tags after <script>. It should look something like this, someone already posted it before me:

 

<script>{literal}(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;
}
_fbq.push(['addPixelId', '288710801334961']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook...ixelInitialized" />{/literal}</noscript>

 

4. Here's something that probably confuse a lot of people, since Facebook recommends pasting the code in between <head> and </head>, but you obviously don't have that in your .tpl file, so paste the code below <h1 class="page-heading">{l s='Order confirmation'}</h1> and save it

 

5. Now make a test order on your shop and don't close order confirmation page after you're done. Go back to Facebook and there should be a green dot next to your pixel. This means it's working. 

 

This method worked for me, hope it will work for you too.

  • Like 2

Share this post


Link to post
Share on other sites

@chrysophylax thanks i have tried like that but the prices aren't shown correctly

@Vekia you are the only one who knows how to solve this :)

 

i am asking how to set these parameters...

and regarding the pages, i am using onepage checkout and the redirect and confirmation page (thank you page) i think it is the same for all methods, what can be different? COD vs wire transfer vs CC, am i not using (COD and wire transfer) i am only using services provided by PAYU ( CC payment, paypal, and some instalments payments)

 

tks a lot ;)

Share this post


Link to post
Share on other sites
  • 1 month later...

@vekia thanks so much for your valuable input on this forum. 

 

I installed the FB pixels on my shop using the recommendations above and all of them work .... except the checkout pixel. 

 

I installed the base pixel in my header.tpl file and the Checkout pixel on the order-confirmation.tpl  file as suggested 

Here's the checkout code  I installed right below the line  : <h1 class="page-heading">{l s='Order confirmation'}</h1>

<script>{literal}
fbq('track', 'Purchase', {value: '5.55', currency: 'USD'});
{/literal}</script>
 
The FB pixel helper extension for Chrome shows the basic pixel (from the header fire) but not the checkout pixel. 
I also tested many times with a test transaction and the checkout pixel does not fire. 
 
I tried putting in different locations of the same file (order-confirmation.tpl) with no luck. I use Prestashop 1.6.
 
UPDATE:- I since reaised that the main problem is that the standard PayPal module does not call order-confirmation.tpl and so the script is not fired. The US Paypal module and Check Payment does call this order-confirmation.tpl and the code fires. 
 
The paypal module ends up in the following page after confirmed purchase (instead of order-confirmation):
.../module/paypal/submit?key=ac8e38eacbde2b3f4d415e0ac5ab3d32&id_module=82&id_cart=21&id_order=15
 
Any idea how to find this file above. I cant seem to find it as a .tpl fire anywhere...
 
 
 
Thanks a lot
Neels
Edited by neelsvan (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

 

@vekia thanks so much for your valuable input on this forum. 

 

I installed the FB pixels on my shop using the recommendations above and all of them work .... except the checkout pixel. 

 

I installed the base pixel in my header.tpl file and the Checkout pixel on the order-confirmation.tpl  file as suggested 

Here's the checkout code  I installed right below the line  : <h1 class="page-heading">{l s='Order confirmation'}</h1>

<script>{literal}
fbq('track', 'Purchase', {value: '5.55', currency: 'USD'});
{/literal}</script>
 
The FB pixel helper extension for Chrome shows the basic pixel (from the header fire) but not the checkout pixel. 
I also tested many times with a test transaction and the checkout pixel does not fire. 
 
I tried putting in different locations of the same file (order-confirmation.tpl) with no luck. I use Prestashop 1.6.
 
UPDATE:- I since reaised that the main problem is that the standard PayPal module does not call order-confirmation.tpl and so the script is not fired. The US Paypal module and Check Payment does call this order-confirmation.tpl and the code fires. 
 
The paypal module ends up in the following page after confirmed purchase (instead of order-confirmation):
.../module/paypal/submit?key=ac8e38eacbde2b3f4d415e0ac5ab3d32&id_module=82&id_cart=21&id_order=15
 
Any idea how to find this file above. I cant seem to find it as a .tpl fire anywhere...
 
 
 
Thanks a lot
Neels

 

Neels, could you please explain where exactly you put the facebook code in the header.tpl file? Did you use the {literal}{/literal} as well?

 

I pasted it at different places but can't seem to get it working. That would be really helpful!

 

For the checkout page, have you tried pasting the whole facebook tracking code instead of just the <noscript>...</noscript> part?

 

Something like this

<!-- Facebook Pixel Code -->
<script>{literal}
!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', '0123456789');
fbq('track', "PageView");
fbq('track', 'Purchase', {value: '5.55', currency: 'USD'});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=0123456789&ev=PageView&noscript=1"
/>{/literal}</noscript>
<!-- End Facebook Pixel Code -->
Edited by whatheroeswear (see edit history)

Share this post


Link to post
Share on other sites

Hi and thanks a lot for offering advice. 

 

I place the main FB pixel in the header.tpl file just above the </head> tag. And I use the {literal} tags as well. Otherwise it doesn't work...

 

Something like this...

 

<!-- Facebook Pixel Code xxxxxxxxxxx-->
<script> {literal}
!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', 'xxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
/>{/literal}</noscript>
<!-- End Facebook Pixel Code -->
 
</head>
<body{if isset($page_name)............... and the rest follows
 
This is the header part which registers "PageView" events for the whole site. In other words every page on your site. 
 
Then I place the other event specific snippets in the relevant pages for the events you want to track.
 
For conversion the snippet:
 
<script>{literal}
fbq('track', 'Purchase', {value: '5.55', currency: 'USD'});
{/literal}</script>
on the order-confirmation.tpl file.
 
And the "View"Content" snippet on the produc.tpl file. This event tracks product page views only. 
 
I test them all with the FB Pixel Helper extension on Chrome. This shows that it works. 
 
Like this for the AddToCart pixel.
 
 
 
 
-------> Except the Checkout pixel never fires when I do a PayPal Europe checkout. It fires when you use other modules like Check payments, etc.

And the reason is that the order-confirmation page is not called in my setup. I tried all the different options like express checkout, 5 step v. one page checkout. etc...
I received confirmation from other people that their PayPal Europe module calls the order-confirmation page at completion of payment.
But in my setup it never reaches the order-confirmation page. Here is my proof:
 
 
So my conclusion is that the pixel placement as explained by all above works provided the page you place it on is called by the event you want to track. 
 
I hope this can save some people some time. 
  • Like 3

Share this post


Link to post
Share on other sites
  • 2 weeks later...

 

Hi and thanks a lot for offering advice. 

 

I place the main FB pixel in the header.tpl file just above the </head> tag. And I use the {literal} tags as well. Otherwise it doesn't work...

 

Something like this...

 

<!-- Facebook Pixel Code xxxxxxxxxxx-->
<script> {literal}
!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', 'xxxxxxxxxxxxx');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
/>{/literal}</noscript>
<!-- End Facebook Pixel Code -->
 
</head>
<body{if isset($page_name)............... and the rest follows
 
This is the header part which registers "PageView" events for the whole site. In other words every page on your site. 
 
Then I place the other event specific snippets in the relevant pages for the events you want to track.
 
For conversion the snippet:
 
<script>{literal}
fbq('track', 'Purchase', {value: '5.55', currency: 'USD'});
{/literal}</script>
on the order-confirmation.tpl file.
 
And the "View"Content" snippet on the produc.tpl file. This event tracks product page views only. 
 
I test them all with the FB Pixel Helper extension on Chrome. This shows that it works. 
 
Like this for the AddToCart pixel.
 
 
 
 
-------> Except the Checkout pixel never fires when I do a PayPal Europe checkout. It fires when you use other modules like Check payments, etc.

 

And the reason is that the order-confirmation page is not called in my setup. I tried all the different options like express checkout, 5 step v. one page checkout. etc...

I received confirmation from other people that their PayPal Europe module calls the order-confirmation page at completion of payment.
But in my setup it never reaches the order-confirmation page. Here is my proof:
 
 
So my conclusion is that the pixel placement as explained by all above works provided the page you place it on is called by the event you want to track. 
 
I hope this can save some people some time. 

 

 

First of all Thanks for that answer. You saved me a lot of time.

I have a question:

If i want to put the track on the paypal page "Submit" what scripts I have to modify?

 

/prestashop/modules/paypal/views/templates/front/order-confirmation-mobile.tpl

and

/prestashop/modules/paypal/views/templates/front/order-confirmation.tpl

 

Right? or other pages too?

Thanks

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 1 month later...

Yeahhh : it works for the home page with : 

 

 

<script>{literal}

!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', 'YOURCODEPAGE');
fbq('track', "PageView");
 
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www. facebook.com/tr?id=YOURCODEPAGE&ev=PageView&noscript=1"
/>{/literal}</noscript>
<!-- End Facebook Pixel Code -->
 
 
Now, i try on paiement page !
Edited by Lounize (see edit history)

Share this post


Link to post
Share on other sites
  • 2 months later...

thank you for your help will read and try. in terms of fb pixels. what benefit does it have. for google analytics, i can see pages users visit, time on site, etc. if someone buys from me, then i get an email, i dont need to be told this a 2nd time on facebook, so why use fb pixels? sorry for my naivety

Share this post


Link to post
Share on other sites

@maciejp thanks trying the snippet now. but with fb, if i put this code in for order-confirm , even if i get a sale not from facebook (e.g. from google) , i still think fb puts it through as if facebook got the sale :)

Share this post


Link to post
Share on other sites

@chrysophylax @vekia , do you put in : fbq('track', 'Purchase', {value: '{$total_to_pay}', currency:'EUR'}); or is it fbq('track', 'Purchase', {value: {$total_to_pay}, currency:'EUR'}); ? commas or no commas? thanks guys.


@chrysophylax @vekia , do you put in : fbq('track', 'Purchase', {value: '{$total_to_pay}', currency:'EUR'}); or is it fbq('track', 'Purchase', {value: {$total_to_pay}, currency:'EUR'}); ? commas or no commas? thanks guys.

Share this post


Link to post
Share on other sites
  • 1 month later...

Hi,

I'm not sure if this helps but it work for me.

 

After adding the pixel code to header.tpl file (including {literal} tags mentioned earlier post by another member), you need to log in to your shop back end and force compile in Preferences>performance before your changes are reflected.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

If anyone is interested in adding the facebook pixel code with a free module (contentbox) so you don't have to touch the .tpl file, so you can update PS without having to do it all over again let me know i'll post it. 

Share this post


Link to post
Share on other sites

First of all generate a contentbox for yourself, than if you are familiar with it, you need to do this:

 

From the original 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', '????????????????');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=????????????????&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

What i did, is to edit to this:

// JavaScript Document

!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', '????????????????');
fbq('track', "PageView");

and saved it as a .js file, which you will load with contentbox in the option: Load Files on HTML Header

then in the: Module's Content you put the rest of the code: 

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=????????????????&ev=PageView&noscript=1"
/>

and that's it.

 

Not so complicated, let me know if you manage. the website i put it on is whykini.it if you want to check it with the facebook pixel chrome extention. 
 

p.s. contentbox comes hooked in 2 places, you can unhook the footer one. And obviously the ??? need to be changed to your account.

  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...

First of all generate a contentbox for yourself, than if you are familiar with it, you need to do this:

 

From the original 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', '????????????????');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=????????????????&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

What i did, is to edit to this:

// JavaScript Document

!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', '????????????????');
fbq('track', "PageView");

and saved it as a .js file, which you will load with contentbox in the option: Load Files on HTML Header

then in the: Module's Content you put the rest of the code: 

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=????????????????&ev=PageView&noscript=1"
/>

and that's it.

 

Not so complicated, let me know if you manage. the website i put it on is whykini.it if you want to check it with the facebook pixel chrome extention. 

 

p.s. contentbox comes hooked in 2 places, you can unhook the footer one. And obviously the ??? need to be changed to your account.

 

 

 

Hi thanks for this solution. I went through it and did it exactly how you mentioned. I'm totally a non software guy. 

Somehow, the pixel isn't appearing on my website as yet. Could you have a look at bohriali.com/store? Maybe you'll be able to find something!

Share this post


Link to post
Share on other sites
  • 4 weeks later...
  • 4 weeks later...
  • 1 month later...

First of all generate a contentbox for yourself, than if you are familiar with it, you need to do this:

 

From the original 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', '????????????????');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=????????????????&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

What i did, is to edit to this:

// JavaScript Document

!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', '????????????????');
fbq('track', "PageView");

and saved it as a .js file, which you will load with contentbox in the option: Load Files on HTML Header

then in the: Module's Content you put the rest of the code: 

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=????????????????&ev=PageView&noscript=1"
/>

and that's it.

 

Not so complicated, let me know if you manage. the website i put it on is whykini.it if you want to check it with the facebook pixel chrome extention. 

 

p.s. contentbox comes hooked in 2 places, you can unhook the footer one. And obviously the ??? need to be changed to your account.

It works perfectly for me !

Thank you so much

Share this post


Link to post
Share on other sites
  • 4 weeks later...
  • 5 months later...
  • 3 months later...

Hello,

I need help. I want the purchase event but i'm having problems in the value. Is this the correct way: " fbq('track', 'Purchase', {value: {$total_price}, currency: 'EUR'}); " or bq('track', 'Purchase', {value: '{$total_price}', currency: 'EUR'}); " ?

Edited by Filipa-HeyDigital (see edit history)

Share this post


Link to post
Share on other sites
  • 7 months later...
  • 1 year later...
On 1/22/2015 at 12:12 AM, palmerstoneroad said:

Hi,

I want to track the purchase of a product using the Facebook pixel (users coming form a FB ads).

Do I have to add the pixel in the single Product page or in the confirmation page? If so, how can I add it?

Thanks!

Why don’t you try Trackify X- facebook pixel app. Make your life way easier. It helps you track all your events.

To track your purchase event you must add your pixel on the confirmation page. 

And Trackify X reporting with the help of the new pixel engine is able to generate more reliable reports within the dashboard. You can also adjust the percentage value of purchase events with just a simple click!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More