HypeAuditor’s JavaScript Sales Tracking for Shopify offers an easy, privacy-friendly way to track sessions and conversions right from the browser – no third-party cookies involved. It’s simple to set up, and we’re here to guide you through the steps.
By the end of this guide, you’ll be all set to track user clicks, orders, and sales on your Shopify store.
Step 1: Add the tracking code to your Shopify store
To get started, you need to add the JavaScript Sales tracking code to your Shopify store’s theme:
Log in to your Shopify account.
Go to Online Store > Themes and select Actions > Edit Code.
In the left sidebar, open the theme.liquid file.
Paste the following tracking code just before the closing </head> tag:
!function(){"use strict";const t=window.haTracking=window.haTracking||[];t.invoked||(t.invoked=!0,t.methods=["identify","convert"],t.factory=function(n){return async function(){const e=Array.prototype.slice.call(arguments);return new Promise((function(c,o){t.push([n,e,c,o])}))}},t.methods.forEach((function(n){t[n]=t.factory(n)})),function(){const t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://hatr.hypeauditor.com/hatr.iife.js",document.head.appendChild(t)}())}();
haTracking.identify()5. Save your changes.
This will ensure the tracking code is added to every page on your site, capturing all the clicks and sessions.
Step 2: Track conversions after checkout
In order to record conversions when a user completes a purchase, a second snippet needs to be added in your code.
Navigate to your Shopify store settings and select Customer Events, then click Add Custom Pixel.
Enter a pixel name (e.g., "HypeAuditor Javacript") and click Add Pixel. In the code section, remove any placeholder text. You will then need to replace it with one of the two following tracking codes, depending on your use case.
a. If your campaign-level currency (i.e., the currency you’ve chosen when setting up your campaign in the HypeAuditor Campaign Management tool) is the same as your store currency, use the code that excludes currency conversion.
Tracking code WITHOUT currency conversion:
!function(){"use strict";const t=window.haTracking=window.haTracking||[];t.invoked||(t.invoked=!0,t.methods=["identify","convert"],t.factory=function(n){return async function(){const e=Array.prototype.slice.call(arguments);return new Promise((function(c,o){t.push([n,e,c,o])}))}},t.methods.forEach((function(n){t[n]=t.factory(n)})),function(){const t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://hatr.hypeauditor.com/hatr.iife.js",document.head.appendChild(t)}())}();
analytics.subscribe('checkout_completed', (event) => {
haTracking.convert(
event.data.checkout.totalPrice.amount,
{
orderId: event.data.checkout.order.id,
currency: event.data.checkout.totalPrice.currencyCode
}
);
});
b. If your campaign-level currency differs from your store currency, use the code that includes currency conversion, not forgetting to specify your store currency in this snippet.
Tracking code WITH currency conversion:
!function(){"use strict";const t=window.haTracking=window.haTracking||[];t.invoked||(t.invoked=!0,t.methods=["identify","convert"],t.factory=function(n){return async function(){const e=Array.prototype.slice.call(arguments);return new Promise((function(c,o){t.push([n,e,c,o])}))}},t.methods.forEach((function(n){t[n]=t.factory(n)})),function(){const t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://hatr.hypeauditor.com/hatr.iife.js",document.head.appendChild(t)}())}();
analytics.subscribe('checkout_completed', (event) => {
// https://exchangeratesapi.io/documentation/
const PREFERRED_CURRENCY_CODE = 'USD';
const EXCHANGE_RATES_API_KEY = 'YOUR_API_KEY_HERE';
async function convertToPreferredCurrency(currencyCodeFrom, amount) {
try {
const response = await fetch(
`https://api.exchangeratesapi.io/v1/convert?access_key=${EXCHANGE_RATES_API_KEY}&from=${currencyCodeFrom}&to=${PREFERRED_CURRENCY_CODE}&amount=${amount}`,
{ method: "GET" }
);
if (!response.ok) {
throw new Error(`API request failed with status ${response.status}`);
}
const result = await response.json();
return result.result;
} catch (error) {
console.error("Error converting currency:", error);
return null;
}
}
async function recordConversion() {
const cartTotalCurrencyCode = event.data.checkout.totalPrice.currencyCode;
const cartTotal = event.data.checkout.totalPrice.amount;
let convertedCartTotal = null;
if (PREFERRED_CURRENCY_CODE !== cartTotalCurrencyCode) {
convertedCartTotal = await convertToPreferredCurrency(cartTotalCurrencyCode, cartTotal);
}
haTracking.convert(
convertedCartTotal ?? cartTotal,
{
orderId: event.data.checkout.order.id,
currency: convertedCartTotal ? PREFERRED_CURRENCY_CODE : cartTotalCurrencyCode
}
);
}
recordConversion();
})
📌 Important: The currency conversion rate used in this snippet is for example purposes only. We do not guarantee the accuracy of exchange rates provided by any third-party services, as they apply their own conversion methods. If you want to avoid discrepancies, use the same currency in both your store and campaign, so no conversion is needed, as described in approach (a).
3. In the top banner, click Save and then then click Connect.
Step 3: Set up your offer
The last step is to set up JavaScript sales tracking in HypeAuditor’s Campaign Management and place a test order to confirm everything is working smoothly.
Go to your campaign in the Campaign Management tool, click Settings, and select Sales Tracking.
Under the Sales Tracking tab, enable Set up tracking links. You’ll be prompted to specify the link you want influencers to promote. As a result, individual links will be automatically generated for each creator in your campaign.
Example of a generated link:
If your traffic is being directed to:
https://brand.com/shop
Then the URL should look like this:
https://brand.com/shop?ha_transaction={transaction_id}
3. Next, enable Track influencer-driven store sales, click Select tracking method, and in the popup that appears, enable Track using JavaScript code.
Once you’ve set up your offer, we highly recommend placing a test order using one of the generated influencer links and completing a test purchase. This will ensure that both clicks and conversions are being tracked correctly.
Note about domain support
HypeAuditor's JavaScript Tracking supports both same-site and cross-origin conversions, but there are a few limitations to be aware of. Namely, if the domain on the landing page is different from the domain on the checkout page (and it is not a sub-domain), we will not be able to track the conversions.
Supported:
Single Custom Shopify Domain:
Landing page: mystorename.com/landing
Checkout page: mystorename.com/checkout
📌 Important: The conversion will be calculated correctly only if the domain of the landing page and the shopping cart is the same.
Not Supported:
Default Shopify Domain:
Landing page: mystorename.myshopify.com
Checkout page: checkout.shopify.comMultiple Custom Shopify Domains:
Landing page: mystorename.com
Checkout page: mycheckoutpage.comCustom Domain with Sub-Domains:
Landing page: mystorename.com
Checkout page: checkout.mystorename.com
Make sure your domains are set up correctly to ensure proper tracking.