Google Tag Manager from scratch: container, tags, triggers and variables

You just installed Google Analytics, but your conversion data doesn't add up. Or you have a contact form that doesn't track submissions, and you spend hours searching for code to paste into your theme. It happens to everyone. The solution is Google Tag Manager, and the good news is you don't need to write code by hand to use it well.

We, at Meteora Web, have been working with GTM since version 1 — back when it was still called Google Tag Manager without built-in debugging. We've used it to track e-commerce with WooCommerce, lead campaigns with custom forms, scroll events, button clicks, all without touching a single line of PHP. In this guide we'll walk you through the three fundamental building blocks — container, tags, triggers — plus variables, which are the real engine of customization.

Why a Tag Manager instead of hardcoded code

The problem with hardcoded code is simple: every time you need to add a pixel, modify an event, or activate a new script, you have to update the theme, run a deploy, and often wait for the development queue. With GTM you insert a single snippet into the site (you do it once), and everything else you manage from the control panel, without touching the code. Plus you get a debug environment, versions, and instant rollbacks.

The common mistake: thinking GTM is only for Analytics. Actually you can manage Meta Pixel, LinkedIn Insight, third-party scripts, cookie banners, A/B testing — one single control point instead of ten snippets scattered across the theme. We once, for a client with 15 different scripts, reduced the request load by 40% by centralizing everything in GTM and scheduling tags with engagement triggers.

Container: the container that rules everything

The container in GTM is the container you install once in your site. It holds all tags, triggers, and variables for that project. Each site (or environment) usually has one container. You can have multiple containers for multilingual, multi-brand, or environments (staging vs production).

How to create and install the container

Go to Google Tag Manager, create an account, then a container. Choose the platform type (Web, AMP, iOS, Android). For a website, select Web. You'll get two code snippets: one to insert right after the <head> tag and one right after the <body> tag. Copy and paste them into your site. If you use WordPress with a custom theme or a page builder, you can insert them via the header.php file or a plugin like Insert Headers and Footers.

<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Once installed, the container is empty? Don't worry. Every tag you create will be added inside. You can create versions of the container, publish only when you're sure, and roll back with a click if something goes wrong.

Tags: what you want to happen

A tag is an instruction that tells GTM to run a certain piece of code when a condition occurs. The most common tags are:

Google Analytics: GA4 Configuration and GA4 Event – to send data to GA4.
Google Ads Conversion Tracking – to track conversions from ads.
Meta Pixel – for Facebook/Instagram tracking.
Custom HTML – for any custom script (chatbot scripts, heatmaps, etc.).

Practical example: you want to send a GA4 event every time a user clicks a “Request a quote” button.

1. Create a new tag, type “Google Analytics: GA4 Event”.
2. Enter your measurement ID (G-XXXXXXXXXX).
3. Define the event name, e.g. “click_quote”.
4. Attach a trigger that listens for clicks on that button (see next section).

Important: don't create a tag without first configuring a trigger. A tag without a trigger will never fire. It sounds obvious, but we see it often.

Triggers: when that tag fires

Triggers are the conditions that cause a tag to fire. Without them, the tag stays inactive. GTM provides many built-in trigger types:

Page View – fires when a page loads (all pages, only some, or by page type).
Click – all clicks or only those on specific classes/IDs.
Scroll – when the user scrolls past a certain depth (e.g., 50%, 75%).
Form Submission – when a form is submitted.
Custom Event – custom events pushed via dataLayer.

Example: trigger for click on a button with a specific class

Suppose you have a button with the class btn-quote. You want to track every click on it.

1. Create a new trigger of type “Click – Just Links” (or “Click – All Elements” if it's not a link).
2. Set the condition: “Click Element” contains “btn-quote”.
3. Give the trigger a name, e.g. “click_quote”.
4. Save.

Then attach this trigger to the GA4 Event tag created earlier. Done. Now every click on that button will send the “click_quote” event to GA4.

Common mistake: using “Click – All Elements” when you could use “Just Links” (more performant). Or never testing with Preview. We once fixed a case where the trigger didn't work because the button was inside an iframe – GTM triggers don't penetrate cross-origin iframes.

Variables: the data the tag can read

Variables are the nervous system of GTM. They allow you to extract information from the environment or the dataLayer and use them inside tags. Without variables, tags are mute: they don't know who clicked, on which page, what value was sent.

There are two types of variables:

Built-in – provided by default in GTM. You enable them in the “Variables” section (e.g., Click URL, Page Path, Page Title, Referrer).
User-defined – you create them: types like “JavaScript variable”, “Data Layer Variable”, “Constant”, “Custom JavaScript”, etc.

Useful built-in variables (enable them now!)

Go to “Variables” → “Configure” and enable at least: Click Element, Click URL, Page Path, Page Title, Scroll Depth, Form ID, Form Text. You'll need them for almost every tag.

Data Layer Variable: the heart of structured data

The dataLayer is a JavaScript array where you can push data before tags fire. GTM reads these values as “Data Layer Variables”. Example: in a WooCommerce e-commerce store, you can push the product price to the dataLayer when the user adds to cart.

dataLayer.push({ ecommerce: null });  // Clear previous ecommerce object
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "EUR",
    value: 19.99,
    items: [{
      item_id: "SKU123",
      item_name: "T-shirt",
      price: 19.99,
      quantity: 1
    }]
  }
});

Then in GTM create a “Data Layer Variable” named “ecommerce.value”. In the GA4 Event tag use {{ecommerce.value}} to populate the “value” parameter.

When to use Custom JavaScript variables

If you need to transform a piece of data (e.g., extract only the file name from a URL), you can write a small JavaScript function inside a “Custom JavaScript” variable. Be careful: it must be fast and not make async calls. We once created a variable that cleans the page title by removing the brand name, to get cleaner data in GA4.

How to test before publishing

GTM has a powerful preview (or debug) environment. Click “Preview” in GTM, a window opens that shows you in real time which tags fire, which don't, and the variable values. Navigate your site with that console open. If a trigger doesn't fire, you see immediately why. Publishing without testing is like piloting a plane without a checklist. We've seen clients do it and then call us in emergency.

Managing versions

Every time you publish, GTM creates a version. You can add notes (e.g., “Added Facebook Pixel tag”, “Fixed contact form trigger”). If errors occur, restore a previous version with one click. Never publish without a description, because six months from now you won't remember what you did.

In summary — what to do now

Install the container snippet on your site (once).
Enable essential built-in variables (Click Element, Page Path, etc.).
Start with a simple tag: GA4 Configuration with All Pages trigger. Then a GA4 Event on a button click.
Always use Preview before publishing. Don't trust your eyes, trust the debugger.
Give clear names to every tag, trigger, and variable. E.g., “GA4 – Event – Click quote” instead of “Tag 1”. Future you will thank you.

Want to dive deeper into GA4 setup? Check our guide on Google Analytics 4 from scratch. Or if you need to track forms, our Google Ads from scratch guide explains how to integrate conversions.

And remember: a tag manager is not a magic tool. If you don't know what to track, don't track anything. We, at Meteora Web, always start with a question: “What decision will you make with this data?” If you don't have an answer, those tags are useless. But if you do, GTM is the cleanest way to get the right numbers.