Jump to content

Facebook pixel for tracking purchases

palmerstoneroad

By palmerstoneroad
in General topics

 Share

Recommended Posts

Cata100 Newbie

Cata100

Posted
Posted (edited)

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)
Link to comment
Share on other sites
  • 2 weeks later...
palmerstoneroad Newbie

palmerstoneroad

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
  • 4 weeks later...
  • 1 month later...
  • 1 month later...
Eutanasio Community Regular

Eutanasio

Posted
Posted (edited)

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
Link to comment
Share on other sites
  • 1 month later...
tarmouti Newbie

tarmouti

Posted
Posted

 

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
Link to comment
Share on other sites
  • 3 weeks later...
  • 4 weeks later...
BushBabie Newbie

BushBabie

Posted
Posted

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?
Link to comment
Share on other sites
  • 4 weeks later...
chrysophylax Newbie

chrysophylax

Posted
Posted

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
Link to comment
Share on other sites
Cata100 Newbie

Cata100

Posted
Posted

@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 ;)

Link to comment
Share on other sites
  • 1 month later...
neelsvan Newbie

neelsvan

Posted
Posted (edited)

@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)
Link to comment
Share on other sites
  • 2 weeks later...
whatheroeswear Newbie

whatheroeswear

Posted
Posted (edited)

 

@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)
Link to comment
Share on other sites
neelsvan Newbie

neelsvan

Posted
Posted

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
Link to comment
Share on other sites
  • 2 weeks later...
univers3 Newbie

univers3

Posted
Posted

 

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

Link to comment
Share on other sites
  • 1 month later...
  • 1 month later...
Lounize Newbie

Lounize

Posted
Posted (edited)

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)
Link to comment
Share on other sites
  • 2 months later...
trevorgilligan Newbie

trevorgilligan

Posted
Posted

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

Link to comment
Share on other sites
trevorgilligan Newbie

trevorgilligan

Posted
Posted

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

Link to comment
Share on other sites
  • 1 month later...
itsy Newbie

itsy

Posted
Posted

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.

Link to comment
Share on other sites
  • 2 weeks later...
benedettopresta Newbie

benedettopresta

Posted
Posted

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
Link to comment
Share on other sites
  • 1 month later...
hakson52 Newbie

hakson52

Posted
Posted

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!

Link to comment
Share on other sites
  • 4 weeks later...
  • 4 weeks later...
  • 1 month later...
Elie pour elle Newbie

Elie pour elle

Posted
Posted

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

Link to comment
Share on other sites
  • 4 weeks later...
  • 5 months later...
  • 3 months later...
  • 7 months later...
  • 1 year later...
Elias001 Newbie

Elias001

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

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...