If you’re interested in conversion optimization and improving your ecommerce websites (and you should be!) it’s really important to track when a potential customer is adding an item to the cart. Having such information you can segment visitors to people who are adding stuff to the cart but not checking out, or people who are viewing products but not adding them to the cart.
A few 3rd party shopping cart providers offer this feature out of the box, but the majority don’t. Usually you can look at the Behavior – Site Content – All Pages report and look for the /cart page, but you wouldn’t know if the generated pageviews are from people clicking the Add to Cart button on a product page or clicking the cart icon to review their cart.
Working with developers, sending instructions with onclick events to be implemented, waiting for a sprint or two, and finally be able to test and collect data is sometimes long and tedious process.
Luckily, Google Tag Manager is here to help. All you need to have is GTM container snippet added to every page of your site.
Important: most probably you’re already using GTM V2 where the interface is a bit different, go to new instructions.
1. Click Listener
First, we need to create a Click Listener tag in GTM:
1. Click New – Tag
2. Tag Name: Click Listener
3. Tag Type: Event Listener – Click Listener (be careful, there’s also a Link Click Listener, which is different)
4. Firing Rules: All Pages
5. Save
2. Identify the Add to Cart event
Now we need to identify our Add to Cart button. For our example we’ll show Magento:
Navigate to a product page and locate the Add to Cart button. Right-click on it and select Inspect element in Chrome. The Developer Tools window will open and show us details about the button. We’re interested in the CSS class of this HTML element – in our case the CSS class is “button btn-cart”. We copy it and go to GTM again.
Now we need to create a rule – only when a visitor clicks the HTML element with class “button btn-cart” we want to record an event in GA.
1. Click New – Rule
2. Rule Name: Add to Cart
3. {{event}} equals gtm.click
4. Click the + sign to add one more condition
5. {{element class}} equals button btn-cart
6. Save
Please note that you may have class or id for your shopping cart system (WooCommerce, Magento, OpenCart, PrestaShop, Shopify, BigCommerce, etc.) Just follow the steps above to see how it’s called.
3. Record the event in GA
All we have left is to create the GA tag which will record our Add to Cart event.
1. Click New – Tag
2. Tag Name: UA Add to Cart (UA here stands for Universal Analytics)
3. Tag Type: Analytics – Universal Analytics
4. Firing Rules: Add to Cart (the rule we just created)
5. Tracking ID: paste here your GA tracking ID (you can get it from GA under Admin – Property – Tracking Info – Tracking Code and it’s in the format UA-XXXXXX-Y)
6. Check Enable Display Advertising Features if your tracking code is modified to support Demographics and Interests reports and Remarketing through Google Analytics.
7. Track Type – Event
Choose how you want to name your category, action and label, for example:
Category: Add to Cart
Action: click
Label {{url}}
For example I want to record as a label the product page where the visitor clicked the button, that’s why selecting the macro {{url}}.
8. Save
4. Test and publish your GTM version.
5. Check the results in GA.
Open your site, navigate to a product page and click the Add to Cart button. Go in GA to Real-Time – Events report and check if your event is recorded properly.
So now you track when people are adding products to the cart. In a similar way you can track many other activities: remove from cart, add to wishlist, form fields abandonment, video interaction (play, stop, watch to end), usage of tabs on product page like product description, shipping, returns, reviews, etc.
*** Update: Here are the steps for the new interface V2 of GTM:
1. There’s no need to create a click listener as it’s already built-in. Assuming your CSS class is the same “button btn-cart” let’s see if the Click Classes variable is enabled. Go to Variables in the left pane and make sure Click Classes is checked.
2. Now let’s create the trigger. Select Triggers – New, give it a name, e.g. Add to cart, and select Click for event, All elements for Configure trigger, and in the Fire on section Click Classes equals button btn-cart, like below:
3. Now we need to create the tag. Select Tags – New, give it a name, product Google Analytics – Universal Analytics, enter your tracking ID or constant variable, track type Event. Choose how you want to name your category, action and label, for example:
Category: Add to Cart
Action: click
Label {{Page URL}}
For example I want to record as a label the product page where the visitor clicked the button, that’s why selecting the macro {{Page URL}}.
Hit Save, preview and debug your GTM version and if everything looks OK, publish.
If you have questions or difficulties configuring the tracking, drop me a comment below.
P.S. Got a Google Analytics question? Send it to me and I’ll try to answer it on the blog.
Thanks Margarita! This is exactly what I’ve been looking for.
Hey Josh, I’m glad you found it useful 🙂
Finally a working example! Bookmarked this page so i can recommend it to my colleagues… THX
Great to hear that, cheers!
Hi ,
Which tool are you using to make the screenshots ?
thanks
Hi, it’s Lightshot.
I’ve been trying to find out the ways to track Add to Cart event .I was just wondering how google Analytics identify this .Finally I think I got a loop hole.Will be thankful to get more details regarding google analytics tracking ..
Hi Vinu, what are you trying to do? Can you provide more details what you’ve tried?
Hello Thanks for this
I am trying to apply this and add a add to cart tag
but nothing seem to work as it is explained here
has it been updated
Please help
Hi Yasmina,
Send me the URL of your website and a screenshot of your GTM tag settings so I can check it: margarita (dot) evtimova (at) gmail (dot) com
Damn this article is so simple. I was looking for this awell. Thanks Margarita 😀
When i go into Tag Manager, it looks entirely different to that shown here. I guess Google has updated the UI. However, I can’t get this technique to work, so I must something set up wrong with the new UI.
Hey David, you’re right – GTM updated their interface with V2. I added an update at the bottom for the new GTM.
You are the best thanks alot, just one more quiestion: when i make the preview and debug in the site, its just fires 1time even if i add many items to the cart, ist posible to count every product added? its to have more conversion data for my adwords campaign thanks.
In the fire On place what we put?
Hey Daniel, the event should fire every time when you click the Add to cart button. And in Fire on you need to specify its CSS class. Can you share your website?
Hi,
I tried your method using V2 version of gtm. When I open the page then it fires this tag but it is not recordable in GA.
What am I missing?
Hi Ashish, can you share the page you have this working?
Okay, so I can see the clicks in the real time section but are they saved somewhere so I can see a monthly stats?
Hey Joseph, all your events are recorded in Behavior – Events – Top Events report.
Thank you very much! This was very helpful and your instructions were very precise 🙂
Very interesting article! Tracking add-to-card clicks is very important for eCommerce business. Here, in Mobilunity we thought that it would be great to have infographics about this topic. I hope it will be interesting to everyone, who is in search of more information.
You can find it here: http://mobilunity.com/blog/how-to-track-add-to-cart-clicks-in-google-analytics/
Hey Margarita,
Thanks for the help. Having problems though. Done as you have instructed and tag isn’t firing. Have pasted links to pics to aid you.
Trigger Screenshot:
https://www.dropbox.com/s/tzfybomimrop2fn/Screen%20Shot%202015-11-13%20at%201.38.25%20PM.png?dl=0
Tag Screenshot:
https://www.dropbox.com/s/d7dbczd1fbxm50d/Screen%20Shot%202015-11-13%20at%201.38.43%20PM.png?dl=0
CSS Class Screenshot:
https://www.dropbox.com/s/cgg3xd5mind8suq/Screen%20Shot%202015-11-13%20at%201.39.02%20PM.png?dl=0
Thank You!!
Hi Corby,
Can you try Click ID equals AddToCart instead of using click class? If this is not working please enter GTM debug mode and send me the link (there’s a share option in the orange box saying you’re previewing the version) to test it on my end.
Hope this helps!
Hi Margarita,
Tried with your suggested change. GTM says still not firing.
Here is the link you requested:
https://www.googletagmanager.com/set_cookie?uiv2&id=GTM-KZM4Q7>m_auth=vxKOTXWaJCGzoEBB-0cCJg>m_preview=QUICK_PREVIEW>m_debug=x
Thank you so much!
Corby
For pestashop, a module exist to do that directly from back office without any code knowledge http://www.telecharger-plugins.fr/en/analytics/18-ga-event-creator-prestashop.html
Hi Margarita,
I am having problems in creating a new tag in GTM I could not find the options that you mentioned here for creating a new tag. pls help
Hi Rameez,
Which options? Can you send a screenshot what’s missing on your end?
Hi there, Margarita! 🙂
I write you cos your post resulted very clear and simple for me, but the case is that I cannot get the response from Google Analytics and I don’t know the reason. I visited another post that was almost exactly the same as yours, but with no solution :(. I really need this for my client but I cannot get why it’s resulting so complicated to me to have it done.
I’ll really appreciate your response. Greetings!
Hi Bruno, what website do you want to track the events on?
We are enhancing a bunch of issues of the client website, working on our local server to then mergin both with the changes. For example, the ecommerce issue is working fine, since I make fake purchases on our version that are detailed on Google Analytics. So, it seems really weird to me that this event capture is not firing. Even more, when I debug Tag Manager, it shows me where Tags were fired (some that are already implemented by the owner) and wich weren’t fired when I clicked “add to cart (in this case, the tag I created through this guide)”. Maybe due to the “Add to cart” mechanism of the page? It’s http://www.jasonl.com.au
What trigger do you use?
hi, i can not see why this is not working for me?
i going in to real-time in GA and i can see that its’ its tracking me on the page but when i go to the event’s then i click button ‘add to cart’ its not picking up the event ?
i’ve tried changing the trigger to ‘contains’ as i’ve there are other class on the button…
any idea what i need or to check ?
thanks
Can you share what page you’re adding tracking to and what are your GTM settings?
Hi,
Query 1:
When we add more than one quantity to bag what should be tracked in “price” object(pr1pr)? It should be unit price or it should be based on quantity?
Query 2:
If i search any products and add product to cart, what should be tracked in “product category” object(pr1ca). It should be products category name or search term?
Note: When we search product we will not get that particular products category name. So what should i do in this case?
Hi Rajkumar,
1. This is for you to decide. If you don’t pass the quantity additionally, it will be good to pass the total price.
2. You already have the page URL as event label and it can give you some insights if it’s a product page or a search results page, and if the query is part of the URL, you’ll know the search term as well.
Hope this helps.
Hi Margarita
This is nice post and greate way to understand thing to user
I follow your code and create this using google tag manager
But i want to do it without helping Google tag manager. i think it’s a concept of enhanced ecommerce. if you know that please guide me.
i hope you understood what i want
Thank’s
Hi,
Of course adding a product to the cart is part of the enhanced ecommerce tracking, and what I described in the post above is a simple work-around for people that don’t have enhanced ecommerce or don’t have the resources to implement it. It requires significant development work if your shopping cart doesn’t support it as an integration, and you can use the documentation: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce
HI Margarita, thank you for your easy-to-follow example. I wonder if it is possble to link this event (add to cart) to another goal, as ‘Complete checkout’, so we can see in a funnel who from the people that added something to the cart, completed the purchase and if not, where did they exit.
Have you any example of that?
Hey Pablo, for now you can’t combine events and pages or different events in goal funnels. As a work-around you can create segments and manually fill in the funnel, or pull the data with GA’s add-on for Sheets automatically.
Hi Margarita,
Amazing article, exactly what I needed. Just wondering if you could suggest how we could track the page where the users added a product to basket? Many thanks.
Priyanka
Hi Pryanka, if you set the event label to {{Page URL}} as in the example, it will capture the page where the user added a product to the cart.
I really loved the way tag manager worked. I am exploring new ways now to see how to do conversion optimization for a drop-shipping store. So far the results are impressive. I’ll be applying your strategies to see how we can improve the results. Thanks for sharing a detail guide 🙂
Hi, where can I find that first page in GA, that you already starting from this tutorial?
I can find it anywhere… also google help is for no use here 😀 omg
Hi Peter, this is Google Tag Manager, not GA. The original post is using the old interface, and after the update you can see a screenshot of how it looks now.
Hello,
do I need to add script from data layer push to body over gtm code so that all data is collected correctly? How should I configure gtm now (2019)? I don’t know if there must be a script: window.dataLayer = window.dataLayer || [];
window.dataLayer.push [{
pagePostAuthor: ”}];
What should a script look like so that I can collect data about adding a product to the basket and subscribing to the newsletter? Thank you for your help.
Awesome article, this is what I’m looking for 🙂 Thanks for sharing 🙂
Pingback: Goals and Events eCommerce Businesses Should be Tracking with Google Analytics - Nexcess Blog
Pingback: Goals and Events eCommerce Businesses Should be Tracking with Google Analytics | Magento Hosting – WordPress Web Hosting
hello Margarita, can this work if i wanted to see what products or goods people are adding to their cart. thanks for your prompt reply.
My Website using Woocommerce but i can’t tracking add to cart. Just tracking in checkout. Please help me. Thanks So much.