Google Tag Manager

Google Tag Manager is a tool that can be used to manage and deploy marketing tags on your website solution, without having to modify the code. On Rapido, we have implemented the code snippets for Google Tag Manager custom events, for example supporting Enhanced Ecommerce. Users can add different tags using the events, and thereby retrieve useful, user behavior and visual information from Google Analytics, when customers are visiting their websites.

To use this tool, start by setting up your Google Tag Manager account. Go to the Google Tag Manager webpage and click "Start for free". If you do not have a Google account already, you will have to create one to utilize this tool.

After creating your account, you will be given a Google Tag Manager ID (referenced to as GTM-ID in this article). You can find your ID this way: 

  • Click on the admin section from the ribbon bar
  • Your GTM ID will be located on the right side as shown in Figure 2.1
Figure 2.1 Google Tag Manager ID

Google Analytics is a tool used to help you analyze the traffic on your website. It helps you keep track of your digital marketing effectiveness by providing in-depth detail about the traffic on your solution. Get valuable insights that can be used to maximize your impact on potential customers.

To use Google Analytics with Rapido, you will also need to create a Google Analytics account and get a tracking ID. To create an account and get the ID, follow these steps:

  • Go to the Google Analytics webpage and create a free account 
  • After creating the account, enter the admin section
  • Then, go to the property settings and you will find your tracking ID as shown in Figure 4.1
Figure 4.1 Tracking ID - Google Analytics

Enhanced Ecommerce is a feature provided by Google Analytics, that assists you in gathering information regarding how users interact with the products from your web shop. With enhanced ecommerce, you can measure anything from, product clicks, views of product details and additions or removals from shopping cart etc.

To work with the Ecommerce features, you will have to configure your settings in Google Analytics. To do so, go to admin then click on E-commerce Settings and make sure your settings match the settings shown in the picture below (Figure 6.1).

Figure 6.1 Ecommerce settings

Rapido has some existings ecommerce events that can be utilized by the use of Google Tag Manager. These events are listed below:

Events

Comments

addToCart

If one of your products is added to cart, this event will be activated

checkout

When a user goes to the checkout, this event will be activated

productClick

When a product is clicked on your website, this event will be activated

productDetails

If entering the product detail, this event will be activated

productView

When a product if viewed e.g. on the list, related products, this event will be activated

purchase

If a product has been purchased in checkout, this event will be activated

removeFromCart

If a product is removed from the cart on your website, this event will be activated

 

In order to utilize Google Tag Manager (GTM), you must have knowledge of the different components needed. There are tags, triggers, and variables:

  • Tags are used to send data, to e.g. Google Analytics.
  • A trigger is the listener for the different events - it listens to clicks, form submissions, page loads etc.
    When an event is matched with a trigger, any tags with reference to the trigger will be fired
  • A variable is just a placeholder for a value that can be changed

See Google documentation for further explanation.

To make Rapido compatible with Google Tag Manager, you must insert your GTM ID & Google Analytics tracking ID to the website settings:

  • Enter your website settings and go to the Settings tab
  • Under the Other section, input your GTM ID & GA ID as shown in Figure 8.2
Figure 8.2 Insert your Google Tag Manager ID & Google Analytics ID

Variables are simply just placeholders that represents values that will change.

Below a brief explanation of how variables work with triggers and tags is listed:

  • When combined with triggers, variables are used to define filters that specify when a certain tag should fire.   
    • e.g.: ‘’Fire a form submission trigger, when a form has been submitted ‘’.                              
  • When combined with tags, variables are used to capture values that are dynamic.
    • e.g.: “Pass a product ID to a tracking tag ‘’.

To create variables in GTM, enter your Workspace and then click Variables. Please follow the steps below: 

  • Create new variable
  • Select variable type Google analytics settings as shown on Figure 10.1
  • Insert Your Google analytics tracking ID UA-xxxxxxxxxx
  • Optional: You can set your GA ID as your name of the variable
  • Under More settings/Ecommerce,  you must tick the checkboxes: Enable Enhanced Ecommerce Features & Use data layer
Figure 10.1 Variable configuration

If you feel like you still want more information regarding triggers, see Googles documentation here.

productClick is the first trigger we'll create (see Figure 11.1)

To create triggers, enter your Workspace and click Triggers. After that, please follow the steps below: 

  • Create new trigger
  • Select trigger type:  custom event
  • Set event name: productClick (needs to be identical to the triggers made in the Rapido template)
  • Set trigger fires on “All custom events
  • Optional: set your title to the same as your event name 
Figure 11.1 Trigger configuration

After creating your first trigger, we need three more. Please create the additional triggers listed below. The procedure is the same as above, you just have to replace the previous event name, with the different ones listed below: 

  • addToCart
  • checkout
  • productClick
  • productDetails
  • productView
  • purchase
  • removeFromCart

After creating all the triggers above, they can be seen from the overview section in GTM as shown on Figure 12.1. 

Figure 12.1 Trigger overview - Google Tag Manager

To get more information on tags, please see the Google documentation here

To create Tags in GTM go to your Workspace and then click Tags. After, please follow the steps below:

GA-productClick

  • Create new tag
  • Select tag type – Google Analytics: Universal Analytics
  • Select track type: Event
  • Insert category name e.g. EEcommerce
  • Insert action name e.g. ActionProductListClick
  • Insert GA tracking ID UA-xxxxxxxxxx (select your predefined variable)
  • Select triggering - custom event: productClick 
  • Optional: set your title to GA-productClick
Figure 13.1 Tag configuration

After creating the frist tag, we still need to create a three more. The procedure is the same, you just need to replace the previous custom event name with the ones listed below: 

  • addToCart
  • checkout
  • productClick
  • productDetails
  • productView
  • purchase
  • removeFromCart

Lastly, we need one more tag to be created. Please follow these steps: 

  • Create the new tag
  • Select tag type – Google Analytics: Universal Analytics
  • Select track type: Pageview
  • Insert GA tracking ID: UA-xxxxxxxxxx (select your predefined variable)
  • Select triggering – All Pages
Figure 14.1 GTM - Tag configuration

Now, go back to the overview section, to view all the different tags you have created earlier. It should match the tags in Figure 14.2 . 

Figure 14.2 Overview of tags

When the variable, triggers and tags are created,  it is possible to see if your triggers works and are fired in the frontend. When satisfied, the results can be submitted they will then be sent to Google Analytics, which will process the information. 

Figure 15.1 Home - Overview

After clicking preview, you will be shown the frontend of your website and enter GTM debug mode as shown on Figure 15.2. Here, you will be able to see everything you have created so far. You can for example see which tags got fired and which didn't. The debug mode is made for previewing everything you have developed, before you choose to submit it. 

Figure 15.2 GTM Preview - Debug mode

After previewing everything you made, it's time to submit what you have developed so far. To do so, follow these steps: 

  • Go back to your workspace 
  • Click on submit as shown on Figure 16.1
Figure 16.1 Submit button

After pressing submit, you will be redirected to the submission configuration. Here, you can describe the changes that you have developed. Follow these steps to do so: 

  • Input a version name 
  • Add a detailed description of the changes 
  • Choose the enviroment where you want to publish it  (Live is selected by default) 
  • When you are satisfied, click publish as shown on Figure 16.2
Figure 16.2 Publish the changes

In Google Analytics, go to home, you will be able to see the actions that have been made on the website. These are some of the things you will be able to see: 

  • Pages visited 
  • Devices used 
  • Top selling products
  • Real time report etc. 

 

Figure 17.1 Home - Overview

You are able to view all the events that have occured on your website, based on the tags & custom events that are set in Google Tag Manager. Go to the behaviour section then click on events to see an overview of the different events as shown on Figure 18.1. Here, you can see:

  • Total events 
  • Top events
  • Event action
Figure 18.1 Event overview

In Conversions click on E-commerce and Shopping-behavior, here you will be able to see the users behavior on the site, which are gathered from the Enhanced E-commerce feature. 

Figure 19.1 E-commerce Overview