Collect data on your website

If you have a website, you probably want to understand what’s going on:

• which pages are visited?
• which buttons are clicked?
• Where are your visitors coming from?
• Are my visitors converting?

You may also be advertising to attract more visitors to your site, and want to get the best possible return on your investment.

To do this, you need to send data from your site to various platforms, such as web analytics tools (to understand what your visitors are doing) or advertising networks (to optimize your ads).

In the diagram above, you can already see the Google Analytics 4 tool, but not yet the Google Tag Manager tool. Don’t worry, we’ll go into more detail later in this article. But first, let’s go back to the more traditional way of connecting your website to your various tools.

Traditional (and complicated) way to connect GA4 and all your tools

When you create a Google Analytics 4 (GA4) property, you need to install a specific code on your website in order for it to work properly. This code detects actions taken on your site, such as page loads or button clicks, and then sends this data to your GA4 property.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J20750SC8R"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-J20750SC8R');
</script>

GA4 then uses this data to generate various reports to understand where your visitors are coming from and what they’re doing on your site.

Each GA4 property has a unique identifier, such as G-123 and other numbers/letters (in this example it’s G-J20750SC8R).

Installing the GA4 code is therefore a way of sending data to your GA4 property. This code can be added by a developer or via a plugin/extension. If you use a plugin to install the GA4 code, it will usually ask you for this identifier starting with G- to send the data to the right Google Analytics property.

However, GA4 is often not the only platform you want to connect to. You may also need to add code for :

• the Meta pixel (for Facebook/Instagram ads)
• Google Ads
• Tiktok pixel

Each of these platforms will require you to install specific code on your site. As with GA4, these scripts can be installed by a developer or via dedicated plugins.

But by adding all this code - GA4, Pixel Meta, Google Ads, TikTok, etc. - you can quickly end up with a “big mess”.

It becomes difficult to know exactly where each code is installed: directly in the site code? via which plugin? a mix of both?

The arrival of Google Tag Manager: the solution for managing your scripts, pixels, tags…

This is where tag management systems like Google Tag Manager (GTM) come in. GTM has been specifically designed to solve the complexity of installing and managing multiple tracking scripts (also known as pixels, tags, code snippets, etc.).

With GTM, instead of installing each platform’s code separately on your site, you install a single code: that of Google Tag Manager. As with other scripts, GTM code can be installed by a developer or via a plugin (for example, there’s the GTM4WP plugin for WordPress and the Addingwell application for Shopify).

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W5S57WLF');</script>
<!-- End Google Tag Manager -->

Each Google Tag Manager container has a unique identifier, such as GTM-123 and other numbers/letters (in this example it’s GTM-W5S57WLF).

The essential difference is that once the GTM code has been installed on your site, all tracking management takes place within the GTM interface. In most cases, you no longer need to modify your site to add or modify a script.

In the GTM interface, you add “tags”. A tag is a script, pixel or piece of code that GTM will inject into your site when a certain condition is met. These tags are configured to send data to specific platforms such as GA4, Meta, Google Ads or TikTok. You therefore install a different type of tag in GTM for each platform you wish to connect.

How does GTM simplify things?

Using Google Tag Manager makes it much easier to set up and manage tracking codes. You configure your tags via a user-friendly interface.

With preview mode

One of GTM’s invaluable features is its preview mode, which lets you test modifications made in GTM before they go online. You can think of these changes as a draft. Once you’ve checked that everything’s working properly, you can publish your changes. As soon as they are published, they become active for all visitors to your site.

With community tag templates

The Google Tag Manager community is very large, which means you’ll easily find help on the internet. You can also take advantage of the community tag templates available in the Google Tag Manager gallery to easily connect all your tools.

When your tags are configured and published in GTM, it’s GTM that sends the data from your site to each of the platforms for which you’ve set up tags.

The fundamental difference between GTM and GA4

In summary, the main difference between Google Tag Manager and Google Analytics 4 becomes clear:

• Google Tag Manager (GTM) is a tool that collects data from your website and makes it easy to set up tracking tags and scripts. It offers a centralized interface with major advantages such as preview mode and invaluable help from the community.
• Google Analytics 4 (GA4) is an analysis platform designed to receive data sent by your site (often via GTM) and present it to you in the form of reports.

In a nutshell, Google Tag Manager is the tool that helps you deploy and efficiently manage the codes needed to collect data, while GA4 is one of the platforms that receives and analyzes this data to provide you with reports.