Track Add to Cart events in Google Analytics with Google Tag Manager

Posted on by

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

Click Listener tag

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.

Identifying add to cart element

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

Add to cart rule

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

GTM Event tracking

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:

add-to-cart-trigger

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.

is a Google Analytics fan, who also loves SEO, conversion optimization, online marketing and social media. You can follow her on Twitter and LinkedIn.

51 thoughts on “Track Add to Cart events in Google Analytics with Google Tag Manager”

  5. 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 ..

    Reply ↓

  7. 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

    Reply ↓

  10. 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.

    Reply ↓

  12. 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.

    Reply ↓

  15. 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?

    Reply ↓

  21. 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!!

    Reply ↓

  22. 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!

    Reply ↓

  25. 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!

    Reply ↓

      • 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

        Reply ↓

  26. 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

    Reply ↓

  27. 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?

    Reply ↓

    • 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.

      Reply ↓

  28. 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

    Reply ↓

  29. 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?

    Reply ↓

    • 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.

      Reply ↓

  30. 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

    Reply ↓

  31. 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 🙂

    Reply ↓

  32. 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

    Reply ↓

  33. 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.

    Reply ↓

  35. Pingback: Goals and Events eCommerce Businesses Should be Tracking with Google Analytics - Nexcess Blog

  36. Pingback: Goals and Events eCommerce Businesses Should be Tracking with Google Analytics | Magento Hosting – WordPress Web Hosting

  37. 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.

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *