GET STARTED WITH GOOGLE TAG MANAGER
By: Ngan Hoang
Tags: Get Started Guide, Gtm, Mti, Technical

Before getting started we need to prepare something

I. PREREQUISITES

1. Google Account & Google Analytics Account

2. Assume you understand basic about Google Analytics (GA) (what event are, how to track data from an event)

II. WHY YOU SHOULD USE GOOGLE TAG MANAGER & BENEFIT OF IT

GTM will help you solve problems like below:

a. Every tracking platform is a JavaScript code so if you add any type of tracking code in your application/website it will slow down the page load speed

b. A marketer or analyst wants to track certain events or install a new tracking code they have to ask for help from a developer. Their all take a long time to tracking code are being tested, fixes errors

c. There are many pieces of JavaSript code snippets were scattered across different files. It’s difficult to manage or maintain.

2. Benefit of GTM

Figure 1. There are some benefit of GTM

III. WHAT IS GOOGLE TAG MANAGER

GTM is a free tool is offered by Google that helps every marketer or anyone who have demand to deploy and track tags on their application

There are three main part of GTM

Tags: The tracking snippets of JavaScript or pixels

Example: Google Analytics, Google Adwords, Facebook pixels, …

2. Triggers: Describe under which circumstances a tag should be fired

Example: Page View, Window Load, Form Submit, …

3. Variables: They allow you to pull information from a web page from use in tags and triggers.

Example: ClickUrl, Page Path, Page Url, Event

IV. HOW DOES A TAG MANAGER WORK WORKS

Google Tag Manager provides a container script that is placed in your site’s template that loads the tags and a web-based interface to set up tracking tags by that information from your website is shared with many tracking tools

Figure 2. This image illustrates how GMT works

V. GET STARTED WITH GTM ON WEBSITE

1. Create a GTM account

Let’s go through the steps of creating a new account with me

Using your google account and access to https://tagmanager.google.com/

After logging in your screen will display the Accounts interface (The screenshot below after I created 2 accounts)

Figure 3. GTM Account interface

Click on the Create Account button it will transit to the Add a New Account page

Figure 4: An account usually represents a single organization or business

2. GTM Container Script

When creating a container you select the type of content: Web, AMP, Android, or iOS. If setting up a mobile container, select whether you’re using the Firebase SDK or one of the legacy SDKs.

Figure 5: Container Setup on the target platform is web

After creating a container successfully

1. Your screen will display an Install Tag Manager box

2. Copy and paste the code snippets into your website as instructed in the Install Tag Manager box

The GTM container script looks something like this:

Figure 6: The Install Google Tag Manager box

“GTM-KD3Q8T6” is my ContainerID, if you create a new container you will have another Id, every account will have a different ID that uniquely. It helps identifier your tag.

Once the GTM container code is included on your website, tags can be added and published through the GTM interface. We will explore more about them in the next section

3. Implement Google Analytics basic with GTM

Assume you’ve already created a GA account and a website.

Now, let’s work through creating your first tracking event example is tracking the number of users who click on a social link on the website.

Step 1. Create A Trigger

1. In the container’s Triggers section, click on the New button

2. Edit the tag name at the top (“Untitled Trigger”) to give the tag a name: “Social_Click_Link”

Figure 7: Createnew trigger interface

3. Trigger type “Click — Just Links” mean your tag just fires when you click on a link.

4. This trigger fire on Some Link Clicks and add Fire this trigger when an Event occurs and all of these conditions are true.

- Click URL: is a variable when an element link is clicked on your page that matches the trigger conditions

Example: You set Click URL contains “Instagram”. Later when you click on a URL like ‘http://instagram.com/' your tags will be fired

5. Click on the Save button

Step 2. Create the GA Tags

1. In the container’s Tags section, click on the New button

2. Edit the tag name at the top (“Untitled Tag”) to give the tag a name: “GA_Event”

Figure 8: Create new Tag interface

3. Select the tag from the list of supported tag template: Google Analytics: GA4 Event

4. Choose Configuration Tag (“GA4 Configuration tag initializes Google Analytics for your Google Analytics 4 property on a particular page”, you able to understand more by click on popover-icon). In my case I choose None — Manually Set ID

5. Measurement ID this is the identifier for your web in GA. GTM uses this field to fill the value in the GA code’s “create” command

6. Event Name: this value you want to use to track the event in GA.

Note: There are many fields like Event Parameters, User Properties, or Advanced Settings I will define and give example in another article

You need to assign at least one trigger before you save your new GA tag

7. Click on the Triggering section and choose a trigger that you created on step 1 (see screenshot below)

Figure 9: Add a trigger for tag

8. Click on the Save button

Step 3. Preview and Publish

So far, we’re set up a tag with a trigger and a Click URL variable. However, nothing has changed on the website.

GTM will be made live after you publish them to the site. so let’s follow the publishing process and testing tool

Figure 10: The Workspace interface

To ensure that you’re set up your tags correctly, you should first preview them on the site before publishing.

a. Preview and Debug Mode

Preview mode will help you pre-check what you set up is working correctly. Because it works on your live website, but only for you.

Let’s do step by step like below:

1. You enter the Preview button

2. Fill in your website domain on Preview Mode is Tag Assitant

3. Now you visit your website and try click on the Instagram link

Figure 11: My website example.

4. Back to GTM’s Preview Mode is Tag Assitant so see what includes information about which tags fired for the page. In our case Tags, “GA_Event” we created before is fired an event is “Link Click”

Figure 12: Debug tag assistance interface

5. You can click “GA_Event” Tags Fired o see more about its properties that were filled in by GTM

Figure 13: Tag fired details

b. Publish

If you’re satisfied with what you see in Preview mode, you are ready to publish your changes and make them live for all viewers by click on the Submit button on the container interface.

GTM will indicate the changes in “Workspaces changes” that are being updated in the currently published version and ask for a confirmation.

Figure 14: Review what we changed before publishing

Once GTM publishes the changes to the website, GTM creates a new version. Version are sequentially numbered, fixed snapshots of the container’s tag, triggers, and variable. It also has activities in history. This allows you to revert to an earlier working version of your container if you have anything that does not work correctly.

Figure 15: Live version

c. View Google Analytics Real-Times Reports

After finishing all processes includes set up, preview, publish, and tracking in GTM. You can also take a look at the tracking data received by Google Analytics (GA). The data reports in GA will take some time to calculate so you can check them after one or more days. Now let’s overview data appear in the Real-Time reports (see screenshot below).

Figure 16: Google Analytics realtime report interface

That’s all, may it’s pretty shortly guide. I’ve explained everything basically I know. Did I miss something about GTM in this article, let me know in the comments.

VI Conclusion

We’re just starting with GTM. I hope everything might doesn’t look a bit overwhelming. Most likely, everyone has been understanding at some point and this article is useful to you.

Thank you so much! 🌸👏🤞.

References: