New Facebook Pixel & Shopify – Setup Your Conversion Tracking

New Facebook Pixel & Shopify – Setup Your Conversion Tracking

Implementing Facebook’s new tracking pixel on your Shopify store is relatively easy, like anything, once you know how to do it.

Generally, it works in two ways. You have a piece of code that goes on all of your pages, and then you have another set of code (extra info), added below it, that will capture and pass the information to the tracking pixel.

This extra information could be things like telling Facebook that your customer has landed on the order confirmation page, or they landed on checkout page – and you could then pass Facebook the products that are in the cart as of the moment.

Below we’re going to discuss how to add the new Facebook pixel to your Shopify store, and get it tracking your sales.

The first thing to do is to load up Power Editor. Then go to Tools , then click on “Pixels.”

If you haven’t visited this page before, you may get a splash screen that will introduce you to the “new” Facebook pixel.

Now you’ll want to go to Actions, then View Pixel Code

As I have mentioned above, the code comes in two parts. The first is a snippet, a Javascript code, that you’ll want to use on all of your pages

As Facebook suggests, this snippet needs to go in between <head> tags. Which can be found in your theme’s theme.liquid file.

If you want a more specific location, I’d suggest that you add the code just before the closing </head> tag.

Next step, is we need to add a modified version of this code to your checkout page.

You can access your Shopify’s checkout code by going to Settings > then Checkout. Then scroll down to Additional content and scripts.

Here, we need to take the standard code, which looks something like this

Then, we need to add a small script to the bottom.

<script> 

fbq(‘track’, ‘Purchase’, {

 

value: ‘{{ subtotal_price | money_without_currency }}’,

 

currency: ‘{{ shop.currency }}’

 

});

 

</script>

Making the full script, you’re adding to look something like this.

{% 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’, ‘52426583439xx89’);

 

fbq(‘track’, ‘Purchase’, {

value: ‘{{ subtotal_price | money_without_currency }}’,

currency: ‘{{ shop.currency }}’

});

 

</script>

<noscript><img height=”1″ width=”1″ style=”display:none”

src=”https://www.facebook.com/tr?id=52426583439xx89&amp;ev=PageView&amp;noscript=1

/></noscript>

{% endif %}

You can’t use the above code exactly, because you’d need to replace where it reads FB_PIXEL_ID with your actual Facebook pixel ID. But then again, you get an idea of what you’re aiming for.

The {% if first_time_accessed %} tag from the code above is useful now that the order confirmation page doubles as a page for your customers to track order status. It also reduces the number of falsely tracked sales.

The additional script uses Shopify’s liquid tags to pull in the value of the conversion (excluding tax and shipping) + your stores currency, and passes the information to Facebook.

That’s it!

To test if everything is all working, there are two things that you can do.

The first is to install the Facebook Pixel Helper. It is a Chrome extension, that you can run on your website, and it will report back if the pixel is running.

Don’t panic if it reports back saying that Facebook pixel took too long to load. It’s not ideal, but from my experience, Facebook pixel still works despite this message.

Another option is to check if the pixel is tracking conversions.

If you’ve got a relatively busy Shopify store, the easiest way to test it is to wait for someone to make a purchase, then go back to the Pixel page in PowerEditor – and check under Events to see if someone made a purchase.

If sales are not showing up here, then most likely, there’s something wrong with the code you’ve entered or used.

To view the results of your campaigns, you’ll want to select these two columns in Ads Manager

and

Adding these two columns will give you the number of sales along with the sales value.

So, that’s pretty much how to do it!

Something that confused me at first, that might be worth sharing, is the inter-relationship between Facebook’s pre-determined conversion types and then a feature called Custom Conversions. The new Facebook pixel provides 9 types of conversions (see table below), where each is implemented using the new pixel, and then just customizing a small bit of extra code.

If you want to track something outside of this scope, you can setup a custom conversion.

They would work by targeting text strings in the URL.

This is optional only, and in most cases probably not needed.

If you want to setup any of the 9 types of conversion tracking in the table above, you’ll need a bit more information. You might want to check the developer docs which are useful for reference.

If you’d like help getting this setup, you may contact me.

No Comments

Post a Comment