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
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.
Create a Google Analytics account
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
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).
Rapido has some existings ecommerce events that can be utilized by the use of Google Tag Manager. These events are listed below:
|If one of your products is added to cart, this event will be activated|
|When a user goes to the checkout, this event will be activated|
When a product is clicked on your website, this event will be activated
If entering the product detail, this event will be activated
|When a product if viewed e.g. on the list, related products, this event will be activated|
|If a product has been purchased in checkout, this event will be activated|
|If a product is removed from the cart on your website, this event will be activated|
Using Google Tag Manager
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
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
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
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:
After creating all the triggers above, they can be seen from the overview section in GTM as shown on Figure 12.1.
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:
- 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
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:
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
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 .
Preview & submit
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.
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.
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
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
Google Analytics - Data overview
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.
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