top of page
Blakfy logo: digital marketing agency

Google Tag Manager: Complete Setup and Configuration Guide

⠀

Every time you want to add a tracking pixel, a heatmap script, or a conversion snippet, the traditional workflow is the same: file a ticket, wait for a developer, deploy, test. Google Tag Manager (GTM) eliminates that dependency. It gives marketers and SEO professionals a single interface to deploy and manage third-party scripts without writing a line of code.

This guide walks you through the complete GTM setup — from creating your first container to adding GA4, conversion tracking, and using preview mode to verify everything works before it goes live.

⠀

⠀

What Is Google Tag Manager and Why Does It Matter?

⠀

Google Tag Manager is a free tag management system that lets you add and update marketing tags, analytics scripts, and tracking pixels through a web interface. Instead of embedding individual scripts directly in your HTML, you install one GTM snippet — and then manage everything else inside GTM's dashboard.

The practical benefit is significant. When you need to add a Facebook Pixel, a LinkedIn Insight Tag, or a custom event for GA4, you do it inside GTM in minutes. Your developer doesn't need to be involved. Changes are versioned, documented, and reversible.

GTM also helps site performance when used correctly. You can load tags asynchronously, control when they fire, and prevent unnecessary scripts from loading on pages where they're not needed.

⠀

⠀

GTM vs. Adding Tags Directly to Your Site

⠀

Adding scripts directly to your site's <head> or <body> seems simpler at first. But as your tag count grows, this approach creates real problems. You end up with dozens of scripts scattered across templates, no version control, and no easy way to disable a specific tag without a deployment.

GTM centralizes all of that. Every tag has a name, a type, a trigger, and a version history. If a tag breaks something, you roll back to the previous container version in one click. That level of control simply doesn't exist when tags are hardcoded.

The tradeoff: GTM itself adds a small amount of JavaScript overhead. For most sites, this is negligible — especially since GTM loads asynchronously. For extremely performance-sensitive pages, you'll want to be disciplined about what you add and when it fires.

⠀

⠀

Key Concepts You Need to Understand

⠀

Before touching GTM's interface, get clear on four core concepts.

Container — A container is your GTM workspace tied to a specific website or app. All tags, triggers, and variables for a site live inside one container. You can have multiple containers under a single GTM account (useful if you manage multiple sites).

Tags — A tag is a snippet of code or a configured integration that sends data to a third party. GA4 base configuration, Google Ads conversion tracking, and Facebook Pixel are all tags. GTM has built-in tag templates for the most common tools, so you often don't need to write any code.

Triggers — A trigger tells GTM when to fire a tag. "Page View" fires on every page load. "Click — All Elements" fires when anything is clicked. "Form Submission" fires when a form is submitted. You can stack conditions on triggers to make them highly specific.

Variables — Variables are dynamic values that tags and triggers reference. GTM has built-in variables (Page URL, Click Text, Form ID) and lets you create custom ones (JavaScript variables, data layer variables, lookup tables).

⠀

⠀

How to Install GTM on Your Site

⠀

Step 1: Go to tagmanager.google.com and create a new account. Give it your company name. Then create a container — name it after your website, select "Web" as the platform.

Step 2: GTM will provide two code snippets. The first goes in the <head> of your HTML, as high as possible. The second goes immediately after the opening <body> tag.

<!-- In <head> --> <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> <!-- After opening <body> tag --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

⠀

Step 3: Replace GTM-XXXXXXX with your actual container ID. If you're on a CMS like WordPress, plugins like "GTM4WP" handle the installation for you.

Step 4: After installing, open GTM, click Preview, and verify the container loads on your site. You should see the GTM debug panel at the bottom of your browser.

⠀

⠀

How to Publish a Container

⠀

GTM changes are not live until you publish. This is intentional — it lets you build and test without affecting real visitors.

  1. Make your changes (add tags, triggers, variables)

  2. Click Preview to test in debug mode

  3. Once confirmed, click Submit in the top right

  4. Add a version name and description (e.g., "Added GA4 + Ads Conversion")

  5. Click Publish

⠀

Every publish creates a new version. Previous versions are accessible under Versions in the sidebar. Rolling back means selecting an old version and republishing — it takes about 30 seconds.

⠀

⠀

How to Add GA4 via GTM

⠀

GA4 Configuration Tag

This is the base tag that loads the GA4 library and sends page view data.

  1. In GTM, go to Tags → New

  2. Click Tag Configuration and select Google Analytics: GA4 Configuration

  3. Enter your Measurement ID (format: G-XXXXXXXXXX, found in GA4 → Admin → Data Streams)

  4. Set the trigger to All Pages

  5. Name the tag something clear like "GA4 — Configuration"

  6. Save

⠀

GA4 Event Tags

For custom events (button clicks, form completions, scroll depth), create separate Event tags.

  1. Go to Tags → New

  2. Select Google Analytics: GA4 Event

  3. Set the Configuration Tag to your GA4 Configuration tag

  4. Name your event (e.g., contact_form_submit)

  5. Choose or create a trigger that matches the specific user action

  6. Save

⠀

At Blakfy, we recommend naming events consistently using snake_case, following Google's recommended event schema where possible to keep GA4 reports clean.

⠀

⠀

How to Add Google Ads Conversion Tracking

⠀

Step 1: In Google Ads, go to Goals → Conversions → New Conversion Action. Choose "Website" and define your conversion (purchase, lead form, phone call, etc.).

Step 2: Google Ads will provide a Conversion ID and a Conversion Label. Keep these handy.

Step 3: In GTM, create a new tag using the Google Ads Conversion Tracking template. Enter the Conversion ID and Label.

Step 4: Create a trigger that fires on the thank-you page (URL contains /thank-you) or on the specific click/form submission that represents a conversion.

Step 5: Test with Preview mode, then publish.

One critical note: do not fire the Ads conversion tag on every page. It must only fire when an actual conversion happens, otherwise your conversion data will be completely unreliable.

⠀

⠀

Preview Mode and Debugging

⠀

Preview mode is GTM's built-in testing environment. When you click Preview, GTM opens a separate tab with your site connected to Tag Assistant. Every tag that fires, every trigger that activates, and every variable value is visible in real time.

How to use it effectively:

  1. Navigate to the page where your tag should fire

  2. In the Tag Assistant panel, check if the tag appears under "Tags Fired"

  3. If it doesn't fire, click on the trigger in the debug panel to see why conditions weren't met

  4. Check variable values to confirm they're populated correctly

⠀

Common issues: triggers firing on the wrong pages, variables returning undefined, or tags firing multiple times per page load. Preview mode surfaces all of these before they affect real data.

⠀

⠀

Version History and Rollback

⠀

Every time you publish, GTM saves a snapshot of your entire container. You can see all versions under Versions in the left sidebar. Each entry shows who published, when, and the version notes (if you added them — and you should always add them).

To roll back:

  1. Go to Versions

  2. Click the version you want to restore

  3. Click the three-dot menu → Publish

⠀

This takes effect immediately. There's no diff or merge — the older version replaces whatever is currently live. This is why version notes matter. "Removed broken LinkedIn tag" tells you exactly which version to restore to without guessing.

⠀

⠀

Built-In Variables vs. User-Defined Variables

⠀

GTM comes with built-in variables that cover the most common tracking needs. These are disabled by default and need to be turned on under Variables → Configure. The most useful ones include Page URL, Page Path, Click Element, Click Text, Click URL, Form Element, Scroll Depth, and Video URL.

User-defined variables are custom variables you create for specific use cases. The most important types:

  • Data Layer Variable — reads values pushed to the dataLayer array by your site's code (e.g., transaction value, user ID, product name)

  • JavaScript Variable — reads a JavaScript global variable from the page

  • Constant — stores a fixed value you want to reuse across multiple tags (e.g., your GA4 Measurement ID)

  • Lookup Table — maps one value to another (e.g., maps page paths to content categories)

⠀

Data layer variables are especially powerful for e-commerce tracking. When your site pushes purchase data to the dataLayer, GTM can read it and pass it to GA4 Enhanced Ecommerce and Google Ads without any additional code changes.

⠀

⠀

How to Prioritize Your GTM Implementation

⠀

A clean GTM setup requires discipline. Here's a sensible order of operations:

  1. Install the GTM snippet and verify it loads correctly

  2. Add the GA4 Configuration tag on all pages

  3. Add Google Ads Conversion Tracking for your primary conversions

  4. Enable built-in variables you actually need

  5. Add any other third-party tools (pixels, chat scripts, heatmaps)

  6. Set up custom event tracking based on your analytics plan

  7. Document every tag with clear naming conventions

⠀

Resist the temptation to add every script imaginable. Each tag is a performance cost. Keep your container lean — only add what you actively use and review.

⠀

⠀

FAQ

⠀

Do I need developer access to install GTM?

You need a developer for the initial installation of the GTM snippet into your HTML. After that, all tag management is done inside GTM without code changes.

Will GTM slow down my website?

GTM loads asynchronously, so it doesn't block page rendering. However, the scripts loaded through GTM (pixels, analytics, chat tools) do add weight. The solution is to load tags only where they're needed and use GTM's built-in firing conditions.

Can I use GTM for tracking on a single-page application (SPA)?

Yes, but it requires additional setup. SPAs don't trigger traditional page view events on navigation. You'll need to configure GTM to listen for History Change events and fire a custom page view trigger instead of the standard All Pages trigger.

How do I know if a tag is firing correctly?

Use GTM's Preview mode to see real-time tag firing data while you browse your site. For GA4 tags specifically, the DebugView in GA4 (Admin → DebugView) shows live events, which makes verification straightforward.

bottom of page