Skip to main content
All CollectionsSales TrackingJavascript Tracking
Javascript Postback Tracking for Shopify
Javascript Postback Tracking for Shopify

How to implement Aspire's Javascript Postback Tracking for Shopify websites

Heather Clark avatar
Written by Heather Clark
Updated today

Overview

Aspire's Javascript Postback Tracking is a privacy-compliant tracking method that offers client-side functionality for session storage and conversions with minimal setup effort.

This article will walk you through the steps of adding Aspire's Javascript codes to your Shopify store to record clicks and conversions. This guide is applicable to all Shopify stores, regardless of plan type.

Important Considerations:

Directions

Step 1: Recording Clicks

To record a click and start a session when a user arrives on your website, you must add a simple code snippet to your Shopify store's master template. This is a prerequisite to tracking purchases and other conversion events.

  1. From your Shopify admin, click Online Store under Sales channels, then select Themes. Next to your current theme, click on the ellipsis icon (…) and select Edit code.

  2. Select theme.liquid in the menu on the left side 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://aspireiq.go2cloud.org")
    tdl.identify()
    </script>

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

Note: For headless Shopify setups, inject this script between the <head> tags of your index page or the specific page(s) you want to track.


Step 2: Recording Conversions on Checkout

To record a conversion when a user successfully checks out, a second snippet must be added.

  1. From your Shopify admin, click Settings and select Customer Events, then click Add Custom Pixel.

  2. Enter a pixel name, such as "Aspire Javascript", then click Add Pixel. In the Code area, remove the placeholder text and enter the following code.

    !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);
    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://aspireiq.go2cloud.org")
    analytics.subscribe('checkout_completed', (event) => {
    async function convertToUSD(currencyCodeFrom, amount) {
    // Documentation for this API: https://exchangeratesapi.io/documentation/
    const EXCHANGE_RATES_API_KEY = 'YOUR API KEY HERE';
    const response = await fetch(
    `https://api.exchangeratesapi.io/v1/convert?access_key=${EXCHANGE_RATES_API_KEY}&from=${currencyCodeFrom}&to=USD&amount=${amount}`,
    { method: "GET" }
    );
    const result = await response.json();
    return result.result;
    }

    async function recordConversion(){
    const cartSubtotalCurrencyCode = event.data.checkout.subtotalPrice.currencyCode;
    let cartSubtotal = event.data.checkout.subtotalPrice.amount;
    let cartSubtotalUSD = cartSubtotal;

    if (cartSubtotalCurrencyCode !== "USD") {
    try {
    cartSubtotalUSD = await convertToUSD(
    cartSubtotalCurrencyCode,
    cartSubtotal
    );
    console.log({cartSubtotalUSD})
    } catch (error) {
    cartSubtotalUSD = 0;
    console.error("Error when converting cart subtotal to USD", error);
    }
    }
    tdl.convert({
    'amount': cartSubtotalUSD,
    'adv_unique1': event.data.checkout.order.id,
    });
    }
    recordConversion()
    });

  3. Click Save in the top banner, then click Connect.


Step 3: Configure Your Offer & Place a Test Order

The final step is to configure your Link Tracking Offer within your Aspire account, then place a test order.

Go to Reporting > Sales Tracking to create a new Link Tracking Offer or configure an existing one. Within your Offer settings, there are two main requirements:

  1. Under Conversion & Tracking, the "Conversion Tracking" method must be set to Javascript Postback.

  2. Within the Offer URL Tracking, you must append transaction_id={transaction_id} to the end of the URL.

    For example, if you're directing traffic to: https://brand.com/shop

    You'll want to ensure the transaction_id is being appended like so: https://brand.com/shop?transaction_id={transaction_id}

Once you've created an offer, we highly recommend placing a test order before generating links for your members to confirm that clicks and conversions are being tracked properly.


Multiple Currency Support

Within the Javascript code provided in Step 2, there is a section that references Exchange Rates API, which is used to convert non-USD sale amounts to USD.

If your Shopify store accepts non-USD currencies at checkout, you'll need to use an exchange rate API to convert the sale amount to USD. In order to utilize the Javascript code provided in this article, you must subscribe to a paid plan through Exchange Rates API (see their pricing plans here). Their Basic plan provides up to 10,000 API requests per month and supports all base currencies.

Once you have subscribed to Exchange Rates API, please be sure to fill in the placeholder value with your API key before using the Javascript code in Step 2, as instructed below:

  • Enter your Exchange Rates API key in the placeholder value YOUR API KEY HERE in the snippet below:
    const EXCHANGE_RATES_API_KEY = 'YOUR API KEY HERE';

Note: If you are using a different exchange rate API, the Javascript code provided in this article will need to be modified to reference the API that you are using.


Domain Support

Aspire's Javascript Tracking only supports same-site and cross-origin conversions at this time. This means if the domain on the landing page is different than the domain on the checkout page (and it is not a sub-domain), we 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


Frequently Asked Questions

Do we need to complete these steps for each Link Offer created?

No, this is a one-time setup process.

Can we use Javascript Tracking if we have multiple Shopify stores?

Yes! While redirecting from one store to other, the redirect link should contain transaction_id=TRANSACTION_ID so that the Javascript code on the destination store can gather the Transaction ID. You can fetch the TRANSACTION_ID value from Session Storage.

Does Aspire use first click or last click attribution?

We use last click attribution. If two members refer a sale, the last member to refer the user to the conversion page will receive the credit.

What is the conversion window for Javascript tracking?

What Shopify store permissions are required to complete this setup?

To place the tracking script in your liquid.theme file (Step 1), you will need the permission "Edit code" to modify the theme code directly through the code editor.

To create a custom pixel (Step 2), you will need the permission "View customer events" to view customer events, including custom pixels.

How does Javascript store user sessions?

The Javascript SDK saves user sessions in a couple of ways:

  1. Session storage: the Transaction ID is saved in the browser while the user has this browser open. This data can be cleared on the browser depending on the browser's settings.

  2. Local storage: Aside from the session storage, the site also leverages the script to save the session as a first party cookie on the user's browser storage. This will persist with an expiration date matching the default attribution window. This is what Aspire will detect once the conversion call is made on the conversion page. If the user exits the browser and wipes all their local data, they will need to click on an affiliate's link again to start a new session.

Did this answer your question?