How to track Shopify 'Add To Cart' clicks with Google Analytics and Google Tag Manager
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- Learn how to track Shopify 'Add To Cart' clicks with Google Analytics and Google Tag Manager. Walk-through the steps you need to configure Google Tag Manager (including the tag, trigger, and variable you'll need to use). Plus, get the code to automatically send product information through to your Google Analytics reports.
JUMP TO A TOPIC:
0:00 Introduction
1:13 Check Google Tag Manager
2:06 Considerations for Shopify
3:11 'Add To Cart' button tracking code
3:59 Modify the 'Add To Cart' button
5:30 Configure Google Tag Manager
8:08 Test the 'Add To Cart' button tracking
9:44 Conclusion
YOUR RESOURCES:
○ Get the code for the 'Add To Cart' button - www.lovesdata.com/blog/shopif...
○ Get the pre-configured GTM container - lovesdata.co/v8v9w4
MORE RESOURCES FOR YOU:
○ Google Tag Manager tutorials - • Google Tag Manager Tut...
○ Google Tag Manager Course (paid) - www.lovesdata.com/courses/goo...
○ Getting started with Google Analytics 4 (GA4) - • Google Analytics 4 Tut...
○ GA4 Complete Course (paid) - www.lovesdata.com/courses/goo...
○ GA4 Mini-Course (paid) - www.lovesdata.com/courses/goo...
My email updates: www.lovesdata.com/email-newsl...
My courses: www.lovesdata.com/courses
My book: amzn.to/2FTQ8SX
SAY HELLO!
○ My blog - www.lovesdata.com/blog-welcome
○ Contact me - www.lovesdata.com/contact-us
TOOLS I USE AND RECOMMEND:
○ Email platform - lovesdata.co/zrLd7
○ Course platform - lovesdata.co/2Zzfq
○ Data connector - lovesdata.co/oOWkI
Subscribe for more videos: th-cam.com/users/subscription_c...
![[TH] VCT Masters Shanghai Playoffs DAY 2 // PRX vs G2 | EDG vs TH](http://i.ytimg.com/vi/T5j2XVcDFs0/mqdefault.jpg)
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 57 [ซับไทย]](http://i.ytimg.com/vi/pNhft3YZFRE/mqdefault.jpg)
👉 Watch my video covering a new, easier way to track Shopify ecommerce events into Google Analytics: th-cam.com/video/keugNQCVREI/w-d-xo.html
Thank you for the detailed video. Is there an issue with sending the dataLayer push through a GTM trigger instead of hardcoding the onclick event into theme files?
Thanks so much Benjamin! You are jewel! I have been a fan for a few years now! My undying regards!
Your videos are so great and helped me a lot.
Thank you Ben. As always you provide so much value ! You're amazing !
Super helpful - thank you!
Very useful. Thanks, mate.
Great video. Very clear explanation of how to get Shopify Add to Cart data into GTM and GA4. Now that my Add to Cart data is reaching GA4, I am not sure how to use it, or even how to view the data (aside from seeing it in debug view).
Do you have a video on how to make use of this Shopify Add to Cart data (or Shopify purchase data from your other video ) in GA4?
It worked! Thank you very much for the information
Great video to cover off on how to do this correctly. Thank you. There is a new option for 'send ecommerce data' in the GTM tag. What happens if that box IS or IS NOT checked?
Hi, Had you made the Event Add to cart already when you show the preview in first go ( at 5:23) because while I paste the code in Product page template , it doesn't show as Add to Cart but just Click. And as far as value is Concern , its already showing Values even without pasting the Add to Cart Data layer Code (provided by you) , I have setup View Item Event, does it show data from there?
Hi, ben I am not able to find the product. template. liquid in section folder, i found in snippet folder (But not able to find add-to-cart in product-template.liquid file) Where it can be ?
Yes,i got same question,maybe it is the third-part theme
I solved it. Found this button in other files than mentioned in the video. Go to the edit code and search for "products" there. The file you need to edit is likely called something with this. In my templates one file was called products.form.liquid and in the other main-product.liquid. The button also had another class than add-to-cart,. So my advice is to identify your button class first, then search for that name in multiple files named something with "products". The rest of the button code should look somewhat similar to this in the video. Mine was quite different.
I also managed to put the onclick code on the div containing both add to cart and quick buy option. This way both clicks are tracked as add to cart.
@@treffsikkerNO yep, you r right. in my case file name was main-product.liquid and button name was "product-form__submit".
@@treffsikkerNO You added code in both files i.e. products.form.liquid and main-product.liquid ? Is it working fine? Are both of these under SECTIONS or One in SECTIONS and another in SNIPPETS ?
I have Canopy Thee and I can see three files with a button including add_to_cart. 2 files are in SECTIONS main-product.liquid and featured-product.liquid and one file is in SNIPPETS product-block.liquid. Not sure what to do, shall i add in all three or only in the one in SNIPPETS.
Great stuff!
Appreciated for content. For my google tag, variables, data layers works but for GA4; it is fired but not showing items values and details, it is written "shopify add to cart". What may causing this issue.
Thank you for the video!
After I followed all the instructions in setting this up, in the debug mode I'm seeing that the add_cart_cart event is getting triggered twice. Could you guide me on how to fix it?
There are two separate API calls for each of the two times the event is recorded, but the event & the tag is the same.
these are the two different calls,
1) ecommerce
2) eventModel
Thank you so much !!!!!
Thank you you are the best
It works thank you :) Can you make video for Puchase, Prices and other for eCommerce tracking
Thank you Benjamin, very good tutorial? do you have the same in stock for woocommerce? :p
Hi Benjamin, if I used GTM to install GA4 but used the Shopify GA integration to install UA... will that lead to duplicate data?
Very educational video. Thank you. Do you have a video on how to do this using the Woo Commerce Plugin on word-press website?
Hi Ben, I am not seeing the event in GA4.. It works perfectly in GTM, but does not appear in GA4. Can you PLS advise
Hey, great video. I'm using the Dawn Theme and sadly there is no product-template-liquid file, wich one should I use? Would be nice to have feedback. Thank u
any help on that one? I cannot find that liquid file too.
@@redcapmarketing same here
I am not seeing the event in GA4.. It works perfectly in GTM, but not apprearing in GA4.
Thanks Benjamin.
But my websites have varantions. So variantions selected or not selected event always firing. So it is wrong method. Only in really add to cart ations must fire this event yes?
You said that adding GTM can cause duplicate pageviews in GA4 if the native integration between Shopify and GA4 is set up. I do not understand how is this possible?
Thanks for the detailed video.
Quick Question: Why we are doing all this using hard way, when we can simply track URL(/cart) as Event at our GTM account & then send it to our Google Analytics GA4 account. Need clarification on this please.
To get the item name, price, ID, etc and pass it correctly into the ecommerce reports.
@@LovesData Got it, thanks for your quick reply.
Thanks, your code worked on my website. Can you give a guideline how on to implement view_item_list datalayer in Shopify?
Gracias! Impecable
You're very welcome. I'm glad you liked it!
Thanks for the great tutorial.
I have set up the system based on the video and indeed I am now able to get the data for adding carts.
However, for some reason, the cart adds are being measured twice.
There seems to be nothing wrong with the settings, but I could not figure out why it was happening.
I checked and found that I had an app called Feed for Google shopping and the add to cart event was firing there as well.
I modified some of the code and the double firing is gone.
My apologies.
Hi Benjamin, thanks for your amazing content. I have a question though : when my DataLayer is pushed, some of my parameters that should be number type (like price of the product) are send in string type. I see that you face the same issue on this case, like in the DebugView, the price of the item is 250000000 which means that he isn't converted properly. Is there a settings on GA to solve this issue ?
I've tried to create custom Javascript Variable on GTM but didn't succeed...
Thank you again for all your content !
The strange value for price is just what appears in the DebugView, in the actual reports it's presented as $25.00
thanks
Hi :o) Great video. one thing I'd say is it would be a good idea to add code to check for a "_tracking_consent" cookie. Cheers. Dan.
Perfect 💞
Thanks! I’m glad you like it!
great video, doesn't work for me though. added the gtm code, added the product-template code-'add_to_cart' event never shows up on ADD TO CART click. maybe this is outdated now?
I don't have a product-template.liquid in by Dawn 10.0 Theme. Any odea?
if im seeing 50 add to carts and 110 purchases what does this mean?
and for to track the quantity added?
Hi All, Great Video! Everything makes sense up until configure google tag manager! I can't see the configuration tag 'Google Analytics | GA4' . The tags I have currently is purchase, add to cart and page view. I can't see 'Google Analytics | GA4'. Can someone please guide me :) Thank you kindly.
Thanks! You just need to make sure you have a GA4 configuration tag in your container. I recommend watching my Google Analytics tutorial for a full run through: th-cam.com/video/Xzvn_kBmIRw/w-d-xo.html
Thanks Ben ❤️ Love your work. Will do!
Anything on how to track conversions if the form is in iFrame (Pardot) and it doesn't redirect to the new page?
Not at this stage. I try to avoid s whenever possible. I will add your suggestion to my list of requested topics though.
@@LovesData Thank you for the quick update. When working with pardot, we do want to have users on the website rather than sending them to other pages. I'm really looking forward for the video.
@@udaykiranippala I have to warn you, my list of requests is quite long 🥲
@@LovesData I understand the reason why. Great work from your end.
Can I keep tracking All the Events like- Page view, Add to Cart, Checkout, Purchase, Product view, Product Price, Product Name etc with the same code?
I really appreciate you, if you made a video in these topics
I've written the code to be used on the Add To Cart, so you might be able to reuse some of the elements, but that might be a topic for a future video. There are differences in the liquid markup to consider - for example, dynamic values won't work on the purchase page.
@@ranazubair8155 I'll add it to my list!
So I've been through the steps here, and the purchases are coming through into GA4 okay, but for some reason, most of them have the revenue amount set to £0 - so it's not pulling in the sale amount into GA4 for some reason? Can someone help with this. It looks like it's a really common problem as when I Googled it, I saw that loads of people have the same issue. Anyone know how to solve this problem?
You can find ecommerce troubleshooting tips here: www.lovesdata.com/blog/troubleshooting-google-analytics-ecommerce
where do you find the tag manager lol
holy... this is so complicated...........
Hello, what does it mean if I don't have a product-template.liquid section?
Thanks, Ben! you're my go-to person for all things GA4. Unfortunately, my Shopify theme doesn't have "product.template.liquid" folder :(
I'd contact whoever created the theme and ask them where (and how) the add to cart button is included in the theme files.
You can add a listener for the add to cart button in the theme.liquid file. And execute the code that the author gave when clicking. This is not difficult. I would post an example, but TH-cam immediately removes comments with code. Maybe you also need to handle the button plus or minus the product. Or maybe not.
I'm using the global google tag. Would something like this send the event, or do I need something extra?
It works with PHP too, and most probably with any programming language:
onclick="dataLayer.push({ 'ecommerce': null });dataLayer.push({
'event': 'add_to_cart',
'ecommerce': {
'items': [{
'item_id': '{{ $product->id }}',
'item_name': '{{ $product->name }}'
}]
}
});"
Update $product->id with your id & name
Absolutely! The data layer isn’t platform-specific. Great tip. Thanks for sharing!