Re: Shopify Custom Pixel - Google Tag Manager not initialising

Shopify Custom Pixel - Google Tag Manager not initialising

AndyVast
Shopify Partner
7 0 3

I'm try to use the shiny new customer events admin to create a custom pixel for our dataLayer/Google Tag Manager implementation. 

 

Previously, our GTM script and custom dataLayer event scripts have all been included in our theme. 

 

Here's the basic script I put together to test this approach, using this guide - https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial .

 

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

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

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'item_id': event.data.productVariant.sku,
   'item_name': event.data.productVariant.product.title,
   'price': event.data.productVariant.price.amount,
   'currency': event.data.productVariant.price.currencyCode,
   'item_brand': event.data.productVariant.product.vendor,
   'product_title': event.data.productVariant.product.vendor,
  });
  console.log("product_viewed event pushed", dataLayer)
});

The product_viewed event being subscribed to here fires. I'm logging out the dataLayer obj within the event method here, as this cannot be done within the browser console (I assume because of the 'Sandbox' environment). However, there's a problem.  

 

As instructed, the GTM script is included at the top of the custom pixel, but GTM does not initialise properly when the script is included in a custom pixel in this way, rather than directly within the theme <head> .  Tag Manager is not defined within in the theme, and any dataLayer properties pushed are not being picked up within the GTM admin. 

 

Has anyone experienced any similar issues when trying to migrate to using a custom pixel for their site's event tracking?

Replies 24 (24)
AndyVast
Shopify Partner
7 0 3

Hi there @SpeedUp-Guru ,

 

Thanks so much for your response. I'll run through the checks you suggest and will get back to you with some results. I suspect that continuing to include the GTM script within the theme <head> itself, separate from the pixel, will probably be the way to go.  

Tools_Data
Shopify Partner
1 0 0

Hi @AndyVast ,

 

We are facing the same issue. We are also not seeing custom events in the GTM preview window after setup. However, when we add console.log calls, the events appear in the console, but not in the dataLayer object used in GTM.

 

Could you please advise if you were able to get it working and showing events in the dataLayer? We tried looking for the response you got from @SpeedUp-Guru , but could not find it.

 

Thanks in advance.

RossellaF
Shopify Partner
28 0 6

I am having the same issue, did you come up with a solution for this?

 

NatalieLim
Shopify Staff
1 0 0

Hello,

 

My name’s Natalie, and I’m a product designer at Shopify. My team is improving the pixels experience by speaking to merchants who have been actively creating pixels. I’d love to learn about your experience overall and understand any frustrations or successes so that we can continue to improve pixels.

 

We’re conducting remote, 50 minute interviews with merchants like you between October 23, 2023 and November 3, 2023. If you would like to share your experiences with pixels, please book a date and time that works best for you using the link below. 

 

Book an interview 

Note: If the link doesn’t work, it means all time slots have already been filled.

 

Due to the technical nature of pixels, please don’t hesitate to forward this research request to a team member who possesses the most expertise in this area.

 

Once you have scheduled a time to speak through the link above, you will receive a confirmation email with your scheduled date and time. 

If you have any questions about the interview process, feel free to email pixels-research@shopify.com.  

 

Thanks,

Natalie Lim | Product Designer

JaimeMoA
Shopify Partner
4 0 6

Hi AnyVast

 

I am facing the same issue using the same guide: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial .

 

I can see the events using console.log, but they do not get into the dataLayer.

 

I have the suspicion that there is an issue with the implementation of Custom Event itself, because the fact that is sandboxed, maybe the use of an iframe to protect the implementation of events. While testing this new thing I found some errors regarding CORS policy, that I think they are related to the Custom Pixel manager.

 

I do not really understand why Shopify recommends using the Pixel Apps, and then provides some new faulty feature in October 2022 that we cannot even use yet, especially when they plan to deprecate the checkout liquid soon, and there will not be any other way to push info to dataLayer via any other method.

 

Let me know if someone gets some response or solution to make GTM works within Custom Events.

 

Thanks,
Jaime

You can visit me at madeofanalytics.com

JCM88
Shopify Staff
2 0 1

Hi there 👋

 

With regards to pushing Shopify's standard events to GA, there are a number of things to check:

 

1) There is a Tag within GTM for each of the standard events that you wish to push to GA

2) Check that the user browsing the site has consented to marketing data tracking. Check your cookie policy settings

3) Within the Tag Assistant Legacy Chrome Extension you should see a reference to your GTM and GA accounts.

 

It's also import to note:

 

1) You will not be able to preview unpublished GTM changes. All container changes need to be published

2) Google Tag Assistant Companion doesn't work with custom pixels

3) If the customer also consents to analytical data tracking, then the GA4 standard events are tracked.

To learn more visit the Shopify Help Center or the Community Blog.

JaimeMoA
Shopify Partner
4 0 6

Hi,

 

After reading all the conditions/limitations and testing for a while the new Customer Events admin, I want to provide my feedback, because the new tool has many flaws:

 

1. You cannot validate the tags or dataLayer before publishing because the sandbox environment does not allow to see events in the Preview Debug tool or even within the dataLayer. So basically you mostly need to test in another site with all the tags/triggeres already published in GTM. This is not ideal, or the normal qa/validation process that web consultants follow to validate tracking which adapt tracking to every store or theme.

2. We cannot be using an old  Tag Assistant Legacy Chrome Extension as this tool is not even supported anymore by Google and can disappear at any time.

3. The sandbox environment let you fire Shopify events ONLY (although you provide the Custom Event subscribe which require to do also changes on the liquid files to then publish your events). But what about tracking things that come by default within GTM (form tracking, YouTube videos, click tracking, visibility events...), that do not require liquid code changes. What is the point to be modifying the theme with custom subscribers when you can track with GTM events with default listeners?

 

Maybe Shopify should have implemented a solution to get a standard dataLayer, rather than a sandbox environment that is very limiting and does not let you reach the full capabilities included in GTM and the validation process that every tracking implementation requires. 

 

 

 

 

 

 

You can visit me at madeofanalytics.com
hashcode_io
Shopify Partner
109 3 12

thanks for the other option we can use.

but I am testing with 3) Within the Tag Assistant Legacy Chrome Extension you should see a reference to your GTM and GA accounts.

we are not able to see the data or tag from into tag assistant due to the gtm script code into the customer event code sandbox.

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging
TGD1
Excursionist
10 0 9

3) If the customer also consents to analytical data tracking, then the GA4 standard events are tracked.


Does this ☝️ mean that the standard GA4 events are pushed to the data layer by default? I am seeing the standard events in my data layer even though I have not set up any events or data layer pushes. 

Has anyone found a solid solution to implementing GTM with custom pixels? I am going in circles with Shopify Plus support and Google's Accelerated Growth support trying to figure it out.

JCM88
Shopify Staff
2 0 1

Hi TGD1! Yes, the GA4 standard events should be published to the dataLayer by default if the customer has consented to analytical data. What issue specifically are you having implementing GTM with custom pixels?

To learn more visit the Shopify Help Center or the Community Blog.

TGD1
Excursionist
10 0 9

We currently have our GTM initialize code added directly to the header of the theme which is giving us the standard GA4 events in the data layer on non-checkout pages. Obviously this set up is not tracking checkout or purchase events. But when I try only initializing GTM in the custom pixel, along with the standard Shopify events (analytics_subscribe), we are not seeing anything in the data layer, even in the legacy Google tag helper.

lynth
Shopify Partner
80 3 6

So basically, is it possible that my customer events setup is functioning, but I can't test it with Tag Assistant? I want to send the data layer on the checkout_completed event, but all I see is my console.log, nothing more. If I understand correctly, the only way to verify it is to implement it on my store and make a purchase? Unfortunately, it's not the only problem. I also can't log the order.id value. I've lost a lot of my custom analytic data after the checkout extensions update.

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
lynth
Shopify Partner
80 3 6

Could you help us with this issue? Is it normal to not see the GTM code on the checkout page source code? 

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
JaimeMoA
Shopify Partner
4 0 6

If the code is implemented within Customer Events, you will not be able to see GTM code and dataLayer as it runs within a sandboxed environment, and you will not be able to see events within the GTM debugger on checkout pages. There is the old Tag Assistant, but it is not very reliable. The options to validate are:

 

- To generate console.logs to test the events

- Try to see events in Real Time report in Google Analytics 4 (events in real time sometimes do not appear quickly enough)
- Try the code in a test or dev store with similar setup to the one you are trying to verify.

 

 

 

You can visit me at madeofanalytics.com
lynth
Shopify Partner
80 3 6

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

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
JaimeMoA
Shopify Partner
4 0 6

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);
});

You can visit me at madeofanalytics.com
lynth
Shopify Partner
80 3 6

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,
  });
});
If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!

Gijs_shopprosNL
Shopify Partner
5 0 2

Hi everyone, I just ran into this and I would like to point to the Shopify documentation link that helped me understand this and fix this. See link below.

It doesn't work because the GTM code is injected in a sandbox iframe

https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial#testing-amp...

https://shoppros.nl - Shopify Migrations and E-commerce Consultancy
Vicko1
Shopify Partner
4 0 4

I followed the documentation and still can't connect to GTM. How have you solved this? 

Gijs_shopprosNL
Shopify Partner
5 0 2

Hi Vicko1, did you use the "Google Tag Assistant Legacy Chrome extension" ?

 

https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk

https://shoppros.nl - Shopify Migrations and E-commerce Consultancy
Vicko1
Shopify Partner
4 0 4

Hi Gijs_shopprosNL, yes, in fact, the error we were getting was because we were debugging the tag. If we don't debug it, it works. But during the debug we register multiple cross-domain policy errors, so we can not debug.

Gijs_shopprosNL
Shopify Partner
5 0 2

Our case was only to activate the gtm and than use the customer events functionality of Shopify. We did not face that issue, i'm sorry and good luck 

https://shoppros.nl - Shopify Migrations and E-commerce Consultancy
hashcode_io
Shopify Partner
109 3 12

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

Shopify Team @ Conversios System
Please confirm its success with a like or marking it as a solution!
Google analytics 4
SST - Server-side tagging solution.
#martech#GA4 #GTM #ownGTM #SST #ServerSideTagging

thebigcagency
Shopify Partner
16 0 6

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.

Web: https://thebigc-agency.de | LinkedIn: https://www.linkedin.com/in/christophkleine/
Please mark as solution if my comment was able to help with your problem.