The original article was written on May 15, 2019, and it focused on sending data to Google Analytics Universal. However, during the migration of the blog to a new CMS, I decided to update the content to reflect the current version — Google Analytics 4.
At the time of updating this article, there are 77 types of tags available in Google Tag Manager. Of these, 75 are various pre-installed templates, such as Google Tag, Google Analytics: GA4 Event, Google Ads Remarketing, Hotjar Tracking Code, and Google Ads Calls from Website Conversion. There are also 2 types of custom tags: Custom HTML and Custom Image. And I haven’t even mentioned the community gallery tags yet…
It’s difficult to describe this variety in a single article — and there’s no need to, since in practice, I’ve never seen a company that uses all of them at once.
In this article, you’ll learn about the main types as well as about advanced tag settings that are available regardless of the selected type.
- What tags are in Google Tag Manager and why they are needed
- Google Tag
- Hotjar Tracking Code Tag
- Community Template Gallery
- Custom HTML Tag
- Custom Image Tag
- Advanced settings when creating tags
Before we dive in, here’s a quick intro about what tags are. If you already know this, for example, from the article about Google Tag Manager basics, feel free to skip to the next section.
As I wrote in the previous article, tags are snippets of code that you want to install on your website. Most of these snippets have ready-made templates, especially Google services. For example, to install Google Analytics 4 on a site, you should use the "Google Tag" type. This also applies to non-Google services — for instance, there is a template for Quora Pixel.
If you can’t find the service you need among the main tag types, you can always use the Community Template Gallery or choose custom types like Custom HTML or Custom Image, which allow you to insert any code fragments into your site. A good example is Facebook. Read more about installing the Facebook Pixel code on your site here.
No matter how diverse the tags in Google Tag Manager are, the setup process can always be divided into three main stages:
- Configuring the main tag settings;
- Advanced settings (if needed);
- Adding a trigger.
We’ll go through the first stage separately for each tag. The second stage is the same for all tags, and we’ll cover it at the end of the article. The last stage — triggers — is the condition that defines when our tag should fire.
The topic of triggers deserves separate materials, which you can find on this blog:
- Tracking clicks on website elements using Google Tag Manager: Advanced Guide
- Tracking link clicks using Google Tag Manager: Practical Guide with Examples
- Tracking form submissions using the basic GTM trigger
- Tracking form submissions using the Element Visibility trigger
- Tracking page scrolling using Google Tag Manager: Advanced Guide
- Tracking video interactions using Google Tag Manager
Google Tag
The Google Tag template is one of the most popular and frequently used. It is responsible, among other things, for installing the basic Google Analytics 4 code on a website.
As you can see, I wasn’t exaggerating when I said earlier that tags are templates: all you need to configure this tag is to fill in a single field — the Tag ID.
Тег Hotjar Tracking Code
Click and scroll heatmaps contain tons of valuable information about how users interact with your website. One of the services that provides this data is Hotjar. GTM has a special template for it too, where you only need to insert the Site ID. You can read more about installing Hotjar in the article Setting Up Core Analytics Systems Using Google Tag Manager.
Community Template Gallery
As you can see, working with tag templates in GTM is very simple. But not all systems have their templates among the main tag types. One such example is Facebook Pixel. That’s where the Community Template Gallery comes in. You can find a Facebook Pixel tag there. Since the community has already done the heavy lifting, once again all you have to do is insert the correct ID.
Custom HTML Tag
Hopefully, you’ve noticed that working with templates is a pleasure: no programming and just a few fields to fill out. However, sometimes templates are not enough, and that's where special types of tags come into play.
The Custom HTML tag type allows us to place any JavaScript code on the site. All you need to do is write it into the HTML field.
Besides this field, there is only one major setting: Support document.write.
In the past, this method allowed text to be displayed instead of a page element until the required element loaded. Later, it started being used for loading various scripts. Since version 54, Google Chrome began limiting this method. Overall, using document.write negatively affects website performance, so it's better to avoid it.
Custom Image Tag
If there’s no template available for a tag, we use Custom HTML. But what if we need to send a script while JavaScript is disabled in the browser? In that case, we use the Custom Image tag type. This type works thanks to the second part of the GTM code that you place inside the <body>:
This part allows GTM to send data even when JS is unavailable. It’s also used by many analytics systems. Here’s how it looks in the Facebook Pixel code:
When installing Facebook Pixel, this code snippet must be added using this tag type — assuming, of course, that you expect some users to have JS disabled ;)
In the Image URL field, you specify the image address with all necessary parameters. For example, to track a PageView event for Facebook:
https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1
In the Enable Cache Busting block, the gtmcb parameter is enabled by default. It helps avoid problems with event tracking on cached websites. GTM will automatically append a random value to the URL:
https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1>mcb=12345678
Since the value will change every time, the browser will fetch the image anew, ensuring the event is recorded. If Enable Cache Busting is disabled, data will only be sent during the first image load.
Advanced Settings When Creating Tags
Advanced settings are independent of the tag type and allow for additional execution conditions:
- Tag firing priority — Defines the order in which tags fire. Higher positive numbers fire earlier. For example, a tag with a priority of 100 will fire before tags with 50 or -2. Default priority is 0.
It is important to always keep in mind that tags will fire asynchronously.
- Only fire this tag in published containers — Prevents the tag from firing in preview or testing modes.
- Enable custom tag firing schedule — Allows the tag to be active only during a specified time range. Both start and end dates must be set. For example, you could activate specific tags only during the New Year’s campaign.
- Tag firing options — Lets you control how often a tag fires:
- Unlimited — Fires every time the trigger is activated;
- Once per event — Fires once per event type;
- Once per page — Fires only once per page, regardless of trigger events.
- Tag Sequencing — Allows you to specify tags to fire before or after the current one. You can also block the firing of a tag if a prior tag fails. This is an advanced feature that deserves a separate article.
Instead of Conclusion
In this guide, I tried to cover the main tags that web analysts use in their daily work. If you think an important one was missed, be sure to leave a comment! Let’s make this material even better together. :)
If you enjoyed this content, subscribe to my LinkedIn page.
I also run a LinkedIn newsletter with fresh analytics updates every two weeks — here’s the link to join.
Web Analyst, Marketer