New Facebook Pixel HELP!

Joshua_Vega1
Tourist
3 0 5

What is the correct way to implement facebook's new unified pixel? Facebooks documentation says to install the base code between the <head> </head> tags on your website. Now to track conversions it says you can also add standard events to track specific actions. It says to "copy the code for the event you want to track, and paste it after the pixel code on the web pages where you want to track the action" but in a different section it says "within your Facebook pixel code, above the </script> tag, paste the Standard Event code that's relevant to your page (ex: Complete Registration, Add To Cart). You'll need to do this for every page you want to track."

Facebook pixel documentation https://www.facebook.com/business/help/952192354843755#has_old_ca

My question is do I place the base code in the theme.liquid and then only place the standard event codes in whichever pages I want to track certain actions? Example 1. Or do I place the base code in the theme.liquid and a modified version of the base code on whichever pages I want to track? Example 2.

 

Example 1. Base code in theme.liquid between <head> </head>:

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

</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=297919997051754&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Standard Event on checkout page:

fbq('track', 'Purchase', {value: '0.00', currency: 'USD'});

Example 2. Base code in theme.liquid between <head> </head>:

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

</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=297919997051754&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Modified base code on checkout page: 

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');

fbq('init', '297919997051754');
fbq('track', "PageView");
fbq('track', 'Purchase', {value: '0.00', currency: 'USD'});

</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=297919997051754&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

 

Daniel_Fine
Tourist
6 0 1

Hey, I just figured this out myself and the answer, at least for the checkout page, is your second example. The checkout page is separate from the rest of your site in shopify, so it gets its own base code plus the purchase event. So put just the base code in theme.liquid. Then you'll want to put the base code and purchase event in settings --> checkout --> additional content and scripts. 

Also, here's the actual snippet you'll want to use for the purchase event (it will actually populate the value and currency of the purchase and send that info to facebook): 

fbq('track', 'Purchase', {
 value: '{{ subtotal_price | money_without_currency }}',
 currency: '{{ shop.currency }}'
 });

The above snippet should go right below fbq('track', "PageView"); and should completely replace fbq('track', 'Purchase', {value: '0.00', currency: 'USD'});  

As for adding any other standard events elsewhere on your shopify site, I'm still lost there. It gets more complicated because theme.liquid provides the head section for every page on the site, so you probably have to use if/then statements to specify the pages you want want to track with specific events. Still trying to figure it out. 

Best,

Miranda

Peter_Coughlin
New Member
1 0 2

Miranda, 

Thank you so much for the valuable info! We just launched our first ad yesterday and I was looking for information on how to integrate the pixel in shopify correctly. 

Thanks!

Peter

TheGimbalstore.com

Miranda_Boydstu
New Member
3 0 0

Glad I could help! Implementing was a long process for me because this information isn't clearly laid out anywhere. It's running great for me, but let me know if you run into any problems! Once you've added the code and get at least one page view and purchase, you should be able to go to your FB ads manager --> tools --> pixels --> events and see the stats for these events (could take a few minutes after the first conversion to actually show on FB, so be patient). 

-Miranda

0 Likes
Joshua_Vega1
Tourist
3 0 5

1. Does it matter if I use {{ shop.currency }} or currency: 'USD?

fbq('track', 'Purchase', {value: '{{ total_price | money_without_currency }}', currency: 'USD'});

2. Can I remove fbq('track', "PageView"); since the base code in the theme.liquid is already capturing page views?

 

 

Miranda_Boydstu
New Member
3 0 0

Joshua, 

1) To my knowledge, not if you only offer USD. But setting the variable this way allows you to forget about it and not change anything even if you change or add other currencies to your shop in the future. 

2) No you can't delete the pageview event in checkout if you want to be tracking those page views. The checkout page is separate from your theme (or so I was told on another forum), so getting rid of the pageview event would mean you aren't tracking views of the checkout page.

-Miranda

0 Likes
Miranda_Boydstu
New Member
3 0 0

Joshua,

1) I don't think so as long as you only offer USD and don't plan on ever changing it or adding other currencies. Doing the variable this way just gives you more long-term freedom and you don't have to remember to make the changes if you do expand in the future. 

2) If you want to track pageviews of your checkout page, then you need the pageview event. The checkout page is separate from your theme (or so I was told on another forum), so it won't track checkout views unless you have the pageview event in place. 

-Miranda

0 Likes
Daniel_Fine
Tourist
6 0 1

Joshua, 

1) I don't think so as long as you're planning to never change your currency or add new ones. I'd personally just use the variable to you don't have to remember to change it in the future. 

2) No, the pageview event needs to stay if you want to track views to your checkout page. The checkout page is separate from the rest of your theme (or so someone told me on another forum), so the theme.liquid file isn't actually applying the base code to it. This is why you need to add the entire base code again on the checkout page, including the pageview event. 

-Miranda

0 Likes
John_Ramseier
New Member
1 0 1

helpful. Just inputed this. Thank you for this post

Nic_Brown
New Member
13 0 0

sorry to ressurect an old thread, but has anyone figured out how to track other standard events such as Search and AddToCart?

 

Would the fbq('track', 'AddToCart'); plus the base code go into the cart.liquid theme file? or would fbq('track', 'AddToCart'); simply be added to theme.liquid tracking code. 

0 Likes