What is Google Tag Manager (gtm.js) and how do you install it?

How much do you know about your website and application? How well can you respond to visitors/customers/consumers? How do you evaluate performance, and how do you plan for improvements and optimizations?

How measurable and sustainable is your marketing campaign? You can ask many more questions, and unfortunately, you won’t be able to answer most of them without the appropriate tools. At this point, several tools suited to our objectives come into play. Among them are several free tools provided by Google Analytics, Google AdWords, DoubleClick, and Google Search Console¹.

On the other hand, there are many more solutions available to meet different needs. Options such as Yahoo Gemini², Adobe Dynamic Tag Management³, Tealium⁴, Signals⁵, Segment⁶, Ensighten⁷, QuBit OpenTag⁸, AT Internet⁹, and Yottaa¹⁰ can be considered. In this article, I will discuss Google Tag Manager, a solution that can easily integrate with many platforms, including Google services, and leverage recent enhancements¹¹ to achieve significantly more effective results.

Google Tag Manager (GTM)

Google Tag Manager is a code management platform that simplifies tag, trigger, and variable management. It can be considered a highly valuable asset in marketing and product development processes, possessing data that evaluates key stages of these workflows. The process of identifying appropriate tools and integrating them into the workflow can become notably tedious due to the involvement of multiple stages, such as communication breakdowns with developers, agencies’ and customers’ technical capabilities, the costs of the applications being integrated, the integration process itself, and testing procedures.

At precisely this point, platforms like Google Tag Manager come into play, enabling the integration of various services through a single setup¹². Although tools such as Segment, Yahoo Tag Manager, and Adobe Dynamic Tag Management differ in terms of service and target audience contexts, they all operate with the shared objective of solving the types of issues commonly encountered in marketing workflows. Google Tag Manager holds a dominant position in the market, thanks to its fast and straightforward integration with other Google services and its free availability.

We can describe Google Tag Manager as a simple¹³, consistent, and reliable deployment management platform for marketers. After the developer correctly integrates the GTM code into the system, any external tools that can be used throughout the process can be quickly integrated into both web pages and mobile applications, while also being protected against potential communication issues and unexpected situations that may arise during the process.

Differences Between Google Tag Manager and Google Tag Manager 360

Google’s Google Tag Manager, essentially a simplified version of Google Tag Manager 360, is offered for free. The widespread adoption of GTM as a free platform for small and medium-sized customers likely stems from the fact that it provides essential features without restrictions on functionality or usage. Key differentiators of Google Tag Manager 360 from standard GTM include an unlimited workspace, a 360-degree management environment, and advanced technical support. While it’s difficult to predict what changes may come in the future, it’s certain that GTM 360 currently offers the most suitable tool available¹⁴.

Google Tag Manager Installation

A Google account (either a personal Gmail address or a G Suite account) is required for accessing and configuring Google Tag Manager. Once you have the account, you can access the service via the tagmanager.google.com address and log in. Upon your first login, a “Create New Account” header will display a field for Account Name.

Here, the name you provide will serve as a foundation for the containers you’ll create later and implement as part of your setup. You may prefer headings such as Customers, Projects, and Applications.

Remember, if you’re not careful during this setup phase, you may encounter issues with containers under your accounts. You might end up creating a container for each account, which can lead to confusion both in user management and account administration. Therefore, you should plan ahead and create accounts in advance, then set up containers under the appropriate accounts. During the initial account creation step, you’ll also be asked to provide container details. This will allow you to begin the necessary setup procedures for a web page or application. After specifying the container’s name and type (Web, iOS, Android, AMP), you’ll receive a GTM-ID associated with the container (e.g., GTM-PBTV336), along with a two-part code snippet (snippet) that will be used with the ID. The first snippet should be placed on every page of your website and/or application, as described in the explanation section, while the second snippet should be placed immediately after the tag.

The installation process is extremely important. You must be aware that incorrect or parameter-based installations may render GTM non-functional¹⁵, and as a result, the services you’ve integrated through GTM may not operate stably.

gtm.js

IMPORTANT RULES:

1. Maintain the original formatting (markdown, HTML tags, links, etc.)
2. Keep technical terms and proper nouns as appropriate
3. Preserve code blocks and technical syntax exactly
4. Maintain the same tone and style
5. Only output the translated text, no explanations or comments

The first part of the two-piece code used during installation consists of a JavaScript function. This function ensures asynchronous and sequenced communication (with GTM-integrated services) regarding page-level cookies, client- and/or user-defined¹⁶ dataLayer events/interactions (view, click, user ID, city, etc.). The iframe code serves as an alternative for data collection in scenarios where JavaScript is not active. On the other hand, the Server-side tagging option is also certainly worth considering¹⁷.

You can verify whether the installation and integrations are functioning correctly using Tag Assistant. For more details on “What is Tag Assistant? How to Use It?”, please refer to the section below.

Google Tag Manager Usage

I previously mentioned that Google Tag Manager integrates practically with other Google services (Analytics, Adwords, Search Console, Do). Let’s now quickly set up these integrations at the most basic level. Instead of adding a meta tag for Search Console setup, selecting the Google Tag Manager option will authorize your website’s ownership. In addition, you do not need to perform any integration with a container. After completing the integration processes, you will need to create a version release. Simply clicking the “Publish” button is sufficient. Any unpublished changes will not appear in test or production environments. In fact, if no publication has been made after the initial container installation, the relevant GTM ID will be inaccessible, resulting in the code failing to execute.

To test your Google Tag Manager installation, you should use the Tag Assistant extension provided by Google. In addition, you can also utilize your browser’s Inspect feature. Once the extension is installed, you’ll be able to view the Google Tag Manager integrations on the web pages you visit in Chrome. Through this extension, you can access various information about the integrations, installations, and parameters within GTM, including whether they are functioning properly. For example, let’s assume that the Google Analytics code has been added both directly and through GTM. In this case, Tag Assistant will notify you of a duplicate installation. Another example would be to check on which pages the Google Ads conversion code is active. In this case, simply clicking the extension button will suffice. All the codes that have been triggered on the page you’re currently on will be listed within the extension window. You can find detailed information about usage below.

Tag Assistant and Code Verification

In addition to the Chrome extension Tag Assistant, I recommend installing the dataslayer developed by Sean Adams¹⁸ on your Chrome browser. Through the Preview mode, you’ll be able to see the codes and integrations you’ve added, as well as determine whether they have been triggered, what values they’ve received upon triggering, and identify the root cause of any issues.

To make these adjustments, you’ll need to click the Preview button next to the Publish button in your GTM account. Then, you should verify that the container’s latest modifications are reflected by clicking the “Refresh” link under the yellow section that appears.

After refreshing, we should navigate to the relevant web page and refresh the page as well. Along with the refresh, we will be able to see the services that we integrated with Google Tag Manager in the lower section of the page, including both active and inactive tags, variables, and the values they are currently receiving. This allows us to verify inconsistencies in trigger configurations, dataLayer content (such as product information in e-commerce setups, user data, etc.), JavaScript functions, and many other configurations.

Google Tag Manager Tag Assistant & Tag Manager Preview Mode

The usage described above has recently been replaced by the new Google Tag Manager Preview Mode¹⁹. The new interface provides the ability to inspect tags through a separate tab, rather than within the existing page. While this may initially appear a bit confusing compared to the previous method, the preview mode offers a more reliable result because it is linked to the connection. As before, you must click the Preview link to access the assistant. After that, the Tag Assistant will open as a new tab.

Upon opening the tab, if you specify the URL of the page where you’d like to perform the debug operation, a new tab will open with the relevant URL appended with the ?gtm_debug=x parameter.

From the Tag Assistant tab page, you can view all tags and their statuses associated with the page. Again, in the bottom-right corner of the last opened page, you can see whether Google Tag Manager (GTM) is active (connected). Once the GTM connection is established, a blinking icon will appear in the Tag Assistant tab.

After this stage, as in the previous Assistant usage, you can view information about the tags on the page through the Tags, Variables, Data Layer, and Errors tabs, and also view tag event activities from the left panel.

*[GTM]: Google Tag Manager
*[GA]: Google Analytics

Footnotes

1. Google Analytics Help Community ↩
2. Installing Dot Tags. developer network ↩
3. Dynamic Tag Management. Adobe ↩
4. Tealium. Customer Data Hub and Enterprise Tag Management ↩
5. Signals Analytics ↩
6. Segment. Customer Data Platform (CDP) ↩
7. Ensighten. Website Security & Privacy Compliance ↩
8. Qubit. Personalization Resources ↩
9. AT Internet. The cross-device and predictive analytics solution ↩
10. Yottaa. Accelerate and Secure Web and Mobile Apps ↩
11. Triggers. Tag Manager Help ↩
12. Tag Management Usage Distribution in the Top 1 Million Sites. Trends. Builtwith ↩
13. [Can Taner. (2015). Bizce Google Tag Manager. Sherpa Blog ↩
14. Compare. Tag Manager. Google Marketing Platform ↩
15. Paul Boocock. (2020). Integrating javascript tags with Google Tag Manager. GitHub ↩
16. JavaScript library for working with dataLayer message queues. google/data-layer-helper. GitHub ↩
17. Server-side tagging. Google Tag Manager ↩
18. A Chrome extension to enhance tag management and analytics debugging. sean-adams/dataslayer. GitHub ↩
19. Simo Ahava. (2020). Tag Assistant Preview Mode In Google Tag Manager ↩