Disclaimer: I just deployed this code to my Shopify site and it’ll be a few days before I can verify that it’s actually working.
A quick search for conversion tracking with Facebook and Shopify returns a couple of half-hearted setup instructions that involve dropping the pixel code into two places in your Shopify dashboard. While this is functional, you’ll be missing out on some very key events: AddToCart, InitiateCheckout, and Purchase.
Shopify has one such article here that does a thorough job of showing the two places that tracking behaior should be added. If you’re lost, follow the instructions here before continuing.
Following these instructions will get you to the point where your Facebook Pixel is being loaded in the head of your layout liquid file and in the checkout additional scripts section.
AddToCart
Now we need to enhance our conversion tracking with those events listed above. Let’s start with AddToCart. This gets called when the user, obviously, clicks the AddToCart button. The problem is, clicking add to cart ends up redirecting you to the /cart page without loading a page. Because of this, we need to track the event before they leave the page on which they clicked the AddToCart button.
Go into your Online Store > Themes dashboard, click the “…” button, and select “Edit HTML/CSS” to get to your theme editor.
Find the “product.liquid” file that’s responsible for rendering your product page. There should be a form there labeled “add-item-form” or something similar. Now, in order to track this, we’ll use the submit handler for this form. Because most (all?) Shopify themes use jQuery, we can use this snipped to send the tracking event to Facebook every time the AddToCart button is clicked. (add this at the bottom of product.liquid)
<script type="text/javascript">
$("#add-item-form").submit(function() {
fbq('track', 'AddToCart');
});
</script>
Now, this is sufficient to pass the class, but since we’re overachievers (otherwise why would we be tracking with a Facebook Pixel in the first place?), we’re going to enhance this with the information about the product.
The AddToCart event supports these parameters: value, currency, content_name, content_type, content_ids. In Shopify’s liquid templates, we have access to these values through the “product” variable. We’ll update the code as follows to track product information every time a user adds something to the cart:
<script type="text/javascript">
$("#add-item-form").submit(function() {
fbq('track', 'AddToCart',{
value: {{ product.price_min | money_without_currency}},
currency: '{{ shop.currency }}',
content_name: '{{ product.title }}',
content_type: 'product',
content_ids: [$("#product-select").val()],
});
});
</script>
There is one significant compromise that I’m making in this example for simplicity. We’re using the product’s price_min value to assign a value to the AddToCart event. If you have variations with a dramatic difference in price, this may not be ideal for you. If you’re interested in this, shoot me an email and I’ll point you in the right direction.
InitiateCheckout
Next up, InitiateCheckout. This event fires when the user clicks the “Checkout” button from the cart. The edit will look similar, but this time we’re editing the cart.liquid file (in the HTML/CSS editor again). In my template the form is being identified with “cartform”. Because there are two buttons on this page, we’re using the “click” handler instead of the submit handler. With the InitiateCheckout event, we have the following parameters: value, currency, content_name, content_category, content_ids, num_items. We’re going to ignore most of them for simplicity and just provide the value that we checked out with. This is the most important thing for determining the ROI on our advertisement.
<script type="text/javascript">
$("#checkout").click(function() {
fbq('track', 'InitiateCheckout',{
value: {{ cart.total_price | money_without_currency }},
currency: '{{ shop.currency }}',
num_items: {{ cart.items.size }}
});
});
</script>
Purchase
Now for the event we’ve all been waiting for. The purchase event represents the last stage in our sales funnel. Because Shopify handles all of the actual payment handling, we don’t have access to the final page in our theme editor. Instead, we have to find the checkout snippet field in our dashboard.
Go into Settings > Checkout from the sidebar of your dashboard and scroll down to the field that’s labeled “Additional content and scripts”
You should already have your Facebook Pixel code there. If you don’t, grab it and paste it in. Now we’ll be adding some extra code after the line that looks like: fbq('track', "PageView");
We’ll be adding the Purchase event which accepts these parameters: value, currency, content_name, content_type, content_ids, num_items, order_id.
{% if first_time_accessed %}
fbq('track', "Purchase",{
value: {{ checkout.subtotal_price | money_without_currency }},
currency: '{{ shop.currency }}'
});
{% endif %}
You could certainly get more fancy than this.. but this will give you the main thing that you’re interested in. The tracking information on the confirmed purchase. Now you can optimize your Facebook ads for actual sales numbers rather than just participation in the checkout process.