This is a step-by-step guide to help you configure advanced tracking on top of Littledata’s automated CartHook connection. The advanced tracking covers CartHook Upsells, Downsells, Checkout Steps and Thank You pages. We recommend that all merchants using CartHook take advantage of this advanced configuration.

Note: If you already have other scripts present in your Global Code fields, then we do not recommend adding the following scripts as that can lead to unexpected behaviors. Contact our support team if you have any questions.

Advanced tracking setup steps

Tip: Before following this guide, you must have Littledata’s core CartHook connection installed. You can install the core connection directly from the Littledata app, or your CartHook admin.

To get started with the advanced tracking setup, login to your Carthook account, click on your name at the top right corner, then click on Global Code:

Script 1: Checkout page javascript

Add the following code to the Checkout page javascript field:

					

CH.event(
function (EVENT, data) {
if (EVENT == “INITIATED_PAGE”) {
var GTMid = “GTM-XXXX”; // Your GTM id here
let cartData = data.cart_data;
let lineItems = cartData.line_items;
let contents = [];
let content_ids = [];
let item_cnt = 0;
lineItems.forEach(function (el) {
content_ids.push(el.id.toString());
contents.push({
id: el.sku,
quantity: el.quantity,
price: el.line_price,
name: el.title,
});
item_cnt += parseInt(el.quantity);
});

<!– Google Tag Manager –>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,GTMid);
<!– End Google Tag Manager –>

// GA event for Contact info step, triggered at the page load

gtag(“event”, “begin_checkout”, {
event_category: “Shopify (Littledata)”,
event_label: “Contact information”,
event_action: “Checkout”,
currency: cartData.currency,
items: contents,
coupon: cartData.coupon,
});

var contact_info = document.getElementById(“customer_email”);
var shipping_info = document.getElementById(“shipping_zip”);

// GA event for Shipping info step, triggered on leaving email field
// we are intentionally removing the event listener to avoid event repetitions

contact_info.addEventListener(“blur”, listen_contact);
function listen_contact() {
gtag(“event”, “checkout_progress”, {
event_category: “Shopify (Littledata)”,
event_label: “Shipping information”,
event_action: “Checkout”,
currency: cartData.currency,
items: contents,
coupon: cartData.coupon,
checkout_step: 2,
});
contact_info.removeEventListener(“blur”, listen_contact);
}

// GA event for Payment info step, triggered on leaving ZIP/postal field

shipping_info.addEventListener(“blur”, listen_shipping);
function listen_shipping() {
gtag(“event”, “checkout_progress”, {
event_category: “Shopify (Littledata)”,
event_label: “Payment method”,
event_action: “Checkout”,
currency: cartData.currency,
items: contents,
coupon: cartData.coupon,
checkout_step: 3,
});
shipping_info.removeEventListener(“blur”, listen_shipping);
}

}
},
function (EVENT, error) {
console.log(EVENT, error);
}
);


Script 2: Upsell page javascript

Add the following code to the Upsell page javascript field:

					

CH.event(
function (EVENT, data) {
if (EVENT == “INITIATED_PAGE”) {
var GTMid = “GTM-XXXX”; // Your GTM id here
var acc_button = document.querySelector(“.ch-accept-button”); // HTML selector for Accept button
var rej_button = document.querySelector(“.ch-decline-button”); // HTML selector for Decline button
var orderId = window.chData.order.carthook_order_id;
var lastChargedLineItems = window.chData.order.last_charged_line_items;
var upsellProduct = window.chData.cart_data.line_items[0];
var lastChargedPage = window.chData.last_charged_page_type;
var totalStep = window.chData.order.total_price;

<!– Google Tag Manager –>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,GTMid);
<!– End Google Tag Manager –>

window.dataLayer = window.dataLayer || [];

// Tracking transaction from the Checkout page, before upsell/downsell

var transactionProducts = [];
var taxPrice = 0;
var subtotalPrice = 0;

for (var i = 0; i < lastChargedLineItems.length; i++) {
var item = lastChargedLineItems[i];
transactionProducts.push({
sku: item.sku,
name: item.title,
price: item.price,
quantity: item.quantity,
});

if (item.tax_amount) {
taxPrice += item.tax_amount;
}

subtotalPrice += item.price * item.quantity;
}

var shippingRates = window.chData.order.last_charged_shipping_rates;
var shippingTotal = 0;

for (var i = 0; i < shippingRates.length; i++) {
shippingTotal += parseFloat(shippingRates[i].price);
}

if (transactionProducts.length > 0) {
window.dataLayer.push({
‘event’: “transactionStepComplete”,
‘chTransactionStepId’: orderId,
‘transactionTotal’:totalStep,
‘transactionSubTotal’: parseFloat(subtotalPrice),
‘transactionTax’: parseFloat(taxPrice),
‘transactionShipping’: parseFloat(shippingTotal),
‘transactionProducts’: transactionProducts,
‘stepCharged’: lastChargedPage
});
}

// GA event for Upsell step, triggered at the page load

gtag(“event”, “Upsell Page”, {
event_category: “Shopify (Littledata)”,
event_label: upsellProduct.title + ” (Loaded page)”,
});

// GA event for Upsell Accepted step, triggered at the click of Accept button

acc_button.addEventListener(“click”, function () {
gtag(“event”, “Upsell Page”, {
event_category: “Shopify (Littledata)”,
event_label: upsellProduct.title + ” (Accepted)”,
});
});

// GA event for Upsell Rejected step, triggered at the click of Decline button

rej_button.addEventListener(“click”, function () {
gtag(“event”, “Upsell Page”, {
event_category: “Shopify (Littledata)”,
event_label: upsellProduct.title + ” (Rejected)”,
});
});
}
},
function (EVENT, error) {
console.log(EVENT, error);
}
);


Script 3: Downsell page javascript

Add the following code to your Downsell page javascript field:

					

CH.event(
function (EVENT, data) {
if (EVENT == “INITIATED_PAGE”) {
var GTMid = “GTM-xxx”; // Your GTM id here
var acc_button = document.querySelector(“.ch-accept-button”); // HTML selector for Accept button
var rej_button = document.querySelector(“.ch-decline-button”); // HTML selector for Decline button
var orderId = window.chData.order.carthook_order_id;
var lastChargedLineItems = window.chData.order.last_charged_line_items;
var upsellProduct = window.chData.cart_data.line_items[0];

<!– Google Tag Manager –>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,GTMid);
<!– End Google Tag Manager –>

// GA event for Downsell step, triggered at the page load

gtag(“event”, “Downsell Page”, {
event_category: “Shopify (Littledata)”,
event_label: upsellProduct.title + ” (Loaded page)”,
});

// GA event for Downsell Accepted step, triggered at the click of Accept button

acc_button.addEventListener(“click”, function () {
gtag(“event”, “Downsell Page”, {
event_category: “Shopify (Littledata)”,
event_label: upsellProduct.title + ” (Accepted)”,
});
});

// GA event for Downsell Rejected step, triggered at the click of Decline button

rej_button.addEventListener(“click”, function () {
gtag(“event”, “Downsell Page”, {
event_category: “Shopify (Littledata)”,
event_label: upsellProduct.title + ” (Rejected)”,
});
});
}
},
function (EVENT, error) {
console.log(EVENT, error);
}
);


Script 4: Thank you page javascript

Add the following code to your Thank you page javascript field

					

CH.event(function (EVENT, data) {
if (EVENT == ‘INITIATED_PAGE’) {
var GTMid = ‘GTM-XXXX’; // Your GTM id here
var chOrderId = window.chData.order.carthook_order_id;
var orderId = window.chData.order.order_number;
var lineItems = window.chData.order.line_items;
var lastChargedLineItems = window.chData.order.last_charged_line_items;
var total = window.chData.order.total_price;
var lastChargedPage = window.chData.last_charged_page_type;

<!– Google Tag Manager –>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,GTMid);
<!– End Google Tag Manager –>

window.dataLayer = window.dataLayer || [];

// Step data

var transactionStepProducts = [];
var taxStepPrice = 0;
var subtotalStepPrice = 0;

for (var i = 0; i < lastChargedLineItems.length; i++) {
var item = lastChargedLineItems[i];
transactionStepProducts.push({
‘sku’: item.sku,
‘name’: item.title,
‘price’: item.price,
‘quantity’: item.quantity,
});

if (item.tax_amount) {
taxStepPrice += item.tax_amount;
}

subtotalStepPrice += (item.price * item.quantity);
}

var shippingStepRates = window.chData.order.last_charged_shipping_rates;
var shippingStepTotal = 0;

for (var i = 0; i < shippingStepRates.length; i++) {
shippingStepTotal += parseFloat(shippingStepRates[i].price);
}

var stepTotal = parseFloat(subtotalStepPrice) + parseFloat(taxStepPrice) + parseFloat(shippingStepTotal);

if (transactionStepProducts.length > 0) {
window.dataLayer.push({
‘event’: ‘transactionStepComplete’,
‘chTransactionId’: chOrderId,
‘transactionStepSubTotal’: parseFloat(subtotalStepPrice),
‘transactionStepTotal’: stepTotal,
‘transactionStepTax’: parseFloat(taxStepPrice),
‘transactionStepShipping’: parseFloat(shippingStepTotal),
‘transactionStepProducts’: transactionStepProducts,
‘stepCharged’: lastChargedPage
});
}

// Total data

var transactionProducts = [];
var taxPrice = 0;
var subtotalPrice = 0;

for (var i = 0; i < lineItems.length; i++) {
var item = lineItems[i];
transactionProducts.push({
‘sku’: item.sku,
‘name’: item.title,
‘price’: item.line_price,
‘quantity’: item.quantity,
});

if (item.tax_amount) {
taxPrice += item.tax_amount;
}

subtotalPrice += (item.price * item.quantity);
}

var shippingRates = window.chData.order.selected_shipping_rates;
var shippingTotal = 0;

for (var i = 0; i < shippingRates.length; i++) {
shippingTotal += parseFloat(shippingRates[i].price);
}

if (transactionProducts.length > 0) {
window.dataLayer.push({
‘event’: ‘transactionComplete’,
‘transactionId’: orderId,
‘transactionSubTotal’: parseFloat(subtotalPrice),
‘transactionTotal’ : total,
‘transactionTax’: parseFloat(taxPrice),
‘transactionShipping’: parseFloat(shippingTotal),
‘transactionProducts’: transactionProducts
});
}
}
}, function (EVENT, error) {
console.log(EVENT, error);
});