Hi. I have created a custom web pixel under customer events and it is working fine on all pages but not loading on Thank-You page.
Store: bastalux.myshopify.com
Code in the custom pixel:
// A single function to load GTM. This must be a separate function to ensure it’s loaded only once.
const loadGTM = () => { (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= 'www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,‘script’,‘dataLayer’,‘GTM-T4LGLKJM’); };
// Function to handle event data and push to the dataLayer
const pushToDataLayer = (eventName, event) => { window.dataLayer.push({ event: eventName, timestamp: event.timestamp, id: event.id, token: event.data?.checkout?.token, url: event.context.document.location.href, client_id: event.clientId, email: event.data?.checkout?.email, phone: event.data?.checkout?.phone, first_name: event.data?.checkout?.shippingAddress?.firstName, last_name: event.data?.checkout?.shippingAddress?.lastName, address1: event.data?.checkout?.shippingAddress?.address1, address2: event.data?.checkout?.shippingAddress?.address2, city: event.data?.checkout?.shippingAddress?.city, country: event.data?.checkout?.shippingAddress?.country, countryCode: event.data?.checkout?.shippingAddress?.countryCode, province: event.data?.checkout?.shippingAddress?.province, provinceCode: event.data?.checkout?.shippingAddress?.provinceCode, zip: event.data?.checkout?.shippingAddress?.zip, orderId: event.data?.checkout?.order?.id, currency: event.data?.checkout?.currencyCode, subtotal: event.data?.checkout?.subtotalPrice?.amount, shipping: event.data?.checkout?.shippingLine?.price?.amount, value: event.data?.checkout?.totalPrice?.amount, tax: event.data?.checkout?.totalTax?.amount, products: event.data?.checkout?.lineItems }); };
// Listen for checkout events and call the functions
analytics.subscribe(‘checkout_started’, (event) => { loadGTM(); pushToDataLayer(“checkout_started”, event); });
analytics.subscribe(‘checkout_contact_info_submitted’, (event) => { pushToDataLayer(“add_contact_info”, event); });
analytics.subscribe(‘checkout_shipping_info_submitted’, (event) => { pushToDataLayer(“add_shipping_info”, event); });
analytics.subscribe(‘checkout_completed’, (event) => { loadGTM(); pushToDataLayer(“checkout_completed”, event); });
// A standard event that ensures GTM is loaded on regular pages too
analytics.subscribe(‘page_viewed’, (event) => { loadGTM();
// Optionally push pageview data to the dataLayer here
});
Note: I am trying to track purchases via Google Tag Manager. It is recording all events except purchase because the pixel is not loading on Thank-You page.
I have created a screen recording for the same. Here’s the link - https://drive.google.com/file/d/1LjSyb7fEmrtXKyGkrBQclky7NM8Qs40v/view?usp=drive_link
Please help.