Overview
Using the TUNE Javascript Tracking to track the activity on a Shopify store requires placing the SDK code in two different locations:
- On a landing or product page where a click should be recorded and a tracking session should begin
- On the checkout page to mark when a conversion has been completed
Note: Javascript Tracking 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:
2. Select theme.liquid in the menu on the left under Layout and you will see something like this:
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: Network Domain Settings.
It should look like the following:
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
Note: If Additional Scripts are deprecated in your Shopify account, jump to the next section.
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 and Account then go to the Order status page section. In the Additional Scripts box place this script with your tracking domain.
{% if first_time_accessed %}
<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>
{% endif %}
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:
Recording Conversions on Checkout without Additional Scripts
If Additional Scripts are deprecated in your Shopify account, follow these steps instead to record conversions in TUNE.
1. Click on Customer Events, then go to the Add Custom Pixel and place the following code.
// Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML)
!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")
// Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking
analytics.subscribe("checkout_completed", (event) => {
tdl.convert(
{'adv_sub': 'shopify',
'adv_sub2':event.name
})
});
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.
In the example below we are tracking the event checkout_completed, and are sending in the event name in adv_sub2. You can chose any or multiple of Shopify's events and properties to pass on to TUNE. The full list can be found here.
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: 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 | remove: ',' }}',
'adv_unique1': '{{ checkout.order_number }}',
'promo_code': '{{ checkout.discount_applications[0].title }}'
}
)
This example shows an amount parameter that will receive the purchase price as a decimal number, the order ID passed to adv_unique1, 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 Javascript Tracking 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 domains
- 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.