How to Setup Facebook Pixel in Shopify

If you want to setup your Shopify store properly to track product views, adds to cart and purchase conversions you should follow this simple guide.

​What you should do is place some code in your theme.liquid to track all your visitors, then in your product.liquid file, to see who comes and checks your products.

Then to cart.liquid, to be able to track people that add your products to the cart.

And finally, you want to know how much you spend to get a sale, so you should also track that.​

Don't worry, I'll show you how to do it very easily.​

​First get your Facebook pixel code from your Ads Manager.

facebook pixel

Then click on View Pixel code

view pixel code

​And you should see a code like that one

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

Add the code above to your theme.liquid file just before the closing </head> tag.

This code is often name as the base code.

​Now open product.liquid and add this code at the bottom of the file

​<script>fbq(‘track', ‘ViewContent');</script>

Once done, head over to cart.liquid and add this code also at the bottom of the file

​<script>fbq(‘track', ‘AddToCart');</script>

Now in your Shopify dashboard go to Settings > Checkout > Additional content and scripts

In that section you should place the following code always replacing by your own pixel number as show in red below

​<!– Facebook Pixel Code –>{% if first_time_accessed %}<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', ‘17216101317XXXX');fbq(‘track', “PageView”);fbq(‘track', ‘Purchase', {value: ‘{{ total_price | money_without_currency }}', currency: ‘{{ shop.currency }}'});</script><noscript><img height=”1″ width=”1″ style=”display:none”src=”https://www.facebook.com/tr?id=17216101317XXXX&ev=PageView&noscript=1″/></noscript>{% endif %}<!– End Facebook Pixel Code –>

The section in bold is the one you should add to your base code to track your purchases.

​Now you can go and test it with the Facebook pixel helper.

You should use Chrome to install the pixel helper.​

Now open each of your pages, whether it is a product page or an add to cart and you should see this in the upper right corner of your browser.

facebook pixel helper

​It means that the PageView and the ViewContent events have fired properly.

This is a basic installation of your Facebook pixel​ in Shopify.

Soon I will do another tutorial with some more advanced parameters to add to your events.​

​References:

If you want more details check this Facebook Pixel Implementation Guide.

Fernando
 

I'm Fernando, the guy behind Lodomus. I love everything related to online marketing and email marketing.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: