Integrating and Debugging Google Tag Manager with Shopify's Custom Pixels
HTML-код
- Опубликовано: 14 окт 2024
- 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.sliderulea...
Shopify Custom Pixel events:
shopify.dev/do...
And our Google Tag Manager App here:
apps.shopify.c...
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!
This is the best tutorial online for shopify custom pixels. Thank you!
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!
:)
Awesome tutorial, just the one problem with the "Latest Datalayer" variable not being found so probably needs some more info here.
Fixed
@@kevinmclaughlin178 but now full datalayer in Laterst datalayer is not working
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?
uhm, why add 2 variables, a trigger and a tag in GTM, instead of just console.log the dataLayer after doing a dataLayer push? Just like you did for the custom event.
Great video, Kevin. Very helpful and informative!
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
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
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 :/
The same thing is happening here...
I have the same error. Any insights please?
Added!
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?
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.
Hey, thanks for sharing this! Can you please tell me what the content of the "Latest Datalayer" Custom Javascript variable is?
Added!
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.
Thanks for the awesome tutorial Kevin.
How do the GTM tracks the default gtm events like clicks, page_view etc.
You can't, unfortunately
Super useful! Appreciate this!
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!?
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?
Hi Kevin, What does the variable "Full dataLayer" indicate in your guide?
Added to the blog post. Thanks!
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?
You won't be able to access the document object anymore. I would expect most custom html tags to need some or significant tweaking
Hi is it in yours Google Tag Manager App also support for different markets on different domains?
It`s not working anymore here. Any changes?
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.
Is it normal that I can't see the GTM code on the checkout page in the source code?
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?
I struggled with the trigger as well. I didn't see the tiny detail to activate the "Use regex matching" so the wildcard, the "." works for all the events. Maybe it's the same for you?
Make sure you have setup the Latest Datalayer and Full Datalayer Variables. The video is incomplete when it comes to setting up this variables, just follow his attached blog link page and read the blog yourself. Its much clearer there.
@@BillySchrammen Ahah! It was in fact that I did not use "." as the event name. I missed that in the screenshot posted on the blog page. Thank you, Billy!
@@HamRicohermoso Thank you for your suggestion. I did catch that part from the linked blog page. It turned out that Billy was correct. I missed using the wildcard "." as the event name in my trigger configuration. I appreciate you taking time to comment!
Here from Connor LinkedIn shoutout!
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?
I updated Latest Datalayer to:
function() {
return {{Event}}[{{Event}}.length-1];
}
This seems to work
I fixed the blog post. Thanks!
@@kevinmclaughlin178 Hi, I can't see the "Full Datalayer" in the blog post
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?
Yes. If you're firing a pageview without properly formatting the GA4 pageview event, that's what it'll look like
this is amazing
Thank you. How do you save the custom event without giving an Event name?
same
It's a period
@@irinamosiyuk6663 It's a period
Thank you very much.
how do I retrieve the "id" value
not working
Anyone else having issues connecting the pixel? "The pixel cannot be conected untill a custom pixel script is saved for it"
Sounds like you need to add the code and save before connecting
Half information. No mention of how to implement the actual part - Latest DataLayer
The linked blog post has all the relevant code
@@kevinmclaughlin178 Yes, read through it. But the Latest DataLayer is not available.
this is amazing