GTM - Customer Events Shopify

customereventsshopify.hs

// Step 1. Add and initialize your third-party JavaScript pixel (make sure to exclude HTML)
(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', 'GTM-XXXXXX');


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

// Step 2. Subscribe to customer events using the analytics.subscribe() API

analytics.subscribe('page_viewed', (event) => {
    window.dataLayer.push({
        'event': 'page_viewed',
        'page_location': event.context.window.location.href,
        'page_title': event.context.document.title,
    });
});

function gtmCheckoutData(event) {
    let checkout = event.data.checkout;
    let lineItems = [];
    for (const checkoutLineItem of event.data.checkout.lineItems) {
        lineItems.push({
            item_name: checkoutLineItem.title,
            item_id: checkoutLineItem.variant.sku,
            item_variant: checkoutLineItem?.variant.title,
            item_brand: checkoutLineItem.variant.product.vendor,
            price: checkoutLineItem.variant.price.amount,
            quantity: checkoutLineItem.quantity
        });
    }

    return {
        currency: checkout.totalPrice.currencyCode,
        value: checkout.totalPrice.amount,
        items: lineItems
    };
}


analytics.subscribe('checkout_started', (event) => {
    //console.log('custom event', event);
    const data = gtmCheckoutData(event);
    window.dataLayer.push({
        ecommerce: null
    });
    window.dataLayer.push({
        event: 'begin_checkout',
        ecommerce: {
            currency: event.data.checkout.totalPrice.currencyCode,
            value: event.data.checkout.totalPrice.amount,
            items: data.items
        }
    });
});



analytics.subscribe("checkout_completed", (event) => {
    //console.log('custom event', event);
    const data = gtmCheckoutData(event);
    window.dataLayer.push({
        ecommerce: null
    });
    window.dataLayer.push({
        event: "purchase",
        ecommerce: {
            currency: event.data.checkout.totalPrice.currencyCode,
            value: event.data.checkout.totalPrice.amount,
            tax: event.data.checkout.totalTax.amount,
            items: data.items
        }
    });
})


analytics.subscribe("payment_info_submitted", (event) => {
    //console.log('custom event', event);
    const data = gtmCheckoutData(event);
    window.dataLayer.push({
        ecommerce: null
    });
    //console.log('Payment info submitted');
    window.dataLayer.push({
        event: "add_payment_info",
        ecommerce: {
            currency: event.data.checkout.totalPrice.currencyCode,
            value: event.data.checkout.totalPrice.amount,
            payment_type: "Credit Card",
            items: data.items
        }
    });
    //console.log('DatLayer',window.dataLayer);
})