How To Use Google Tag Manager In E-Commerce Sites

If you want to track events, without your developer’s involvement, then the implementation of events via Google Tag Manager is the best solution. It will allow you to track the untrackable within your site, without having to involve any developer, saving you time and money.

Those of you who read my posts, I had written a post where you can generate events through a JavaScript snippet on Excel.

With Tag Manager no hardcoded JavaScript events are required. Google Tag Manager can simplify the process. However there’s a big problem when it comes to e-commerce sites. How can you track events that matter to an e-commerce is you don’t know how to track the elements that you want to track?

This post deals with a favourite part of mine and that is Google Tag Manager of course.

How to track banners

If you would like to track clickable images on the homepage, banners, that may lead the user to another page of your site or to a subdomain or to offers that you make that’s the first step that you need to do; to implement the element URL. You have to choose the auto-event variable from your variable and you need to configure the variable as shown below:


Next you need to review the ‘Inspect Element’ of the specific element (clickable image, banner etc) and use it very soon in the Trigger part, which I will show you below.


Go to the Tag section and add all the relevant information as shown below (make sure that you set the event as non-interactive so it doesn’t have any impact on your bounce rate):


In the last part you make sure to choose the Trigger to fire on the element url. What is the element URL? What you saw earlier on the Inspect Element section.




If you have made a proper implementation then you will see on the Preview and Debug, before you publish, the below positive indication, which means that everything went well:




How to Add To Cart

You want to track the users who add a product in the card/basket. That’s the process that you would need to follow. More or less the rationale is the same in every ecommerce platform.

Make sure that you click on the element ‘Add To Cart” or “Add To Basket’ by clicking “Inspect Element” and it will basically show you the <class> that you need to choose and with the Variables you can see that you need to focus on Click Classes which will allow you to create the right trigger later on.



As we mentioned earlier, we will need to create a Trigger (that’s what I usually do – I start from Triggers and end with the Tags):

I use the Click Classes from the Variables and copy/paste into the trigger as you see below:


After the completion of Trigger, we add the necessary information in the Tag, giving the right name of the event, category and action.


After we save the information above and before we publish this event, we make sure to test it through Preview and Debug. If we do not see anything red below, it means that everything is OK:



Update Cart

Let’s assume that there are users who wish to update their basket with more baskets and we want to make remarketing campaigns so that we target these users who are willing to buy more. An efficient way to help us achieve our is the creation of events for this purpose so that we target only these users who update their cart.

Again we need to review the inspect the element that is ‘Update Cart’ and find the right Variable which is this case the Click Classes and the ‘button expand’.


We can start with the creation of the Trigger which will be fired on when there will be an elements whose click class is under the name ‘button expand’ :



What we did earlier with the other tags, we create in the same way this tag and within we add the events:


We also make sure to test it accordingly and ensure that everything is OK before we publish this event:





Let’s assume that we would like to create event-based goals so that we measure our checkouts. The event-based goal will be based on the tag that we will created based on which we will add the trigger upon which this event will be triggered. It’s easier than it sounds… really!

We inspect the element of the Checkout and we also review the variables so that we choose the right one, which again is Click Classes.


Again we make sure that data layer variable Click Classes contains the name that we have selected. So when the user clicks on this element (Checkout button) with the name that you see below, then the trigger will be fired because all the conditions are the right ones (true):



In the same way you configure the tag giving the name you want to give and you make sure the tag to fire on the right trigger that you have just created.


As always you make sure to test that your element is OK and it will be fired.


I always use a screenshot of the events that I will use in the event-based goal so that I give the exact names without any mistakes.



Remove Item

Lets assume again that you would like to track users through remarketing campaigns, who decide to remove the item and not to purchase, by making them a 25% discount if they return to the site and decide to finalise the purchase; this event would be a good start.

Again, in this case you inspect the element (button, link etc) and then you use the variable so that you see which data layer variable is the right one:



Since you have found out which data layer variable is the right one you simply make sure that this trigger will be fired when the conditions below are true:


You make sure to add the information below, just like it is below. Obviously the names of the event (mandatory: action, category; optional: label) can be changed as you can give any name you want.


Then you simply make sure to test that everything is OK and then you can publish so that you can start tracking the events and the event-based goals on Analytics.





It’s that easy to create events using Google Tag Manager and it’s so much better than using JavaScript events, for which you can use my JavaScript (excel) automatic generator.


Also read...

Comments are closed.