GTM not loading on Checkout Pages

[cdem]

Hello! 

I have run into some issues recently related to the new checkouts. Any assistance is appreciated. Thanks in advance!

Issue:

Google Tag Manager is not firing on the checkout page despite a custom pixel being installed under customer events. Specifically Begin Checkout and Conversion/Purchase.

Background:

• The events do not fire when using goole tag manager tag assistant (I have updated to the new extension)
• The events do occur when using the Shopify pixel helper (checkout_completed / checkout_started)
• The tags that are not firing on checkouts page have enhanced conversions enabled.
• Conversion linker tag has been added
• Other events in this custom pixel are firing (not copied in the code below)
• when checking in google chrome the GTM appears under network if it was triggered by a different event such as add to cart.
• I have tested adding a trigger to fire tags when the url contains /checkouts and had the same result as without it.
• I don't believe this issue is due to consent

 

Possible interference:

• We have a separate pixel that sends purchase conversions directly to Google Ads. It doesn't have enhanced conversions enabled and I want to also include add to cart conversions. 
• We have the Google & Youtube app installed (I have unlinked accounts to test if this is blocking the GTM on the checkouts page but it made no difference). We want to use both the app and GTM container in case of future updates and any lapse in integration or data collection. We have checked off to ignore duplicate data. 
• Our google tags for Google Ads was created before GTM container. I am not able to migrate it to be solely in the  GTM container. 

Custom Pixel: 

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

window.dataLayer.push({
  event: "debug_event_check",
  timestamp: new Date().toISOString()
});
console.log("Debug Event Sent to DataLayer");

const COUNTRY_CODE = 'US';  

// Initialize GTM tag
(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-XXXX');

// Subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "conversion",
    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,
    items: event.data?.checkout?.lineItems.map(item => ({
      id: `shopify_${COUNTRY_CODE}_${item.variant.product.id}_${item.variant.id}`,
      google_business_vertical: 'retail'
    }))
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "begin_checkout",
    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,
    items: event.data?.checkout?.lineItems.map(item => ({
      id: `shopify_${COUNTRY_CODE}_${item.variant.product.id}_${item.variant.id}`,
      google_business_vertical: 'retail'
    }))
  });
});

[J_mah]

Hi Cdem,

thanks for your query.

As custom pixel works on a sandbox environment, You cannot connect Shopify checkout with GTM using this data layer.

You have to have The proper Datalayer to connect the checkout page and purchase/thank you page with GTM and an Chrome extension.

so the solution is changing the Datalayer and connect the GTM with an extension where you can connect checkout page and see all the events and tag firing status.

Feel free to ask if you have any questions.

Thanks

[nirajparte65]

Hi @J_mah,
Can you mention what are the exact changes you have made to the dataLayer to connect GTM container to the Checkout and further pages?
Thank you in advance!

Regards,
Niraj

[sanjnalal]

Hi Cdem, 

I would like to suggest an alternate solution for you. 

You can start using a google conversion pixel app which will rid you of all these technical things. It is definitely a live saver, as it takes care of the coding related for you and most of the apps have a dedicated support team that are ready to help you. 

You can try out 'Nabu for Google Ads Pixel'. You are specifically facing issues with the check out event, this app will resolve it for you. Additional events such as begin check out and add to cart can also be tracked. The app's coding is constantly changed based on Google's changes to ensure Google Ads Tracking is always accurate. It has additional features like, identifying duplicate conversions, or fixing missing conversion values. There are a whole lot of settings you can manage from the dashboard too. 

(the interface of the app)

I highly recommend you use this and let me know of any questions concerning set up if you do end up installing it 🙂