What is Google Tag Manager: learning the basics and setting up from scratch

• What is Google Tag Manager
• Who needs Google Tag Manager and why
• How to create an account in Google Tag Manager
• How to install Google Tag Manager on WordPress
  • How to add code without plugins
  • How to insert code with the WPCode plugin
• How to connect Google Analytics 4 to GTM
• Why is the preview mode needed
• How to track clicks on links on the site
• How to set up Ecommerce events on WooCommerce
• What you get after setting up Google Tag Manager

Beginners often significantly simplify the capabilities of Google Tag Manager, reducing them to the banal insertion of GA4 code, or on the contrary — get lost in the vast functionality and abandon the setup halfway. Meanwhile, GTM allows you to manage not only analytics but also advertising pixels, conversions, custom events, and ecommerce tracking — all from one panel. I tested the tool in my own test sandbox to show you in detail what Google Tag Manager is, how to install and connect it to your site, and set up event tracking for an online store.

What is Google Tag Manager

Google Tag Manager (GTM) — is a free Google tool for installing and managing tracking codes on a website without constant manual editing of web resource files. GTM does not analyze data itself, but only delivers the necessary code to the project pages and determines under what conditions which code to run.

Google Tag Manager consists of three components:

• tag (Tag) — code that performs an action, for example, sends data to GA4;
• trigger (Trigger, in the Ukrainian interface “activator”) — a condition under which the tag must fire: click, page view, form submission;
• variable (Variable) — a value that is substituted into the tag or trigger: page URL, link text, product price;
• container (Container) — a “box” that combines all tags, triggers, and variables for the site, and it is this code that you insert once into the web resource.

Despite its vast capabilities, GTM cannot analyze data, provide access to ready-made reports, or generate its own. This is the main difference between Google Tag Manager and Google Analytics 4: the former only delivers code to the site and decides when to launch it, while the latter analyzes the received data and generates reports.

Who needs Google Tag Manager and why

This tool is extremely useful for any business, online project, and specialist who wants to track data about the target audience, attract customers, and calculate profits. For marketers and analysts, it helps simplify the launch of advertising campaigns and tracking their effectiveness, for business and website owners — save money on programmer services, and for developers — save time usually spent on routine code additions.

When it comes to online projects, Google Tag Manager is needed:

• online stores — tracking purchases, analyzing the behavior of new and regular customers, simplified data transfer to advertising networks for launching ads and dynamic retargeting;
• corporate websites — adding analytics, pixels for advertising on social networks, Google Ads conversions, chat widgets without constant interference in the code;
• SaaS services — tracking product registrations, trial period completions, paid subscription sign-ups, and transferring this data to advertising cabinets;
• information websites — tracking various scroll depths, interactions with media content, transitions via affiliate links;
• one-page websites — analyzing small conversions, such as clicking the “Get Price” button or viewing the “Services” block, plus connecting third-party services for testing different designs and headlines.

At the same time, the owner of a small blog, who does not want to connect anything additional, only needs Google Analytics 4 with default settings. Moreover, analytics can be connected through built-in integrations of themes like Blocksy: just go to Customizer → General → Visitor Engagement and paste the GA4 ID. The same applies to simple portfolios and small websites that are simply created for representation on the internet without plans for development.

How to create an account in Google Tag Manager

Any user can register an account in a few minutes. You need to go through registration, choose a platform (Web, iOS, or Android), and add the system code to your online project.

For example, let's consider how to create an account in Google Tag Manager for a website owner:

1. Go to the official website Google Tag Manager and log into your Google account, then click “Create Account”.

2. Add the account name and select the country.

3. Add the container name and select the platform, for example, Web for the site.
4. Click “Create” and agree to the “Terms of Service Agreement”, after which a form with code snippets will instantly open — we will discuss this later.

Note the moment of adding the container name. On one Google Tag Manager account, you can have multiple different containers, for example, one for the site and one for the mobile application. Within each container, there are its own workspaces that allow several people to make changes simultaneously without interfering with each other.

How to install Google Tag Manager on WordPress

You can add the Google Tag Manager code to a WordPress site using plugins or manually by editing the theme. Among plugins, the most effective and stable are Google Tag Manager for WordPress or the specialized extension for adding any code WPCode.

To demonstrate the registration, setup, and use of Google Tag Manager from scratch, I created a test online store through TasteWP. I installed WordPress 7.0 update, the Twenty Twenty-Three theme, and the WooCommerce e-commerce plugin. I added 4 test products to the store for further event tracking: the best hosting, domain registration, renting a virtual and dedicated server from Cityhost.

How to add code without plugins

You need to copy both code snippets from the GTM workspace and paste them into the site template: the first — immediately after <head>, the second — immediately after the <body> tag. If the theme supports template editing, you can do this directly in the admin panel; if not — you will need an FTP client, such as FileZilla.

On the test site, a modern block theme is installed, so for this method, I had to change it to GeneratePress. So if you also have this or another classic theme with Theme File Editor, then add the Google Tag Manager code as follows:

1. Go to the WordPress admin panel → “Appearance” → “Theme File Editor”.

2. Find header.php.

3. Return to GTM → click on the code → copy the first code snippet.

4. In header.php, immediately after the <head> tag, paste the code.

5. Repeat the same with the second snippet and the <body> tag — it is usually in the same file.

If your theme supports Theme File Editor and has understandable code where it is easy to find <head> and <body>, or you are ready to spend some time connecting via FTP client — you can use this method. But always make backups before such serious changes on the site.

Also read: March 31 — Backup Day. Why it's important not to forget about backups and how to make a backup of your site (instructions)

How to insert code with the WPCode plugin

If your theme does not allow you to edit code through the WordPress admin panel or you do not want to change the template yourself, then the best choice is the free version of the WPCode plugin. You can install and activate it directly from the WordPress directory, add code to the header and body, and it will automatically work across the entire site.

Let's go step by step on how to add Google Tag Manager code with WPCode:

1. Go to the WordPress admin panel → Plugins → Add Plugin and find WPCode.

2. After installation and activation, go to WPCode → Header & Footer.

3. In the Header field, paste the first GTM code snippet, in the Body field — the second, and save the changes.

You can check if you installed the code correctly by viewing the page: go to the site → right-click → “View Page Source” → find the line with “GTM-”. Or even simpler: return to Google Tag Manager and enter your site address under the two code snippets and click “Check”.

Important! On the internet, “Google Tag Manager for WordPress” (GTM4WP) is often referred to as the official Google solution — it is a popular, well-supported, but third-party product. The only plugin that is actually released by the company itself is Site Kit by Google. You can also connect GTM with it, but on budget shared hosting, it sometimes creates several parallel requests to the Google API when loading the dashboard, which on limited plans can lead to temporary server errors.

How to connect Google Analytics 4 to GTM

To connect Google Analytics 4 to Google Tag Manager, you need to create an account in the analytics system. You can find a step-by-step guide for Google Analytics 4 on the Cityhost blog. After that, you will need to add a Google tag (formerly GA4 Configuration) in GTM, which will take a few minutes.

I suggest going step by step through the process of connecting Google Analytics 4 to Google Tag Manager:

1. Go to GA4 → Admin → Data collection and modification → Data Streams, click on the name of the desired data stream (your site) from the list → copy the Measurement ID.

2. Go to GTM → Add tag directly on the main page or Tags → Create through the menu.

3. Click Tag Configuration → Google Tag (do not confuse with Google Analytics — this is for events).

4. Paste the Measurement ID, do not change Triggering, add a tag name, and save.

You have connected Google Analytics 4 to Google Tag Manager, but now you need to check if everything works correctly. And here often a huge confusion arises between the two buttons — Preview and Publish — which are located next to each other.

Why is the preview mode needed

Preview in Google Tag Manager — is a testing mode for the container before publication. It automatically marks your current session in the browser with the _dbg parameter, unlike the debug_mode parameter, which would have to be added manually. Real visitors to the site never appear in DebugView, which allows you not to spoil your own statistics.

So click Preview in the upper right corner of GTM, paste the domain name and click Connect. Your site will open in a new tab, and you need to navigate to several pages, but do not close that new window with your web resource, just minimize it. If you set everything up correctly, you will see in Google Tag Manager Debug — Tags Fired (your tag) and Tags Not Fired — None.

After checking in Preview, changes need to be published through Submit → Publish — only then the container becomes “live” and the tags fire for real visitors automatically. At the same time, publication concerns a specific version of the container at the moment of clicking Publish: if you add a new tag and forget to publish, it will continue to work only in your Preview and will never fire for real visitors, although it will look completely ready in the GTM interface.

Important! For complete and correct data collection on a new Google Analytics 4 account, it may take 24 to 48 hours. However, you can already go to the dashboard and view the report in real-time (Realtime). For example, it shows 1 user from Ukraine: everything works, we have successfully connected Google Analytics 4 to the site through Google Tag Manager.

How to track clicks on links on the site

GA4 can track clicks on external links, but it does not record internal clicks at all. Instead, Google Tag Manager allows you to set up complete tracking of both internal and external links, seeing the link itself and the anchor. To do this, you only need to add the appropriate variables and triggers.

To understand the difference, let's first look at regular click tracking in Google Analytics 4:

1. Go to Analytics → Admin → Data collection and modification → Data Streams → select your web stream → click on the gear next to Enhanced measurement → make sure the Outbound clicks switch is on.

2. Create a page on the site or add two types of links to an existing one: external and internal. For example, I added one internal (Shop) and 4 external (virtual hosting, VPS, renting a physical server, domain name) to “Hello World”.

3. Open this page and click on the links one by one, then go to Analytics → Reports → Realtime overview, find the block “Event count by Event name” — the click event should appear. Click on it and check link_url. For example, I clicked on all the links several times, but Google Analytics 4 only counted clicks on cityhost.ua/uk, while not a single click was recorded on my Shop page.

Now let's discuss how to set up click tracking in Google Tag Manager:

1. Go to GTM → Variables → Configure → check the built-in variables Click URL, Click Text, Click Classes.

2. Go to Triggers → New → Trigger Configuration → Just Links → add a name → Save.

3. Go to Tags → New → Tag Configuration → Google Analytics → GA4 Event and again specify the ID and add Event Name link_click.

4. Here, click on Event Parameters and add parameters: link_url = {{Click URL}}, link_text = {{Click Text}}.

5. At the bottom in Triggering add the created trigger, add a name to the tag and click Save.

6. Click Preview, connect to the site, click on external and internal links on your site, and then in Tag Assistant → Summary check if the link_click tag fired on both clicks.

7. Go to GA4 → DebugView → click on each event and check link_url and link_text. As you can see, everything worked, and now we can track both external and internal links, which was not available in GA4.
8. Finish Preview → return to GTM → click “Submit” → add a version name, for example, “v2 – link click tracking” and click Publish.

For the final check, go to GA4 → DebugView → Event count by Event name → link_click → link_url. For example, I see 2 transitions to the Shop page (internal links), 2 — Cityhost (external links), and one more to my site on the Hello World entry where we tested everything.

Important! Do not confuse two different events in the reports: click with the outbound: true parameter — this is the automatic tracking of GA4 itself, while link_click — is your own event from GTM. They exist in parallel and do not replace each other unless you manually disabled Enhanced measurement.

How to set up Ecommerce events on WooCommerce

To track events such as product card views, adding to cart, and purchases, we also need to set up GTM, as Google Analytics 4 does not track them by itself. First, we install the additional GTM Kit plugin, and then we create custom events in Google Tag Manager.

The peculiarity of WordPress WooCommerce sites is that GA4 and GTM do not know anything about WooCommerce by themselves, as they only read what appears in the dataLayer of the browser, and this Ecommerce plugin does not output data about the product, price, or order ID there by default. Accordingly, we need to build a bridge using our own PHP code, or even simpler — install the GTM Kit plugin:

1. Go to the WordPress admin panel → Plugins → Add Plugin → install and activate.

2. In the plugin settings, specify the GTM Container ID and then just click Save and Continue without changing the default settings.

The GTM Kit has a convenient Template Assistant wizard (Dashboard → Open Template Assistant), which promises to generate a ready file with tags, triggers, and variables for import into GTM. You just need to select the type of site (E-commerce), services (GA4), and specify the Measurement ID. In theory, this is much faster than setting up each tag separately.

However, during testing, I received the error “Error generating template. Please check your connection and try again,” and in the browser console (F12 → Console) there was a message: the request to api.gtmkit.com was blocked by CORS policy — the plugin server did not allow the request specifically from the domain of my test site. This is most likely a feature of the temporary sandbox domain, not a systemic problem of the plugin. But keep this in mind: if you encounter the same error, do not waste time on it — just proceed to manual configuration.

For each of the three events (view_item, add_to_cart, purchase), the sequence is the same. I will show you how to create an Ecommerce event in Google Tag Manager using the example of view_item:

1. Go to Google Tag Manager → Triggers → New → Trigger Configuration → Custom Event.

2. Add Event Name — view_item, leave other data as default, add a name, for example, “CE — View Item” and click Save.

3. Go to Tags → New → Tag Configuration → Google Analytics: GA4 Event → paste the Measurement ID from GA4 and view_item in Event Name, and in the Ecommerce settings select “Send Ecommerce data” → Data source “Data Layer”.

4. In Triggering, select the trigger we created, for example, mine is “CE — View item”, add a name and click Save.

In exactly the same way, create a trigger and tag for add_to_cart, and then — for purchase. Just change the Event Name and the name of the trigger/tag at each step. The Ecommerce, Data Layer, Measurement ID settings remain the same as for view_item.

Trigger for add_to_cart

Tag for add_to_cart

Trigger for purchase

Tag for purchase

When all three triggers and tags are ready, return to Google Tag Manager, click “Submit” and publish the changes (Publish).

What you get after setting up Google Tag Manager

Everything we set up in this article — from connecting GA4 to tracking clicks and ecommerce events — exists for specific reports. With Google Tag Manager, you get the ability to analyze user behavior, track transitions via external and internal links, stages of the purchase process, revenue from each traffic source, lists of individual orders, and of course connect new tools to your online project without interfering with the site code.

Let's look at specific data from Google Analytics 4 through Google Tag Manager:

• Reports → Business objectives → View user engagement and retention → Events — a table with all site events and their count.
• Explorations → Free Form — building your own reports, for example, comparing events with device, country, or traffic source.
• Business objectives → Drive sales → Ecommerce purchases — views, additions to cart, purchases, and revenue for each product separately.
• Business objectives → Drive sales → Purchase journey — a five-step funnel with the bounce rate at each stage.
• Business objectives → Drive sales → Transactions — a list of individual orders with details, such as transaction ID, amount, and other data.
• Business objectives → Generate leads → Traffic acquisition — session duration, events per session, revenue by each traffic source.
• Realtime overview — displaying everything by the second, even before appearing in the reports above.

Google Tag Manager allows you to obtain all the above reports, which are not available with standard GA4 settings. But GA4 is not the only service that can be connected through the same container: Facebook Pixel, Google Ads conversions, TikTok Pixel, or any other advertising and analytical script can also be added just as easily. And most importantly — GTM is constantly evolving, adding new capabilities and services that you can now connect yourself, understanding the basics of working with tags, triggers, and variables.