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 start using this tool, start by setting up your Google Tag Manager account. It can be done by clicking on this link, and afterwards clicking ‘’ 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 GTM (Google Tag Manager) id. To find it, follow these steps: 

  • Click on the admin section from the ribbon
  • It will be located on the right side, as shown on Figure 2.2
Figure 2.2 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.

You also need to create a Google Analytics account. To create an account, follow these steps:

  • Click on this link and create an account 
  • After creating the account, enter the admin section
  • Then, go to property settings
  • Your tracking id will then be present as shown on 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

productClick

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

addToCart

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

removeFromCart

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

checkout

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

In order to utilize Google Tag Manager, you must have knowledge of the different components needed. There’s variables, tags and triggers.

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 and page loads etc. When an event is matched with a trigger, any tags that references the trigger will be fired. Lastly, 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 have to insert your GTM-ID. 

To do so, please follow these steps: 

  • Enter your website settings 
  • Scroll down to settings tab, and click on it 
  • Locate the other section
  • Input yout GTM-ID as shown on Figure 9.2
Figure 9.2 Website settings - GTM 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 11.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 11.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 12.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 12.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 
  • removeFromCart
  • checkout

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

Figure 13.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 14.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
  • removeFromCart
  • checkout

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

Figure 15.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 16.1 Home - Overview

After clicking preview, you will be shown the frontend of your website and enter GTM debug mode as shown on Figure 16.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 16.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 17.1
Figure 17.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 17.2
Figure 17.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 18.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 19.1. Here, you can see:

  • Total events 
  • Top events
  • Event action
Figure 19.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 20.1 E-commerce Overview