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.