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>