Best Practices

How to Add Facebook Dynamic Product Ad Tracking in Shopify

In this blog post, we get into the details of how to add Facebook dynamic product ad tracking in Shopify.

1. Ad Account Pixel ID

The code snippet below should be placed in between <head> and </head> on every page of your website. The best place to do this is in the theme.liquid template file, as this will be loaded on all pages. To get to this file, go to the Shopify dashboard, click on the tab labelled ‘Themes’ and then click on the ‘Customize theme’ button:

shopify-customize-theme

On the next screen click on ‘Edit HTML/CSS’ and locate the layout file labelled ‘theme.liquid’:

shopify-liquid-theme

Add this code to the file, ensuring that the <ad_account_pixel_id> placeholder (including the angled brackets <>) is replaced with your WCA pixel ID (both highlighted in red).

<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; } _fbq.push(['addPixelId', '<ad_account_pixel_id>']); })(); window._fbq = window._fbq || []; window._fbq.push(['track', 'PixelInitialized', {}]); </script> <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=<ad_account_pixel_id>&amp;ev=PixelInitialized" /></noscript>

2. Adding the Events

There are 3 Events that need to be implemented:

  1. View Content Event
  2. Add to Cart Event
  3. Purchase Event

View Content & Add To Cart Events

Normally the ‘ViewContent’ and ‘AddToCart’ events can be tracked on the same page, the “product.liquid” template.  Again, click on the tab labelled ‘Themes’ and then click on the ‘Customize theme’ button: Find and click on the ‘product.liquid’ file in the ‘Templates’ folder on the left hand side:

shopify-templates

Add the following code to the file:

<script>
$(function() {
// ViewContent Event
window._fbq.push(['track', 'ViewContent', {content_ids: ["{{ product.variants.first.id }}"], content_type: 'product'}]);
// Listen for 'AddToCart' event, and tag
$('.addtocart').click(function(e) {
window._fbq.push(['track', 'AddToCart', { content_ids: ["{{ product.variants.first.id }}"], content_type: 'product'}])
});
});
</script>

Note: The above code sample assumes that the Product ID that is provided in your product feed is the same ID as is returned by ‘product.variants.first.id’.

Purchase Event

This is different to adding the other two events, as there is no direct access to edit what is on the ‘Thank You’ page, which is displayed after a successful checkout. In order to add the Purchase Event code, click into “Settings” in the left menu and then click ‘Checkout’:

shopify-checkout-menu

Scroll down on this page and locate the ‘Additional content & scripts’ section:

shopify-additional-scripts

Any code entered in this box will be included on the ‘Thank You’ page. Being careful not to overwrite anything that’s in the box already and only add the code below.

Please note:

  • You will need to replace the <ad_account_pixel_id> placeholder (including the angled brackets <>) with your WCA pixel ID
  • You will need to replace the <conversion_pixel_id> placeholder with your conversion pixel ID. If you already have the conversion code on your “Thank You” page then please remove the line directly after “<!– Conversion Event –>”
  • You will need to ensure that the Product ID that you provide in your product feed is the same ID as is returned by ‘line_item.variant.id’.
  • If you already initialise Facebook on the “Thank You” page, then you do not need to include the code to do it again.

<!-- Initialise Facebook -->
<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);
window._fbq.loaded = true;
}
window._fbq.push(['addPixelId', '<ad_account_pixel_id>']);
})();


<!-- Conversion Event -->
window._fbq.push(['track', '<conversion_pixel_id>', {'value':'{{ total_price | money_without_currency }}','currency':'<currency>'}]);


<!-- DPA Event -->
content_ids = [];
{% for line_item in order.line_items %}
content_ids.push('{{ line_item.variant.id }}');
{% endfor %}
window._fbq.push(['track', 'Purchase', {content_ids: content_ids, content_type: 'product'}]); </script>

Find more helpful tips on our Frequently Asked Questions page.