Tracking Shopify website events
This guide provides a detailed walkthrough for tracking CDP events on your Shopify website
Tracking StoreFront
Download the file cdp-tracking-script.liquid
and put it in the folder Snippets: link
Tracking Checkout Event
Step by step go to Order status page setting: Home > scroll end page > click button Go to checkout setting > Order status page
Download the file cdp-order-status.liquid
and Insert it into the Order Status page: link
Script pubsub function
Download the file cdp-pubsub.js
and put it in the folder Assets: link
Insert the script into the file
1. Script get cart
Insert the script below into the file theme.liquid
(If the theme hasn't returned the JSON data within the cart yet).
<script id="cart-json">
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://shopify.antsomi.com/cart.json', true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
var response = JSON.parse(xhr.responseText);
document.getElementById('cart-json').textContent = JSON.stringify(response, null, 2);
}
else {
console.error('Request failed:', xhr.status, xhr.statusText);
}
};
xhr.onerror = function () {
console.error('Connection error');
};
xhr.send();
</script>
2. Event Remove Cart
Go to the file Assets/cart.js
and call the publish()
function in the CartRemoveButton class.
class CartRemoveButton extends HTMLElement {
constructor() {
super();
this.addEventListener('click', (event) => {
event.preventDefault();
this.closest('cart-items').updateQuantity(this.dataset.index, 0);
let indexItem = this.dataset.index;
let e = {
data : {
index : +indexItem
}
};
publish("antsomi:removeCart", e); //Call the 'publish' function in the CartRemoveButton class
});
}
}
3. Event Sign-In
Go to the file customers/login.liquid
in the folder Templates.
Insert the script at the end of the page:
<script>
let btnLogin = document.querySelector('#customer_login button');
btnLogin.addEventListener('click', function(){
sessionStorage.setItem('loginSubmitted', 1);
})
</script>
4. Event Sign-up
Go to the file customers/request.liquid
in the folder Templates.
Insert the script at the end of the page:
<script>
let btnLogin = document.querySelector('#create_customer button');
btnLogin.addEventListener('click', function(){
sessionStorage.setItem('registerSubmitted', 1);
})
</script>
Last updated