Shopify Custom Pixel - Google Tag Manager not initialising

Technical Q&A
,
21

thanks, did you check if the checkout_completed event works well in your case?

22

Yes, I have implemented checkout_completed event for multiple clients and stores, and if it is correctly implemented should work fine.

Although the following code is IMCOMPLETE as I am pulling the GA4 ecommerce object in some other part of the code, it can give you some idea.

analytics.subscribe(“checkout_completed”, async (event) => {
console.log(“purchase”);
console.log(event.data);
var purchaseObject = {
‘event’: ‘purchase’,
‘page_type’: ‘purchase’,
‘ecomm_pagetype’: ‘purchase’,
‘ecomm_totalvalue’: event.data.checkout.totalPrice.amount,
‘customer_email’: event.data.checkout.email,
‘customer_phone’: event.data.checkout.phone,
‘customer_address1’: event.data.checkout.shippingAddress.address1,
‘customer_address2’: event.data.checkout.shippingAddress.address2,
‘customer_city’: event.data.checkout.shippingAddress.city,
‘customer_country’: event.data.checkout.shippingAddress.country,
‘customer_country_code’: event.data.checkout.shippingAddress.countryCode,
‘customer_first_name’: event.data.checkout.shippingAddress.firstName,
‘customer_last_name’: event.data.checkout.shippingAddress.lastName,
‘customer_zip_code’: event.data.checkout.shippingAddress.zip,
‘ecommerce’: CustomTracking.getCheckoutCompletData(event)
};
console.log(purchaseObject);
window.dataLayer.push(purchaseObject);
});

23

thanks again. Mine looks like this, a little bit different but I think it should work also. I’ll check it.

(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-********');

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

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_competed_test",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    orderId: event.data?.checkout?.order?.id,
  });
});
24

@Gijs_shopprosNL that was nice hear from you. all the purchase Number are accurate ? are you able to preview the GTM ?

25

By now it is well established that you are not able to debug the GTM implementation via customer events via the Google Tag Manager preview function. This is mainly due to the fact that the preview function is not able to pass parameters and auth infos into the iframe in which the customer events feature is loaded onto the page.

After a couple of customer events implementations I found 4 ways to work around this issue:

  1. the browser network tab - if you open your browser console during the initial page load your browser will record the requests for the GTM load (.js) and HTTP Requests going out to google analytics servers from there (just search for something like v=2 within requests and you will see the requests). You can use the Payload tab to debug your analytics hits.
  2. the legacy Google Tag Manager Chrome extension - for some reason the extension is able to record your tracking hits and help you debug them.
  3. console.log events - You can use console.log events in your analytics.subscribe functions. Be careful where to place them. You can even built full console.log Scripts using the analytics.subscribe(“all_events”) method as a customer events pixel (without using GTM or GA).
  4. debugging hits via a server side container - if you are using a GTM server side container and sending your tracking hits there anyways (hosted on your own domain), you will be able to debug incoming GA- or data-requests and outgoing requests to basically anywhere (meta, GA, twitter). You can use the server side containers preview function for this. Setting up server side tracking is relatively cheap / free for small shops and does not cost that much for bigger sites.

I hope this helps some people stranded in this thread.

26

Hello JaimeMoA,
I totally agree with you. This is a problem for the Tracking Spesalist. Yo can use
DataLayer Checker Plus (https://chromewebstore.google.com/detail/datalayer-checker-plus/blglfmihmnbhfgfbomofeljmididgfhe?pli=1) a crome extention to see the data layer. I hope it will help you.
You can see the using process here: https://youtu.be/eS7KmiqQ5Rg
Best Regards.
teapantoor