Version 3.2: Shopify Customer Events for GA4, Enhanced Conversions & Google Ads Conversion Tracking
Vložit
- čas přidán 6. 06. 2024
- 🔹 Buy Now:
triangledigtalstore.myshopify...
IT'S ALIVE! In my view, this is the best and most robust way to do this-and probably how Shopify intended. You don't have to mess with the theme files at all. Just add the code to the customer events area, fill in the placeholders, and you're done.
Changes made on 2024-06-09
Version 3.2
- Added detection to see if events have fired more than once
- Fixed some styles in the console
- Added timing to events that fired
- Adjusted the position of the GTM ID for people to add their own
- Added a ton of comments at the top with some instructions too
- Removed all the GA4 events; now the container is just using the regular events. I noticed the GA4 remapped events with the e-commerce data were taking longer to load than the regular ones. I consolidated the events.
- Renamed the events in GTM
If you install this version (3.2), ensure you replace the customer events code, save, disconnect, reconnect, and reimport your GTM container.
📝 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! - Věda a technologie
Some house keeping is required for those who followed the older versions of your code: Remove the DataLayer snippet and the GTM doe from theme file. Right?
The code you shared on Google drive is less than 509 lines of code. Is this the latest version?
Correct. Remove the old snippet and old reference to GTM in the theme.liquid. This one is easy, just add the snippet and use the new gtm container. And yes, I removed some unnecessary parts. If you downloaded it before this afternoon EST, download it again. Thanks for the comment!
@@Alessandro-Colarossi Thanks for the quick response. I am trying to see the events on chrome console but nothing is showing. Is there a specific setup in Console that allows me to see the events. This solution is similar to the one that was provied by Feedarmy Unfortunately, it clutters the urls on GA by adding long codes at the end. I removed the code and these additional codes that were attached to the urls in GA reports were gone.
@@zwayny I'm not familiar with the FeedArmy solution. This one should show the events in the console right away.
As you said, you might have to do some cleanup first. Make sure GTM is not implemented anywhere and that you are not using the Google/CZcams app for GA4 and conversion tracking. Also, remove the snippet code from my previous versions. All that is required for this is to implemenbt it in the Customer Events area like I showed in my video, it should work without doing anything else - make sure it's saved and connected.
The GTM container I provided should also be useful to fire all of your GA4 events and your Google Ads conversion tracking.
@@zwayny You can use "dataLayer checker plus" chrome extension to see the dataLayer enabled through custom pixel without going to console.
I used Alessandro’s customer events tags and they work great. We had a video chat to check everything and he helped me correct a few things that I had setup wrong. Awesome stuff!
Thanks for sharing!!
Love the intro haha entertaining and informative!
WOW! Gigantic big thanks!
Thanks for the walkthrough! It was super helpful!
No problem!
Thankyou! Thia is super helpful, all events are firing. Did you notice the default user_engagement event missing in GA4? It is not firing for me.
No idea, I will have to see what you see. This code and various versions of it to fit different shopify themes and sires are available for purchase on my website - triangledigital.xyz, also comes with an hour of support with me.
Hi Alessandro, thanks for this amazing content! Where we can find your code?
Thanks so much! You can find it here: triangledigital.xyz - I just added consent mode to it too, you get that as well.
Hi Alessandro, quick question. I watched your other video and installed the gtag pixel in customer events in Shopify. It's tracking conversions perfectly on my Google campaigns. Thank You!
Now I need to get something similar going for Microsoft Ads. You had mentioned using the code in this video to do that for not only MS Ads, but also Google, Tik Tok and more. Are the directions on this code clear how to work with Microsoft and each platform? In other words, what information is needed from Microsoft Ads and each platform to make the pixel work?
Reason for asking is that I'm a very simple user. If all I had was conversion tracking for Google (which I have with your gtag code) and something similar for MS Ads, I would be satisfied. I'm not a big GA4 user. With that said, I'm not against installing the pixel talked about in this video if it will do everything I need it to do. Thanks for everything you do!
I'm working on an all encompassing GTM container. Stay tuned.
Hey there, here is the version with other platforms: czcams.com/video/3mzjWrCq7U8/video.htmlsi=9jz1hBJYJX1B_qzJ
Thanks!
Hey Alessandro. Followed the steps and everything seems to working great thanks for the detailed setup instructions. I'm experiencing issues with enhanced conversions in Google Ads though. Received this notification: "Some of your enhanced conversions weren't processed because no CSS selector or Javascript variable for user-provided data was found, or you didn't provide user-provided data during setup." Any suggestions on how to resolve this?
Should all be working fine. I don't know what the issue could be ... How long has it been implemented with conversions coming in? You need to have enough matches. If you see the em parameter like I show in the videos everything is fine. If you purchase the code at triangledigital.xyz I can provide support. Thanks!
Would have been nice to teach us how to do the conversion in the code, at least a small part, like the Shopify video tutorial does instead of just trying to sell us the entire custom script.
I did that with the gTag code that I'm giving away in my other videos. This is free and includes GA4, enhanced ecommerce, enhanced conversions, and conversion tracking. It's much less code than what's in this video. Part of the reason I don't teach the whole code creation is that it's very complex, and many people will ask questions and say it doesn't work for them - this is what happened when I initially offered it for free. The code in this video, for what it offers, is very affordable and comes with a 30-minute meeting with me, where you can ask questions and I can help with implementation. I will make a video about how to change the gTag and GA4 code to match what the customer events expect at a basic level. Thanks for the suggestion!
@Alessandro-Colarossi tried clicking the Google Form for file used and received message:"The form Download the Shopify Datalayer and Container is no longer accepting responses.
Try contacting the owner of the form if you think this is a mistake." Is this still available? P.S. massive thanks for the video, loved the intro especially 😆
Awesome! Great to hear you liked the video. The code is now out of beta so it's paid and comes with support. Available to purchase at the link provided.
Hi, thanks for sharing
A question, How do you do enhanced conversion and dynamic remarketing without data layer?
You can scrape the DOM to do it. And use a custom JavaScript variable in GTM to echo it where you need to in the GTM tag.
I've got a chrome extension that will help with this:
chromewebstore.google.com/detail/gtm-variable-builder/feeboihdgpananoagfmbohoogoncndba
Great video,Alessandro! I’ve a question - Can we use google Ads for print on demand stores? I have read mixed reviews like google doesn’t support print on demand business as POD stores don’t store stock but google is ok if we offer variants so would appreciate your thoughts on this.I have print on demand store on Shopify wherein I sell giftable jewelry that comes in a box with a meaningful message card and each of my products has at least 2 variants per listing.
This code version 3.1 handles variants so you should be ok.
First of all big respect Alessandro, I will tip for sure after proper testings ;)
One question, do I understand correctly that no external dataLayer pushes will now trigger GTM which is installed via SandBox?
I am asking because I see you use standard event namings inside GTM like "purchase" it can't be triggered from outside right?
So, it's not that it can't be triggered-it can. It's that it can't be tested using the GTM debugger or by looking at the dataLayer in the console, which is why I'm pushing the output via console.log to the console so you can test things easily. You can purchase this code and a version I made with all ad platforms in one package at triangledigital.xyz.
@@Alessandro-Colarossi Thanks for your respond, I am referreing to Shopify article
I understand that GTM will not react on old dataLayer.push method made for example from theme code anymore. Here is the full quote-
"If you've previously set up Google Tag Manager, then you need to replace your dataLayer.push calls with Shopify.analytics.publish()calls. You can find your dataLayer.push calls in your theme.liquid files, in the Layout section of your theme editor.
You also need to replace the dataLayer.push calls in the checkout.liquid. However, because checkout.liquidisn't compatible with checkout extensibility, you need to use a UI extension to push data to web pixels."
Hi Alessandro great video. Are you able to provide product-level sales data to get cart conversions reporting in Google Ads? From the video it looks like just enhanced conversion data is switched on and not new customer data or product-level sales data.
Also with most of our clients we are either using Cookiebot or pandectes for consent mode v2. Will this have an impact on the tags is there any addtional configuration required? Thanks
Do you mean this? support.google.com/google-ads/answer/9028254?hl=en
@@Alessandro-Colarossi This would be a helpful addition. I believe the only additional variable we would need to enable this is total discount from Shopify in GTM.
@@moonshinedigital Discount is present in this code in the ecommerce items array - both in the basic and pro version here: triangledigital.xyz
Happy to help support as well. Cheers!
@@Alessandro-Colarossi Hi Yes apologies for the late reply but yes that is what I mean
Awesome!! I’d like to add another important event like sign_in and new user registers. How can I do this?
I'm not passing new user registers but for users who have logged in I'm passing:
customerData() {
const currentUser = {};
{% if customer %}
currentUser.id = {{ customer.id }};
currentUser.first_name = "{{ customer.first_name }}";
currentUser.last_name = "{{ customer.last_name }}";
currentUser.full_name = "{{ customer.name }}";
currentUser.email = "{{ customer.email }}";
currentUser.phone = "{{ customer.default_address.phone }}";
{% if customer.default_address %}
currentUser.address = {
address_summary: "{{ customer.default_address.summary }}",
address1: "{{ customer.default_address.address1 }}",
address2: "{{ customer.default_address.address2 }}",
city: "{{ customer.default_address.city }}",
street: "{{ customer.default_address.street }}",
zip: "{{ customer.default_address.zip }}",
company: "{{ customer.default_address.company }}",
country: "{{ customer.default_address.country.name }}",
countryCode: "{{ customer.default_address.country_code }}",
province: "{{ customer.default_address.province }}"
};
{% endif %}
{% endif %}
Thank you for the update, Ive published this new version in shopify and version 2 was removed. I've done all the debugging and in the console.log, the events are showing. However, when checking the network, none of the events are showing. Only page_view and scroll are being tracked, and no purchase (checkout) 😢. Honestly dont know what happened there.
FIlter for collect. Seems fine on my end.
drive.google.com/file/d/1lP6ycYyHBGPWm1l8tXapyEwjNCSkqTA3/view?usp=sharing
@@Alessandro-Colarossi Cheers, everything was working as it should. The channel has two GA4 properties, one of which is not active. For some reason, the data is coming into the inactive property, even though the GTM gtag ID is connected to the new GA4.
checkout_shipping_info_submitted, and payment_info_submitted data events don't arrive to GTM and GA4. But Custom Pixel implementation and Web Pixel Helper work correctly. But only checkout_started and checkout_completed send data correctly.
Can anyone help me?
Happy to help you with this. send me an email: me@alessandrocolarossi.com
@Alessandro-Colarossi
How to see the dataLayer that is enabled through custom pixel? Because GTM preview don't work.
Gtm preview doesn't work with customer events. You'll have to just look at the debugger I made with the console output. In chrome, right click on a page, click inspect, then click console.
@@Alessandro-Colarossi You can use the "dataLayer Checker Plus" chrome extension to see the dataLayer without going to the console.
@Alessandro-Colarossi You can use dataLayer checker plus chrome extension to see the dataLayer without going to the console.
@@RahiMasumReja mine has more features than DataLayer Checker Plus.
Mine shows load times and a check as to whether the event fired multiple times.
Try the latest version of my customer pixel code if you haven't seen these features.
Should we use version 3 from link you provided?
Which ever works best for you honestly. I have a feeling v3 will. Give it a try. No harm.
@@Alessandro-Colarossi version is best?
V3 is the best. It does less, but it's more reliable and you can do what it can't do with GTM.
This version does not include dynamic remarketing, does it?
v3 now includes dynamic remarketing. Just updated everything now. Hope you find it useful.
@@Alessandro-Colarossi But how does it send the customer id? It doesnt seem like it does in the remarketing tag, or am I missing something?
@@jonashjjuhl7198 why do you need customer id for remarketing?
@@Alessandro-Colarossi You can't run dynamic remarketing with products without id, can you? Might have misunderstood something
@@jonashjjuhl7198 product id is required not client id. No worries - redownload v3.2 and install the GTM container - dynamic remarketing is all set up and working. All you need to do is add your conversion id to the tag in GTM from Google ads, then of course set up your campaign.
The customer events work perfectly for standard Shopify website. I have a client that uses headless Shopify, do you know how to implement customer events for them? Is it even possible?
At this time I don't know anything about headless Shopify - if anything changes I'll make a video about it.
@@Alessandro-Colarossi Thanks! I have other tags for one of my clients that stopped working once I implemented customer events. Stuff like forms, clicks, scroll, etc. Is that expected?
@@conventionalischeating If you merged my GTM container with yours then there shouldn't be an issue. If you've overwritten your container with mine then you might have overwritten your orginal triggers.
It is great but not compatible with Cookiebot and consent mode v2
In what way - can youi elaborate? Should be able to use the cookiebot integration with Shopify and GTM to get this off the ground and running. I can make a video on this in the future.
@@Alessandro-Colarossi It is sending Unassigned default channel group (half of sessions), it is the 2nd version
Hi, so I am trying to implement it on my testing shopify (this 3.2 version) and using Pandectes instead of Cookiebot. When cookies are denied, then everything is okay, there is no gcs parameter missing and events are not collected twice. However when I click accept, I can see events fired twice (GA4 pageview event for example is fired twice and one is with gcs parameter G111 - as it should be, but the another one is the same but without gcs parameter at all. When trying from the US with VPN then also 2 pageviews are fired one with G111 and the other one without gcs parameter at all (before interacting with the cookie bar).
Maybe I should add
"//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'denied',
'analytics_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
});"
inside Customer events code but then it is applied worldwide 😞
Happy to look into this for you. Please purchase here: triangledigital.xyz
A bit ridiculous that Shopify's code isn't compatible with Enhanced Ecommerce - you would think shopify would build it out around Google
Agreed. Their Google and CZcams app doesn't do it by default. My code does it -- available here: triangledigital.xyz
@@Alessandro-Colarossi I also gave up on the Google App integration - very underwhelming given the hype. GTM all the way with shopify.
Cool Video, Curious if you fixed the page_url issue, when an event fires from the customer event it has a weird @sandbox/secured/ something in the URL.
Thanks - not sure what you mean. Happy to chat about it though. Triangledigital.xyz meeting button up top. Friday is best.
@@Alessandro-Colarossi in GA4 in a lot of page URLs there is/sandbox that is what he meant I guess
@@peXtrrr in what report?
@@Alessandro-Colarossi Engagement - Pages and screen - Page path and screen class dimension
Turning off automatically collected events in GA4 will take care of this. It seems to be pushing ugly sandboxed urls from Shopify. See the link below for how to turn it off. If my code is pushing page view that should be enough to achieve the same thing with out the ugly urls.
wpfullpicture.com/support/documentation/how-to-turn-off-automatic-tracking-in-google-analytics-4-enchanced-measurement/