Google Tag Manager Complete: The Definitive Pillar Guide for Tracking • Meteora Web Agency

Do you need to install a pixel, an analytics code, a conversion tracking? Every time marketing requests a new script, you have to call the developer. Or open the header.php file and paste code you don't understand. Then GDPR arrives, you have to manage consents, and the situation becomes a nightmare. No, it doesn't work that way.

If you work with digital, Google Tag Manager (GTM) is the Swiss army knife of tracking. Here at Meteora Web, we use it on almost every project we handle. Because it separates tag management from site development, gives you control without touching code, and – most importantly – allows you to measure without waiting for a backlog ticket. In this pillar guide, we take you from basic setup to advanced implementations, with real examples you can copy and paste.

What is Google Tag Manager and why you should use it now

GTM is a tag management system. It does not do tracking itself: it orchestrates all the code snippets that send data to third parties – Google Analytics 4, Meta Pixel, LinkedIn Insight Tag, Hotjar, and so on. Instead of inserting each script manually into your site, you insert ONE GTM container, and from there manage everything via web.

Why it pays off? Because it reduces technical debt. You no longer have to wait for the developer to add a pixel for a temporary campaign. You can publish changes in minutes, not days. And above all: you can centralize consent logic: a tag fires only if the user has consented. In an era of privacy by design, that's not optional.

Common mistake: thinking GTM is only for marketers. Wrong. GTM is a technical tool. If you don't understand how the data layer or triggers work, you risk breaking tracking. We often see tags that fire twice or never fire at all. That's why in this guide we explain the why before the how.

Immediate actions: Create a Google Tag Manager account (tagmanager.google.com) and get ready to create your first container. If you already have a site, you can install the container without risk – we'll see how soon.

Container, Tag, Trigger, Variable – the GTM vocabulary

Before writing a line of configuration, let's clarify the four fundamental elements:

Container – the unique container for your website (or app). Each site has its own container. You can have multiple environments (live, staging).
Tag – the snippet of code that performs an action, e.g., sending a pageview to GA4 or loading the Facebook pixel.
Trigger – the condition that fires the tag. Examples: “page view”, “click on this button”, “form submission”.
Variables – dynamic data you can use in tags and triggers. For example, the page URL, event type, product value.

Think of GTM as an event-based system: when something happens (trigger), execute something else (tag), possibly using context data (variables).

Practical advice: when configuring a tag, always ask: “what should trigger it?” and “what data do I need to pass?”. If you answer, you already have 70% of the work done.

Installing GTM on your site: the code you will never touch again

Installation is simple, but must be done correctly. The GTM container provides two snippets:

Script in the – place this code right after the <head> tag. It is asynchronous and does not block rendering.
Iframe (fallback) in the – used only if JavaScript is disabled; place it right after the opening <body> tag.

If you use WordPress, you can insert them via the header.php file or with a plugin like Google Site Kit (we don't recommend plugins that add unnecessary overhead, but it works). If your theme has an options panel, there is often a “Head Script” field. Alternatively, edit the functions.php of your child theme:

add_action('wp_head', function() { ?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<?php });

add_action('wp_body_open', function() { ?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php });

NB: Replace GTM-XXXXXX with your container ID. After installation, verify it with preview (more on that later).

Implementing GA4 with GTM: configuration tag and events

Google Analytics 4 is no longer installed with the gtag.js snippet directly in code. Or at least, it shouldn't be. The best way is to use GTM with a GA4 configuration tag. This tag loads the base library (gtag) and sets the property. Then you can add separate event tags.

In GTM, create a new tag of type “Google Analytics: GA4 Configuration”.
Enter your Measurement ID (format G-XXXXXXXX).
Set the trigger to “All Pages” (or “Initialization – All Pages” to get the earliest event).
Save and publish.

Now GA4 is active. For custom events, create a tag of type “GA4 Event”. For example, to track a lead generation:

// Trigger: specific form submission
// Variable for value: {{Form Value}} (if populated via data layer)
// GA4 Event tag: event name 'form_submit', with parameters

Caution: GA4 has a limit of 25 parameters per event. Don't fill the data layer with hundreds of variables. Choose those that matter for analysis.

The Data Layer: the true engine of dynamic data

The data layer is a data structure (a JavaScript array) that GTM uses to communicate with your site. When something important happens – a transaction, a purchase, a product view – your code pushes an object into the dataLayer. GTM reads that data and uses it in tags.

Classic e-commerce example:

dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'T12345',
    value: 99.99,
    currency: 'EUR',
    items: [
      { item_id: 'SKU001', item_name: 'Camicia Linosa', price: 49.99, quantity: 1 },
      { item_id: 'SKU002', item_name: 'Pantalone Relax', price: 50.00, quantity: 2 }
    ]
  }
});

To make it operational, you must do two things: (1) ensure the data layer is declared BEFORE the GTM snippet (usually the GTM snippet initializes an empty array: window.dataLayer = window.dataLayer || [];) and (2) configure data layer variables in GTM to extract values. For example, if you want to send the order value to GA4, create a variable of type “Data Layer Variable” called ecommerce.value.

Common mistake: pushing data after the tag has already been triggered. Use the event in the push to synchronize: the event name (e.g., 'purchase') becomes the trigger.

Meta Pixel and LinkedIn Insight Tag with GTM

The Meta Pixel (Facebook CAPI and standard) should be integrated via GTM to manage consents and centralize. Create a tag of type “Custom HTML” and paste the base pixel code (the one with fbq('init', 'PIXEL_ID')). Set the trigger to all pages, but activate it only when consent is given (see GDPR section).

For standard events (Purchase, Lead, AddToCart) use the same method: custom HTML with fbq('track', 'Purchase', {value: 99.99, currency: 'EUR'});. You can extract values from the data layer with GTM variables.

LinkedIn Insight Tag installs similarly: copy the code from LinkedIn Campaign Manager into a Custom HTML tag, trigger on all pages. LinkedIn conversion tracking requires specific events (e.g., lead, purchase) that you can fire on specific pages or via data layer.

Tip: always use debug mode to verify that pixels fire correctly. With GTM Preview you can see if the tag activates and if the parameters are correct.

Custom HTML Tag: when to use it and how to use it (security aware)

Custom HTML tags are the escape valve: you can insert any JavaScript or HTML snippet. It is powerful but dangerous. Syntax errors can bring down the entire container or create conflicts. Golden rules:

Use them only for code that does not have a native template in GTM (e.g., Hotjar, LinkedIn, custom pixels).
Always include <script> in the tag.
Don't overuse: every custom tag increases complexity and debugging difficulty.
Enable “Support document.write” only if strictly necessary (not recommended).

Example of a custom tag to send an event to an internal endpoint:

<script>
  (function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.yoursite.com/track');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
      event: 'custom_lead',
      value: {{Page URL}}
    }));
  })();
</script>

Preview, Debug and Workspace: publish without errors

GTM has a preview mode that allows you to test tags before publishing. Activate it from the GTM panel: click “Preview” and a window will open with your connection in debug. Browse your site and see in real time which tags fire, which do not, and the available variables.

Moreover, every change in GTM is saved in a workspace. You never publish directly: you create a version, then publish it. This allows multiple people to work simultaneously, with rollback capability. We recommend always using separate workspaces for different features.

Common mistake: publishing a tag without testing in preview. We often see pixels firing on every click because the trigger was too generic. Use preview, check the fired tags, and only then publish.

Advanced tracking: scroll depth, click tracking, form submission

GTM offers built-in triggers for common events. Here's how to implement three advanced tracking features:

Scroll Depth

Use the “Scroll Depth” trigger with thresholds (e.g., 25%, 50%, 75%, 100%). Set a GA4 Event tag with name scroll_depth and parameters like percentage. Useful to understand how much content is read.

Click Tracking

Two approaches: Click - All Elements (to collect all clicks, beware of volume) or Click - Just Links. To target specific buttons, use the “Click - Just Links” or “Click - All Elements” trigger with a CSS selector variable. Example: assign a class btn-tracking to the button, then in GTM create a variable “Click Element” and filter by CSS selector .btn-tracking.

Form Submission

The “Form Submission” trigger captures form submission. You can combine it with a variable that extracts the button text or form ID. Caution: it only works with standard HTML forms (not AJAX without a native submit event). For AJAX forms, push a custom event in the data layer after the server response.

$('#myForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({...}).done(function() {
        window.dataLayer.push({
            'event': 'formSubmitted',
            'formID': 'myForm'
        });
    });
});

GTM and GDPR: consent mode and CMP

GDPR is not an option. Every tag that sends personal data (including analytics and advertising) must respect user consent. GTM integrates with CMPs (Consent Management Platforms) through Consent Mode from Google or with custom tags.

Consent Mode v2 allows you to pass the consent state (granted/denied) for four types: ad_storage, analytics_storage, ad_user_data, ad_personalization. You can set GTM tags to fire only if consent is granted. Additionally, GA4 and Google Ads automatically respect these signals.

In practice: install a CMP (e.g., Cookiebot, OneTrust, or our custom solution if you prefer no recurring fees). The CMP updates the data layer with consent. Then in GTM, in the GA4 Configuration tag, enable “Consent Overview” and select “Send consent updates to Google”. For other tags, use the “Consent Initialization – All Pages” trigger and set conditions.

Critical mistake: loading tags before consent. Use the “Consent Initialization” trigger for tags requiring consent, and “Page View – All Pages” only for technical tags (e.g., internal chat pixel that does not track personal data).

GTM for E-commerce: enhanced ecommerce data layer

If you run an e-commerce, GTM is your best friend. GA4 Enhanced Ecommerce requires a structured data layer according to Google's schema (ecommerce object). Key events: view_item_list, view_item, add_to_cart, remove_from_cart, purchase, add_payment_info, begin_checkout.

Example for add_to_cart:

dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 49.99,
    items: [{
      item_id: 'SKU001',
      item_name: 'Camicia Linosa',
      price: 49.99,
      quantity: 1,
      item_category: 'Clothing'
    }]
  }
});

In GTM, create a GA4 Event tag with name add_to_cart and associate the data layer attributes as parameters. The trigger is the add_to_cart event you pushed.

Caution: verify that the data layer is populated at the correct moment (e.g., after the user clicks “Add to cart”, not before). Use debug mode to check execution order.

In summary – what to do now

Create a GTM account and install the container on your site (even on staging for testing).
Configure GA4 with a configuration tag and at least one basic event (e.g., page_view).
Add Meta Pixel and LinkedIn with Custom HTML tags, respecting consent.
Learn to use the data layer for custom events: push a test event and verify with Preview.
Never publish without testing. Use Preview and verify in GA4 console or Facebook Pixel Helper.
Integrate a CMP and enable Consent Mode.
For e-commerce, implement the enhanced ecommerce data layer.

GTM is not magic: it's discipline. If you learn to manage it well, you stop depending on the developer for every little tracking. And marketing will thank you.

We, at Meteora Web, use it every day for our clients. If you have a complex project or want an audit of your current GTM, contact us. Sometimes the problem is behind a wrong trigger.