Adding DPA Tracking in Shopify

Craig Wilmott -

Disclaimer: Each Shopify account may be configured differently, therefore, these instructions may not be applicable to everyone and should be followed with caution.

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 Online Store dashboard, click on the section labelled 'Themes' and then click on the 'Customize theme' button:

On the next screen click on 'Edit HTML/CSS' under Theme Options and locate the layout file labelled 'theme.liquid':

 

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>

NOTE - If you have been upgraded to the new Unified Pixel in Facebook, you may want to install the following pixel on the theme.liquid layout instead. If you have any questions about what pixel to place, please contact your Success Manager at StitcherAds:

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

Adding the Events

There are 3 Events that need to be implemented:

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

Normally the 'ViewContent' and 'AddToCart' events can be tracked on the same page, the "product.liquid" template. 

ViewContent

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:

 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'}]);

 

AddToCart

The below AddToCart event assumes that an item is added to cart in real time on the page i.e. via an AJAX call as opposed to redirecting a customer to a separate cart page.

Note:  '.addtocart' may not be the variable associated with the cart button on your site. You can check the variable associated with the cart button by right clicking on the button and inspecting the element.

 // 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>

 

If the AddToCart on your site redirects to a cart page i.e. the cart is not updated via an AJAX call the following code can be inserted at the end of cart.liquid template. 

<script>

 <!-- DPA Event -->

 content_ids = [];

 {% for line_item in cart.items %}

   content_ids.push('{{ line_item.variant.id }}');

 {% endfor %}

 window._fbq.push(['track', 'AddToCart', {content_ids: content_ids, content_type: 'product'}]);

 <!-- end DPA Event -->

</script>

 

NB: 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':

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

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 add the code below.

Please note:

  • 1. You will need to replace the<ad_account_pixel_id> placeholder (including the angled brackets <>) with your WCA pixel ID
  • 2. 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 -->"
  • 3. 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’.
  • 4. 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>

 

Advanced Implementation

We have seen an advanced implementation work for some customers in regards to the ViewContent and AddToCart event tags. Note that this has not been tested by StitcherAds and has only been used with the new Unified Pixel from Facebook. This assumes that a user is not redirected to a cart page upon adding an item to the cart.

ViewContent and AddToCart (theme.liquid Layout)

Directly below the WCA pixel in the theme.liquid layout, paste the following script to cover both the ViewContent and AddToCart events:

<script>
   {% if template contains 'product' %}
      fbq('track', 'ViewContent', {
         content_ids: ["{{product.variants.first.id }}"],
         content_type: 'product'
      });
   {% endif %}

 $(document).ready(function() {
   $("#addToCart").click(function() {
      fbq('track', 'AddToCart', {
         content_ids: ["{{product.variants.first.id }}"],
         content_type: 'product'
      });
   });
 });

</script>

 

 

Comments

Powered by Zendesk