Version 2: Shopify Customer Events (Pixels) Tagging - Google Tag Manager, GA4 & Conversion Tracking
ฝัง
- เผยแพร่เมื่อ 16 เม.ย. 2024
- 🔹 Buy Now:
triangledigtalstore.myshopify...
*Shoutout to LEO Measure: leomeasure.com/
Unlock the full potential of your Shopify store with Google Tag Manager (GTM) and Google Analytics 4 (GA4)! This comprehensive tutorial will guide you step-by-step on setting up a GTM Data Layer for Shopify, optimized for tracking customer interactions via Shopify’s pixel events. Learn to master enhanced ecommerce tracking, conversion tracking, and enhanced conversions to elevate your marketing strategies and sales processes.
In this tutorial, you’ll discover how to integrate Shopify's customer events into GTM and GA4, providing you deeper insights into your customers' journey and behavior. I’ll provide all necessary code snippets and a ready-to-use GTM container to jumpstart your setup.
📝 What You Will Learn:
- Integrating GA4 with Shopify using GTM, focusing on Shopify's pixel events.
- Setting up enhanced ecommerce tracking that leverages customer data.
- Implementing conversion tracking and capturing enhanced conversions through detailed customer event data.
- Practical tips for deploying your GTM container to effectively track customer interactions.
👍 Like, Subscribe, and hit the Bell icon for more detailed tutorials like this. Feel free to drop your questions or feedback in the comments below! - วิทยาศาสตร์และเทคโนโลยี
Thank you very much for making an updated video!!
thank you for sharing the process on the new checkout sequence!
Glad it was helpful!
Wow, this was amazing! Thanks, this was an immense help and works perfectly
Great to hear!
you helped me a lot! amazing!
Great explainer on implementing this with ease. Thank you.
Glad it was helpful!
Yeey! thank you soo much!
No problem!!
Thank you very much, thats really nice you shared you code
Cheers!
Thank you for this video
No worries!
great vídeo! thanks from brazil 🙏🏼
You're welcome. Have a good one - stay subscribed!
Thanks a lot !
Np prob.
Any idea how to push metafields upon checkout into the datalayer? I want to set up profit based tracking for Google Ads instead of revenue. I could not seem to pull the cost or profit data in.
thank you soo much!!!
No problem!
Thank you for sharing! do you recommend to use "Google & TH-cam" app to integrate with GA4 along with using customer event pixel for GTM checkout? Wondering how to avoid the conflict.. duplicate on event sending..
Good question: Check out the desclaimer at the top here (tldr: turn the app off if you are going to be following this video): triangledigital.xyz/shopify-datalayer-gtm-install
Thank you very much
No prob.
Hello Allessandro, first of all thanks for taking the time to create this video. I have a question though.. After implementing this solution, I can see all events that are happening up to "Begin checkout" in GA4 event reports which is great. However I can't see the checkout steps "add shipping info" etc.. any idea please? Thanks!
Try to reinstall. I've made some updates
Very helpful, thanks so much for this video! To track conversion on GAds I still need to add the tags from all events that I want to track, or somehow the Google Ads Conversion tag syncs with the GA4 tags? For example, do I need both "GA4 - Add to Cart" and "GAds - Add to Cart" tags or just the GA4 one is enough?
You can use the existing GA4 triggers to fire any tag including new Google ads conversion tracking tags, Facebook, Pinterest etc...
@@Alessandro-Colarossi got it, thanks!
Np, good question - thanks for asking.
Excellent.I have GA installed in the preference section in Shopify's back-end Should I remove it after applying your solution?
Yes. Removing it will avoid double counting.
Thank you very much for the informative video. I couldn't find the open source code you have used in the description. Is it behind the paywall?
I couldn't find the code other than the paid one. Could you please help with it?
@@HamperPick-p8m It is, check the link in the description. it was getting too tough to support.
Hey Alessandro! That's helpful. Thanks.
How to enable enhanced conversions with this setup?
It's already set up for you in the GTM container template I provide. Just add your Google Ads conversion ID and Label. Check out the link in the description, fill out the form and you'll have access to it.
Does the second string of code in GTM need to be added after the of the theme code?
No. That one is not necessary.
Thanks for another helpful video! I have set-up on my store and can see the GA4 tracking working. However, the Google Ads Conversion Tracking purchase tag doesn’t seem to be recording. I’ve updated the Conversion ID and label as suggested. Wondered if this is working for you?
Yeah it works. It needs to actually be triggered for it to say verified in the Google ads UI. If it fires based on a conversion attributed to a Google ad click it will change to recording conversions.
Alessandro, Thank you so much for your super detailed tutorial. I am a super noob in coding, I am more of a graphic designer, and somehow the dev side of thing for our ecommerce fell on my lap. I can't thank you enough Alessandro! You rock! Do you sell consulting services by any chance for people that use shopify and google?
Glad you found it useful. Feel free to book time with me here - I can offer services, happy to help. Here's my booking link: koalendar.com/e/chat-with-alessandro
@@Alessandro-Colarossi Thank you very much! I will get back to you in the near future boss!
@@Alessandro-Colarossi I have a quick question Alessandro. I followed your instructions and debugged also, everything seems to work just like in your screen videos. there is one script that used to be in our additional scripts in Settings --> Checkout, named "Enhanced Conversion Data". Do I need another javascript code to be added in Customer Events---->Custom Pixels? Or does the tutorial we just did with you already has that functionality? Thanks
Hi, works perfectly except for purchase (i had issue with an extension which was blocking gtm). For purchase i see the console log event but it seems datalayer push and purchase_ga4 is not triggered correctly, very strange as all other datalayer events are detected correctly
Check out my latest version - version 3. New video. Everything works fine.
Hi! Thank you for the video.
I have a question, when you create the pixel on shopify and you set GTM I see this: "For enhanced security and stability, this pixel runs in a sandbox. Please consult with the third-party service provider about implementation best practices."
It could be possible that we could lose data because of this?
And another one, are you planning to do a video of consent mode and shopify to complement this video?
Thank you!
Running the pixel in a sandbox by Shopify enhances security and stability by isolating the pixel from the main system. As a result, it limits the use of external debugging tools such as GTM's preview mode. However, the GA4 debug mode remains functional. The code I'm showing here is available for you to use, enabling the viewing of purchase events outputted to the console.
To answer your question: Data loss due to sandboxing itself is unlikely, as its purpose is to protect your system rather than endanger it.
Stay tuned for a Consent Mode video, thanks for watching! :)
Thanks for the explanation. But i need to modify some steps. How can i get the metafields in the checkout tags? it's possible?
Have a look at the developer console and GTM preview mode to see the event names that fire.
Happy to help you out as well, feel free to reach out at: me@alessandrocolarossi.com
Thank you for sharing this Alessandro.
I am facing one challenge, In the console view, the checkout completed event triggers but not the purchase. And, in the GTM debug view as well, everything works but not the purchase trigger. I have written you an email with screenshots, can you please check and let me know.
Hello, thank you for this video! Very clear and easy to set up, thank you. I'm having a bit of a problem with it though. The following tags do not run when testing purchases: GA4 - Checkout Page View | GA4 - Purchase | GA4 - Add Payment Info | GA4 - Add Shipping Info | Google Ads Conversion Tracking
Please, can you help me to fix it ?
Are you using the latest code? It was updated yesterday.
Thank you, Allessandro, everything looks fine, but I got one issue: despite the fact that events mostly appear in GA4 reports, some of them (add_to_cart, remove_from_cart and begin_checkout) still are not available in GA4... Could you please explain what the possible reason is?
These probably need time to populate with data.
Do we have retargeting here? Is it possible to set up with custom pixel?
Sure, you can trigger whatever you want including retargeting tags from the gtm container using the existing triggers. Cheers!
Hi! Thank you for the tutorial. Its great. Where is the free version of the code? I can't find it for some reason
Because of the support required, as I've found - this is now paid code that comes with support. You're able to buy it at the link provided.
I've lowered the price.
Do you have a tutorial that is a step before this one for newbies? I don't know how to set up Google Analytics etc. Is that where I should start first?
Try this one: th-cam.com/video/vOlbKbtZGNQ/w-d-xo.html
@@Alessandro-Colarossi Ok, so all I have done is set up a google analytics pixel on shopify, I am looking for a step by step guide on what to do after that, until I reach the custom events section. A very new newbie to all of this 🤓
Hey mate, I do have a question, the add shipping info event gets triggered in the console every time I change the address in shopify checkout. Is this an issue, and/or can it be fixed?
I would like to add that it is repeating it in google analytics too, is there any way we could just add an if statement that is able to filter it onto only the first instance?
I'll look into this. Stay tuned.
Hi Alessandro,
Does creating this pixel set up work for the old checkout experience (checkout.liquid) or just with the more recent checkout extensibility. I've tried installing on an older theme to test first (old checkout) but am not seeing the events in the datalayer trigger or the purchase event at checkout.
This is for the new pixels customer events not the checkout/aditional scripts section. For the old way, use this: th-cam.com/video/tZt2UCxGqPc/w-d-xo.html
@@Alessandro-Colarossi Thanks for the reply. Sorry, I wasn't very clear with the question. If i am currently using the old checkout still, can I move to this customer events pixel set up (moving away from checkout.liquid/additional scripts implementation) before upgrading to checkout extensibility, or do i need to do the checkout upgrade first before implementing this tracking solution?
@@benjimitchell1 Have a look at my latest video and latest version of the code to check how to debug if you've upgraded the checkout.
It should work on all experiences.
If you don't see the purchase event fire and your conversion tracking tag doesn't fire, this could be related to another person that is having this issue. I don't know what the reason is - I've contacted Shopify plus support about it and they're looking into it.
Maybe check if my code and GTM works with a fresh theme. If it does then something in your theme is blocking it.
Stay tuned for info. I'll post about it on the TH-cam channel
Alessandro
@@alessandrocolarossi2806 found the issue in the code for the pixel. Line 16 specified:
if (window.location.href.includes('/checkouts/cn/'))
Out checkout URL doesn't contain /cn/ so pixel wasn't firing correctly during checkout. Adjusting this fixed the issue.
Are you able to trigger a Script on the thank-you page by doing this?
Yes, the purchase event does this. I've included this event in my templated GTM container. Or use the Google chrome console to find the events that fire and you can use them in your own gtm. FYI the purchase event is called triangledigital_purchase.
@@Alessandro-Colarossi Ok I see. I’m trying to trigger a tracking script from Unbounce so it reports sales as a conversion inside the platform. Their old documentation is outdated and relies on the order confirmation script. I’m having a hard time setting this up
thanks for the very useful video ! one doubt: i can see events in console on all the steps except for the checkout ones. Basically i cannot see the 'shipping info', 'payment info' and 'purchase' like in the video. Is a matter of Shopify plan where checkouts can be tagged only if you're in the more advanced? thanks!
If you're using Shopify plus, I'm pretty sure you need to also be using the new checkout extensibility.
@@Alessandro-Colarossi thanks for the feedback ! i'm not using Plus, that's why I asked :( with your instructions, should i be able to cover the checkout and the purchase steps even if i'm in the 'Basic' plan? my issue is that implementing as per your video, checkout steps such as shipping info, payment info and then purchase are not coming up in the events. thank you
@@Alessandro-Colarossi deactivating the shopify app and implementing from scratch your codes it worked but when I try to do a new purchase as test (having cleared cookies and cache) the console doesn't populate anymore with checkout events. I'm NOT on the Shopify Plus plan! any idea why? is like the shopify custom pixel is blocked :(
I've contacted Shopify support about this. I'll let you know what they say...
Do the checkout events show up in the GA4 debugger?
@@alessandrocolarossi2806 thank you.. nope GA4 debugger has 0 events at all.. while rechecking the console i see events coming up until the 'begin checkout', then when the page turns into /checkout/ nothing at all is coming up.. I see a lot of third party cookies blocked but cannot go in detail even if i think it's not that as Shopify custom pixel shouldn't be considered as 3rd party. And apart from that, I triple checked the cookie consents and ALL types are granted - thanks
Again thank you for the video ....I just want to bring to your attention that the add to cart event is not getting the item data, in the debug view ...the add to cart does not show the item info...however on all the other events its there
Fixed it. Thanks for reporting, here's how to fix:
drive.google.com/file/d/1ewRRiKo3eR1P5RYZHrMy3rmaWDgmo05m/view?usp=drivesdk
Yep, double checked. That did it. drive.google.com/file/d/1V86ECj6VjW-pfuXSLoKtIjXwbOasAhA3/view?usp=drivesdk
@@Alessandro-Colarossi That drive file is private. Also I was able to fix it by changing the trigger event to add-to-cart, not the ga4 event name as you shared in the screenshot
The trigger event was not the issue. The issue was that you can only push items with the events that GA4 enhanced e-commerce expects. add_to_cart is what it expects not what I had before
I made the drive link accessible.
I have a question, i've made this tracking, it worked awesome for other events excepting purchase. For purchase, i had just one conversions in Google Ads but no value. Should i upload the rest of the code of "Tag Manager" on the Shopify > Settings > Checkout ?
Works fine for Purchase. You can use my tag manager container if you're unsure. You don't need to use the check out additional scripts - the whole point of this is that it bypasses that.
@@Alessandro-Colarossi I've checked again the label of Google Ads and fixed it. I think it will work. Thanks for the help Alessandro
@@cxsmvncc3945 No prob!
Thank you very much for the video. I have the problem that GTM tells me in preview mode, that there is no tag found.
When i check the Chrome DevTool on my Shop and search in Network for "gtm.js", it says Status 204 (no Content).
So the Tag is there, but deosn't do anything?
Likely you need to publish the container. Did you follow the video ?
I published it. I also double checked everything. Still not working 🤔
it does not work by me also. I have done it 10 times step by step. it is just firing a few event that is it. Purchase event does work.
@@onpamarketing @ramonfrechen we found an issue with line 16 of the pixel code where it was specifying a url string that didn't match a regular expression in our checkout url. if you are seeing no events firing during checkout i would start there and look to modify that line in the pixel. worked fine after updating that
I'm using Google Analytics purchase event as the conversion. In that case, I don't have a Google Ads purchase event. Do I need to add two purchase events, one for Google Analytics and one for Google Ads? How to set up Google Ads purchase event? Thanks.
You can do either. You can import the Google analytics purchace event to Google ads. Or, you can create a conversion action in Google ads to use as your purchase conversion - this can be implemented in the templated GTM container i provide here.
@@Alessandro-Colarossi But I can't find the conversion ID and label with the new UI now. I don't see the Use Google Tag Manager option either.
Hi there.. Great video. However when I import the container, I only end up with 4 tags (Conversion linker, GA4 - All Pages, GA4 - Enhanced Ecom Tracking, Google Ads).. Am I missing something? Your tutorial shows all of these other listings (eg. GA4 - Add to cart, GA4 - Begin checkout.. etc..). Hmm. Any help? Thanks :)
Make sure you import the container I've provided using the way showed in the video.
See here for full instructions: triangledigital.xyz/shopify-datalayer-gtm-install
Alessandro, i have installed with the same settings on another Shopify store but it is not triggering the tag on the purchase page and the purchase event, can you help me a lil bit, please ?
Shoot me an email about it we can chat about it:
me@alessandrocolarossi.com
@@Alessandro-Colarossi Done, thanks a lot
Hi Alessandro, how can i fix this issue for firing the add to cart event to google ads account?
Type: Google Ads Conversion Tracking
Firing Status: Still running
What issue? Please elaborate. I don't understand the problem.
@@Alessandro-Colarossi Hi, i have sent it to your email, because im unable to attach the reference images of the issue here.
email subject: Type google ads conversion tracking is still running
I use Cookiebot so in Customer events I chose Customer privacy - Permission - Not required and in Data sale - Data collected does not qualify as data sale. I think I have to set this up only in Cookiebot, right?
I'll do a video on consent mode and cookie bot soon. Stay subscribed.
@@Alessandro-Colarossi Hi, I am trying to make it work, but it is still firing GA4 cookies before consent. Do not you know what to do about that?
How much would cost a solution?
@@peXtrrr send me an email - me@alessandrocolarossi.com
Thanks for the video Alessandro. Would it be possible to remove prefix from the tracking. The event name are a bit confusing for my client. Could you please remove the event_prefix. Thanks in advance
This is a stamp of my agency that I include in the events. You can remove the mention of it in the code if you like or I can do it for you if you book support at the bottom of this link:
triangledigital.xyz/shopify-datalayer-gtm-install
@@Alessandro-Colarossi thanks for the swift reply. What is your hourly rate?
Shoot me an email here: me@alessandrocolarossi.com
May God Bless You
Thanks - glad this was helpful
Sir i applied the code that in the snippet and also include render with filename in theme.liquid but when i opened my website page it is showing the same code on the home page of my website that i added in snippet but all the tags were added in tag manager when i executed the code
Sir Plz Reply I am unable to find the solution
Blocked script execution in '' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Is the code is free or paid?
This one is free. PRO version is paid.