Leveraging Google Tag Manager (with Amplitude and Braze) for Halodoc Web

Web Development • Sep 23, 2022

TL;DR

When developing a feature for a web app, we need to build something that is needed by the users. Otherwise, it won’t bring us much benefit and will only overload our web. But how can we identify whether a feature is meeting user needs or not?

The first step we can do is to understand the user's needs by utilizing the existing features. We can do it by understanding the user journey starting from when the user visits our web, then what interactions they do, such as button click. From those user journeys, we can identify which parts of our web interest users most.

Assuming that we already have the right features to be on our web, how can we make our users stay and come back again? Now that we already understand our users' behaviors, we can send personalized messages based on their actions, such as sending welcome messages after a user does registration, saying thank you after a user purchases our product, and many more cases.

How can we identify which button the user clicks among those bunch of buttons? We need to add tags to them. At Halodoc, we use Google Tag Manager (GTM) to help us manage those tags.

About GTM

GTM stands for Google Tag Manager. It is a tag management tool that can help us specify the tags based on our product needs. Tags are blocks of code that contain specific information about an event performed by users on our web. GTM also allows us to define when the tags will be triggered through its feature called Triggers. For example, we want to track when a user visits a page and collect the data including the page name and the page URL, this information is called a tag and the page visit is the trigger.

Just like other tag management systems, like Adobe Launch and Tealium, GTM allows us to manage tags, triggers, and variables easier. However, there are some advantages to using GTM rather than other similar tools, such as the native debugger. In GTM, there is a preview mode that enables us to see whether a tag is firing or not and it will highlight if there is an error. It is a native feature that we can use without extra steps or additional configuration needed. The same debugger does not exist in Adobe Launch and Tealium.

GTM allows us to separate development and production environments and manage the versioning neatly. Every time we make unexpected changes, we can revert to the previous version easily. In GTM, we can also create a workspace that acts like a branch. We can make our changes in the workspace, then we can merge them and publish our changes in a specific environment. Therefore GTM also supports collaboration work.

How Halodoc Utilizes GTM

Just like its name, GTM is only used for managing the tags, and how do we utilize these tags? At Halodoc, we use other tools for helping product and marketing teams, Amplitude and Braze. Amplitude is a tool we use to analyze the collected data by GTM. It allows product managers to measure and decide on what matters based on real-time data.

Besides product managers, we also utilize GTM to help the marketing team build a better relationship with our users by using Braze. Braze is a customer engagement tool that can be utilized for creating personalized messages for our customers based on their behavior on our web or app.

GTM implementation at Halodoc

We have understood about GTM usages, now let’s discuss what’s going on under the hood!

As we discussed, we integrate our web with Braze and Amplitude through GTM. When a user performs an action on our web, such as a button click, the click event information will be sent to GTM through a data layer. The data layer will pass the event data to GTM Tags. In GTM, the Amplitude and Braze triggers will be fired. And finally, we can see the event data showing in both Amplitude and Braze.

Now, let’s discuss how we configure all of it!

1. Installing GTM to our web

To be able to integrate our web with GTM, we need to install the GTM service onto it. GTM has provided a script that we can embed on our web inside <head> tag, just like this:

We need the container ID of our workspace on the GTM dashboard. Then we also need to declare this code inside the <body> tag.

Now that GTM has been installed on our web, we can directly manage our tags and integrate them with other tools on the GTM dashboard.

2. Integrating GTM with Amplitude

Below are the steps on how to enable Amplitude with GTM on our website.

1. Initialize Amplitude in GTM

Under the Tags menu, we need to create a new tag and let’s name it Amplitude Initialization. Then we need to choose the “Custom HTML” type and put the Amplitude Javascript SDK there. Here, we will need the Amplitude API key which we can access on the Amplitude dashboard.

Assume that we want this tag to be triggered every time we open a page. We can achieve this by choosing the “All Pages” trigger in the Triggering field.

2. Create a tag for the Amplitude event

To enable GTM to send data to Amplitude, we have to configure a new tag with the Amplitude script. Assume that we want to log page view events and identify the user ID, then the script will look like this:

In the script above, we use 3 variables: Event, Event Properties, and User ID. Event is a built-in variable that we can use if we want to log custom events. While Event Properties and User ID are new variables we need to create. We can create these variable under the Variables menu, then define the variable type and the variable name. Because we want to store data from the data layer, therefore we choose the Data Layer Variable type.

For the trigger, we need to create a custom one in the Triggers menu.

3. Declare the data layer in the website

For example, we want to log click events on the “Artikel” menu on our website.

Therefore, on the website we can declare a function like this:

Then we fire it in the onClick event of the “Artikel” menu component.

4. Find the log in Amplitude

In Amplitude, we can find the log of a specific user under the menu User Look-Up. The event properties that we have declared on GTM and data layer will be shown.

For further utilization, such as if we want to know how many users use our feature based on the logged event data, we can also create an Analysis.

5. Create Analysis in Amplitude

With Amplitude, we can generate reports from the GTM data layer so that we can do analysis. Amplitude has various analysis features such as segmentation, funnel, retention, and data table.

Funnel Analysis Example

Assume that we want to analyze the conversion funnel of users that click the article menu until they reach the article detail page. For this case, we can use Funnel analysis on Amplitude.

Declare the data layer based on the data that we want to gather. We can utilize the data layer from the function trackArticleMenu() that we have declared before. To log the article detail page visit event, we can declare one more function like this and trigger it during the article page load.
To make sure it works, let's do a real-time test using the Preview feature of GTM.
In Amplitude, we can create Funnel and select the events that we have logged, “article menu click” and “article detail page visit”. Amplitude provides various options, such as chart type, the time box, and comparison with specific past times. We can also inspect the user journeys and user paths from that conversion funnel. From the chart above, the total conversion from “article menu click” to “article detail page visit” within the last 7 days is 51.4% from 35 total users.

Segmentation Analysis Example

On our article home page, there is a search bar, popular articles, and the latest articles. Assume that we want to know which one of those components most of our users use. In Amplitude, we can generate a report with Segmentation.

Declare functions to log the event performed on the search bar, popular articles, and the latest articles.
Test the data layer in GTM Preview.
In Amplitude, select Segmentation analysis then select those 3 events: “article search”, “popular article banner click”, and “latest article click”.
We can choose the analysis type based on our needs. Because we want to know the total of each event, therefore we can choose Event Totals. Based on the above chart, the total triggers of each event within the last 7 days are 25 for “article search”, 6 for “popular article banner click”, and 13 for “latest article click”.
Amplitude also provides a Breakdown Table and enables us to export it as a CSV file.

3. Integrating GTM with Braze

Steps to integrate GTM with Braze are similar to what we have done with Amplitude.

1. Initialize Braze in GTM

To initialize Braze in GTM, we need to create a new tag in GTM. For example, we can create Braze Initialization tags with tag type Braze Initialization. Then we have to add Braze API Key, API Endpoint, and User ID that we can store as variables.

The trigger for this tag will be “All Pages” because just like Amplitude, we want this tag to be triggered on all pages.

2. Create a tag for the Braze event

A new tag is also required for logging events from GTM to Braze. We want to use the same data layer as Amplitude for Braze, therefore we need to add the script to log the event data, for this case we will log User Properties and identify them using a User ID. The script will look like this:

For the trigger, we can create a new custom trigger.

4. Find the logs in Braze

If we trigger the “article menu click” event that we have declared before, now the log will appear not only in Amplitude but also in Braze.

In Braze, we can create a segment of users that ever click that “Artikel” menu.

Then we can create a campaign targeting that segment of users, such as a push notification.

This is the example how can we utilize data from the GTM data layer to send campaigns.

Summary

In this article, we have discussed how we can utilize Google Tag Manager (GTM) with tools like Amplitude and Braze to help product teams gather necessary information for product analysis and help CRM teams to build better customer engagement with web application. As developers, we can help by creating some custom code that we put on our web as tags, while other non-tech teams can easily utilize the result through tools that have been integrated with GTM.‌

Join us

Scalability, reliability and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and if solving hard problems with challenging requirements is your forte, please reach out to us with your resumé at careers.india@halodoc.com.

About Halodoc

Halodoc is the number 1 all around Healthcare application in Indonesia. Our mission is to simplify and bring quality healthcare across Indonesia, from Sabang to Merauke. We connect 20,000+ doctors with patients in need through our Tele-consultation service. We partner with 3500+ pharmacies in 100+ cities to bring medicine to your doorstep. We've also partnered with Indonesia's largest lab provider to provide lab home services, and to top it off we have recently launched a premium appointment service that partners with 500+ hospitals that allow patients to book a doctor appointment inside our application. We are extremely fortunate to be trusted by our investors, such as the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek and many more. We recently closed our Series C round and In total have raised around USD$180 million for our mission. Our team works tirelessly to make sure that we create the best healthcare solution personalised for all of our patient's needs, and are continuously on a path to simplify healthcare for Indonesia.