Working with Shopify

Overview

Using the TUNE Javascript SDK to track activity on a Shopify store requires placing the SDK code in two different locations:

  1. On a landing or product page where a click should be recorded and a tracking session should begin
  2. On the checkout page to mark when a conversion has been completed

Note: The SDK only supports same-site and cross-origin conversions at this time. See the domain support section below for more details. 

Recording Clicks on Product Pages

To record a click and start a session when a user arrives at a product or landing page, you must add a simple code snippet to the master template.

1. Navigate to the theme.liquid master template by selecting Themes under Online Store and clicking on Actions > Edit Code:

Click edit code

2. Select theme.liquid in the menu on the left under Layout and you will see something like this:

Theme liquid

3. Paste the following tracking snippet at the top of the file right below the first <head> tag:

<script>
!function(){var o=window.tdl=window.tdl||[];if(o.invoked)window.console&&console.error&&console.error("Tune snippet has been included more than once.");else{o.invoked=!0,o.methods=["init","identify","convert"],o.factory=function(n){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(n),o.push(e),o}};for(var e=0;e<o.methods.length;e++){var n=o.methods[e];o[n]=o.factory(n)}o.init=function(e){var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://js.go2sdk.com/v2/tune.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(n,t),o.domain=e}}}();

tdl.init("https://EXAMPLE.go2cloud.org")
tdl.identify()
</script>

4. Before saving, replace “https://EXAMPLE.go2cloud.org” with your network’s tracking domain – be sure to include the ‘https://’ portion when replacing with your domain.

If your network uses a custom tracking domain, see the following help document which describes how and where a custom tracking domain is configured: https://help.tune.com/hasoffers/network-domain-settings/#tracking-domain.

It should look like the following:

Identify snippet

Once you save the file, the tracking snippet will be applied to all your Shopify pages and you are ready to start recording clicks! 

Recording Conversions on Checkout

To record a conversion when a user successfully checks out, a second snippet must be pasted in the checkout page.

1. Click on Settings > Checkout then go to the Order Processing section.

2. Paste the following script under the Additional Scripts label:

<script>
!function(){var o=window.tdl=window.tdl||[];if(o.invoked)window.console&&console.error&&console.error("Tune snippet has been included more than once.");else{o.invoked=!0,o.methods=["init","identify","convert"],o.factory=function(n){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(n),o.push(e),o}};for(var e=0;e<o.methods.length;e++){var n=o.methods[e];o[n]=o.factory(n)}o.init=function(e){var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://js.go2sdk.com/v2/tune.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(n,t),o.domain=e}}}();
 
tdl.init("https://EXAMPLE.go2cloud.org")
tdl.convert()
</script>

3. Before saving, again replace “https://EXAMPLE.go2cloud.org” with your network’s tracking domain – be sure to include the ‘https://’ portion when replacing with your domain.

It should look like the following:

Paste in checkout customization

Adding Parameters to Clicks and Conversions

The following examples of adding parameters use both static values, and Shopify “Objects” to populate the parameter values.

For information on how to use Shopify “Objects” and what fields are available, please refer to their documentation: https://shopify.dev/docs/themes/liquid/reference/objects

As for which Tune parameters are supported, and guidance on when to use “sub” values or “unique” values, please refer to our help document here: https://help.tune.com/hasoffers/advertiser-sub-ids/

Click Parameters

Additional tracking parameters can be added to both the click and conversion steps. Adding aff_sub parameters to a click, for example, requires adding parameters to the tdl.identify() code:

tdl.identify(
  {},
  {
    'aff_unique1':'{{ product.id }}',
    'aff_sub': '{{ product.type }}',
    'aff_sub2':'some_other_value'
  }
)

This example shows adding an aff_unique1 value with the product’s Shopify ID, an aff_sub value with the Shopify product type, as well as a hard-coded value for aff_sub2. Remember when passing unique values (like product.id) to use the aff_unique parameters instead of the aff_sub params. 

Conversion Parameters

Similar to click parameters, conversion parameters can be included by adding parameters to the tdl.convert() function:

tdl.convert(
  {
    'amount':'{{ total_price | money_without_currency }}',
    'adv_unique1': '{{ checkout.order_number }}',
    'promo_code': '{{ checkout.discount_applications[0].title }}'
  }
)

This example shows an amount parameter that will send the purchase price as a decimal number, a hard-coded value for adv_sub1, as well as how to pass a value to the promo_code parameter using Shopify “Objects”. See here for more information on the Shopify checkout object.  

Domain Support

The SDK only supports same-site and cross-origin conversions at this time. Meaning if the domain on the landing page is different than the domain on the checkout page (and it is not a sub-domain), the SDK will not be able to track the conversions. See below for examples.

Supported

1.  Single custom Shopify domain

  • Landing page: mystorename.com/landing
  • Checkout page: mystorename.com/checkout

2.  Custom domain with sub-domains

  • Landing page: mystorename.com
  • Checkout page: checkout.mystorename.com 

Not Supported

1.  Default free Shopify domain

  • Landing page: mystorename.myshopify.com
  • Checkout page: checkout.shopify.com

2.  Multiple custom Shopify domaines

  • Landing page: mystorename.com 
  • Checkout page: mycheckoutpage.com 

Other References

For further details on using parameters in the Javascript SDK read our Javascript SDK Method Reference.

For further details on using Shopify parameters, see the Shopify documentation on using Objects.