Integrating and Debugging Google Tag Manager with Shopify's Custom Pixels

In this video, we'll explore how to debug Google Tag Manager when using Shopify's custom pixels to implement GTM on the Shopify checkout . We'll walk through the process of setting up a data layer, logging events, and troubleshooting common issues. We'll also discuss how to work around the sandboxed JavaScript in Shopify and use the logging feature in Google Tag Manager to debug custom pixels. Additionally, we'll cover how to log event data and create triggers to track custom pixel events.
Checkout the blog post here:
www.slideruleanalytics.com/bl...
Shopify Custom Pixel events:
shopify.dev/docs/api/pixels/c...
And our Google Tag Manager App here:
apps.shopify.com/sra-google-t...

[@LeoDiBlack]

Hey Mate, amazing tutorial, sad to see that Shopify doesn't share this kind of details at their docs but good to see that people like you shares this info, also kudos for the log trick, that's a cool workaround!

[@razvanmitre]

This is the best tutorial online for shopify custom pixels. Thank you!

[@user-ye8fm5mv8b]

A lot of thanks for the video! It was really help you to resolve my doubts. I was having some problems trying to debug the custom pixel I was thinking that it was caused because it was running in a sandbox. Now, I have a vision more clear about how it works!
:)

[@JohnVanOsdelGP]

Great video, Kevin. Very helpful and informative!

[@brandondossantos8061]

Super useful! Appreciate this!

[@StutheDude-k2e]

this is amazing

[@kshitijtripathi2704]

Thank you very much.

[@rossellaferrandino3044]

Hi, this tutorial was a lifesaver, thanks for putting it together!
When you publish the pixel in a production environment, do you then remove the Latest Datalayer variable?

[@marvellousmicheals5119]

Awesome tutorial, just the one problem with the "Latest Datalayer" variable not being found so probably needs some more info here.

[@kevinmclaughlin178]

Fixed

[@lukasbojkovsky9666]

@@kevinmclaughlin178 but now full datalayer in Laterst datalayer is not working

[@user-by4qc5lz7y]

Hey, thank you for the great tutorial! Could you share the code for the Full dataLayer variable? It doesn't appear to be in the article.

[@SweetchSweetch-gu9qe]

Here from Connor LinkedIn shoutout!

[@user-hd8nj8fu8s]

Hi. Thx for your tutorial. I do see that the GTM container is loaded but GA4 still can't see any events in real-time or debugView!?

[@christianjunemann5906]

Hi Kevin thank you very much for this video.
is there a stable way of passing SOURCE, MEDIUM, CAMPAIGN and KEYWORD data into the datalayer from the pages before the checkout?
The sandbox seems to completely bust any kind of attribution.

[@gregorymarkin7453]

Nice video thanks! So there is no workaround to push dataLayer to GTM from inside of Custom Pixels, but keeping GTM in the Theme and using preview mode?

[@MarceloOtero92]

Hey, thanks for sharing this! Can you please tell me what the content of the "Latest Datalayer" Custom Javascript variable is?

[@kevinmclaughlin178]

Added!

[@user-vz2ug9by3zs]

Thanks for the awesome tutorial Kevin.
How do the GTM tracks the default gtm events like clicks, page_view etc.

[@kevinmclaughlin178]

You can't, unfortunately

[@remivillepelet-extended9344]

Hi Kevin, thanks for this tutorial. I'm having trouble to log the 'checkout_completed' event tho. I tried all methods and every events log fine in the console except for the checkout_completed. Do you have the same issue ? Is it fixable ? Thanks

[@lukasbojkovsky9666]

Hi is it in yours Google Tag Manager App also support for different markets on different domains?

[@leonardopose]

It`s not working anymore here. Any changes?

[@TechComments]

I tried this and I can see the 'custom event' log in the console, but not the 'datalayer' log. It seems something is preventing the trigger from firing and invoking custom HTML logging from the tag. Any ideas?

[@user-lx3tv8cw5n]

how do I retrieve the "id" value

[@user-me9ih2mm3s]

Hello, can you give me the javascript code for the custom variable named "Latest Datalayer" in your javascript code in the tag code "Log Datalayer" please ? Without I can't pusblish my GTM container

[@PeteL-ef4qc]

I have the same issue. I see there is a Tag Manager recipe linked on the blog post, but I'd rather not use that :/

[@phLzera]

The same thing is happening here...

[@YasasGunaratne]

I have the same error. Any insights please?

[@kevinmclaughlin178]

Added!

[@DabrowkaLewandowskaDidierLab]

Hi Kevin, do you know how to implement a Cookie Banner that's compatible with Google Consent Mode v2 and works with the GTM custom pixel?

[@tomaszprzyborowski]

Is it normal that I can't see the GTM code on the checkout page in the source code?

[@edoardobruzzese98]

Hi Kevin, What does the variable "Full dataLayer" indicate in your guide?

[@kevinmclaughlin178]

Added to the blog post. Thanks!

[@RyanSchmied]

@@kevinmclaughlin178 It seems you've added a section for "Latest DataLayer" to the blog post which references "Full DataLayer" but no section for "Full DataLayer"

[@UlusalCagdasCalm]

I want to track Google Ads purchase event with GTM. But still I can't use GTM debug mode in my website checkout. What should I do? Please help me guys.

[@burakarca3216]

Hi Kevin, great documentation video! However I'm wondering how custom HTMLs or tags can be debuggable instead of dataLayer in general? We have a custom html that reads from "document" object and triggered by DOM changes, the tag no longer works after custom pixel change, but I'm not sure if the tag is not fired because of the trigger or simply it can't access document object anymore since it's in an iFrame, any suggestions?

[@kevinmclaughlin178]

You won't be able to access the document object anymore. I would expect most custom html tags to need some or significant tweaking

[@user-hk9sj2ns9e]

Hey there, I've noticed that after installing the custom pixel I am now seeing a lot of pageview url's in my GA4 that have /web-pixel...../sandbox. Are these related possibly?

[@kevinmclaughlin178]

Yes. If you're firing a pageview without properly formatting the GA4 pageview event, that's what it'll look like

[@user-zz8vm8rn9l]

Latest Datalayer code in blog post references another variable called Full Datalayer which isn't explained. What's Full Datalayer? Can the code for this be added here or in the blogpost?

[@user-zz8vm8rn9l]

I updated Latest Datalayer to:
function() {
return {{Event}}[{{Event}}.length-1];
}
This seems to work

[@kevinmclaughlin178]

I fixed the blog post. Thanks!

[@carloscardona6324]

@@kevinmclaughlin178 Hi, I can't see the "Full Datalayer" in the blog post

[@user-pw1lb7gi3n]

Thank you. How do you save the custom event without giving an Event name?

[@irinamosiyuk6663]

same

[@PSUnderground]

It's a period

[@PSUnderground]

@@irinamosiyuk6663 It's a period

[@user-pz2ri2cq1p]

not working

[@123Eliaslip]

Anyone else having issues connecting the pixel? "The pixel cannot be conected untill a custom pixel script is saved for it"

[@kevinmclaughlin178]

Sounds like you need to add the code and save before connecting

[@user-xr4oo2xp7q]

Half information. No mention of how to implement the actual part - Latest DataLayer

[@kevinmclaughlin178]

The linked blog post has all the relevant code

[@user-xr4oo2xp7q]

@@kevinmclaughlin178 Yes, read through it. But the Latest DataLayer is not available.

[@StutheDude-k2e]

this is amazing

[@TechComments]

I tried this and I can see the 'custom event' log in the console, but not the 'datalayer' log. It seems something is preventing the trigger from firing and invoking custom HTML logging from the tag. Any ideas?