Master Google Tag Manager: A Step-by-Step Guide

When I first wired up GA4 and GTM in my Next.js 15 site, I thought the hard part was over. I dropped the snippet, published the container, and assumed the data would just flow.

Then I opened the Tag Manager dashboard — and realized I had no idea what to do next.

If you haven't already, read my earlier setup guide first. It covers the GTM ↔ GA4 relationship — why you need GTM as the middleman between your Next.js site and Google Analytics, and the data flow that makes everything work.

This post picks up where that leaves off. It assumes you understand why GTM matters. Now we're tackling the how: mastering the Tag Manager web interface to actually build events that flow cleanly into GA4.

The interface looks abstract at first because you're not writing code — you're building logic with Tags, Triggers, and Variables. By the end of this post, that mental model will click, and the interface will make sense.

Understanding the GTM Mental Model

Before touching anything in the interface, you need to get GTM's three-layer logic straight:

Triggers

Triggers are the conditions that decide when to fire a tag. They're the "when" part of your tracking logic.

Common triggers include:

Page View — fires on every page load or specific pages
Click — fires when someone clicks a button, link, or other element
Form Submission — fires when a form is submitted
Scroll — fires when users scroll to a certain depth
Custom Events — fires based on data layer events you push from your site

Triggers set the rules for when a tag should actually do its thing. Without a trigger, a tag never fires.

Variables

Variables are placeholders that store information and make your tags and triggers more flexible. They help you capture dynamic data and pass it along.

Examples of variables include:

Built-in variables: Page URL, Click Text, Click ID, Click Classes
Data layer variables: Custom information you push from your Next.js app
User-defined variables: Regex patterns, lookups, or computed values

Variables let you customize how tags and triggers behave without hardcoding values. For instance, instead of creating 10 separate tags for 10 different buttons, you can use a single tag with a variable like {{Click ID}} to capture which button was clicked.

How They Work Together

You can think of it like this:

WHEN (Trigger) happens
→ USE (Variables) to get details
→ DO (Tag Action)

For example: "When someone clicks a button with ID newsletter-signup (Trigger), capture which page they're on using {{Page Path}} (Variable), then send a newsletter_signup_click event to GA4 (Tag)."

Once you internalize that, the interface starts making sense.

Step 1: Open the Workspace and Create a New Tag

In your GTM container, go to the Workspace view — that's your sandbox. Click "Add a new tag", give it a name like GA4 - Newsletter Click, and choose "Google Analytics: GA4 Event" as the tag type.

You'll see two fields that matter most:

Configuration Tag: Link your GA4 measurement ID tag here.
Event Name: Something like newsletter_signup_click.

You can add event parameters below to enrich the data — for example:

Parameter	Value
form_location	`{{Click ID}}`
page_path	`{{Page Path}}`

This makes the event way more useful in GA4 later.

Step 2: Create the Trigger

Next, click "Triggering" inside the tag editor, then hit the "+" button to create a new trigger.

Choose Click → All Elements (or “Just Links” if you’re tracking an <a> tag).

Set the conditions that define a “newsletter click.” The cleanest approach is to give each button or form a unique ID in your HTML, like:

<button id="newsletter-homepage">Subscribe</button>

Then in your trigger:

Trigger Type: Click - All Elements
This trigger fires on: Some Clicks
Condition: Click ID equals newsletter-homepage

That’s it — you’ve scoped your event to exactly the right element.

Step 3: Link the Trigger and Tag

Back in your tag, assign this new trigger.

Now you have a complete event definition:

When someone clicks the element with ID newsletter-homepage, fire a GA4 event called newsletter_signup_click and send its metadata (like form location and page path).

Step 4: Use Variables to Make It Dynamic

Static IDs are great, but you can make this smarter with variables. For example, if you have multiple newsletter CTAs (sidebar, popup, footer), you can dynamically pick up which one fired using {{Click ID}} or {{Click Classes}}.

That way, the same tag covers all your signup buttons — and you can filter later in GA4 by form_location.

To enable this:

Go to Variables in the sidebar.
Click Configure under "Built-in Variables."
Check Click ID, Click Classes, and Click Text.

Now those become available to your tag and event parameters.

Step 5: Test Everything in Preview Mode

Before you publish, click the Preview button in the top-right corner of the GTM dashboard.

This opens a new window with your site in “Tag Assistant” mode. Click around — when you hit your newsletter button, you should see your new tag firing.

If it’s not, check:

Whether the click element’s ID or class matches your condition
Whether the trigger is set to “Some Clicks” (not “All Clicks”)
Whether the GA4 configuration tag is linked correctly

Once it fires as expected, you can move on.

Step 6: Publish and Verify in GA4

Click Submit → Publish in GTM to make your changes live.

Then open GA4 → Reports → Real-time. Trigger the event on your site again — you should see something like:

Event name: newsletter_signup_click
Parameters:
  form_location: newsletter-homepage
  page_path: /blog/my-article

That’s when you know your GTM setup is officially working.

Step 7: Using Folders and Templates for Scale

As your GTM container grows, organization becomes critical. GTM gives you two powerful tools to manage complexity: folders and templates.

Folders

Folders are your primary organization tool inside Tag Manager. They help you keep things tidy when you have dozens of tags and triggers. Think of them like folders on your computer — you group related items together.

Common folder structures include:

By Function: Newsletter, Navigation, Ecommerce, Ads
By Tool: GA4, Facebook Pixel, Hotjar, Custom Scripts
By Page: Homepage, Blog, Checkout, Product Pages
Hybrid: Mix both — e.g., GA4 - Conversion Tracking, GA4 - Engagement Events

To create a folder:

In the sidebar, right-click in the Tags, Triggers, or Variables section
Select "Create Folder"
Name it clearly (e.g., "GA4 - Conversion Events")
Drag existing items into the folder, or create new items directly inside it

With a well-organized folder structure, you'll never waste time hunting for the "newsletter click" trigger again.

Templates

Templates are pre-built tag configurations that let you quickly add common tags without reinventing the wheel. Instead of manually configuring a Google Analytics tag from scratch every time, you can use a template that has sensible defaults already built in.

GTM comes with templates for popular tools:

Google Analytics (GA4, Universal Analytics)
Facebook Pixel
LinkedIn Insight Tag
Hotjar
Google Ads
And many more

You can also create custom templates for your team's specific needs. For example, if you always set up conversion tracking the same way, you could create a template that pre-populates common event parameters, so everyone on your team follows the same pattern.

Using a template saves time and reduces mistakes — especially when you're setting up similar tags repeatedly.

Step 8: Keep It Organized (Naming & Documentation)

A few things that'll save you headaches later:

Name consistently: GA4 - [Event Name] and Trigger - [Condition].
Use folders: Group related tags (e.g., Newsletter, Navigation, Ecommerce).
Document parameters: In GA4, register custom parameters like form_location so they appear in reports.
Version control: Every publish creates a version — use notes to describe changes ("Added newsletter click event").

Pro Tips & Tricks

Finding Elements to Track in Your Codebase

When you want to set up click tracking in GTM, you first need to identify which elements exist and whether they have IDs or data attributes you can target. Instead of manually hunting through your codebase, use ripgrep to find elements quickly.

Find all Button components (e.g., shadcn UI):

rg "<Button" -g "*.ts*" -g '!*./node_modules/**' -g '!src/components/contact/**' -g '!src/components/ui/**'

This command:

Searches for <Button occurrences
Limits to TypeScript/TSX files (-g "*.ts*")
Excludes node_modules (to avoid dependency clutter)
Excludes specific directories you don't want to track (e.g., contact forms, UI component definitions)

Find all links with specific classes:

rg "<a.*className.*external" -g "*.tsx" -g '!src/components/ui/**'

Find elements with data attributes:

rg 'data-event="' -g "*.tsx"

If elements lack IDs or data attributes, add them before building your triggers. This makes GTM triggers more reliable and your codebase more traceable:

<Button
  id="newsletter-submit"
  data-event="newsletter_signup"
  onClick={handleSubscribe}
>
  Subscribe
</Button>

With consistent naming in your components, your GTM triggers become straightforward to build and maintain.

Wrapping Up

The code part was easy — the real power comes from mastering GTM's interface. Once you understand tags, triggers, variables, and how to organize them with folders and templates, you stop editing code for every analytics tweak and start iterating right inside the browser.

In this post, you learned how to:

Understand the GTM mental model: Tags (what to fire), Triggers (when to fire), Variables (what data to capture)
Create a GA4 event tag in GTM
Set a targeted trigger for newsletter clicks
Pass contextual data through variables
Verify everything in GTM Preview and GA4 Real-time
Scale your setup with Folders (organization) and Templates (reusable configurations)
Keep everything organized with naming conventions and documentation

From here, you can expand this workflow for outbound link clicks, form submissions, or even scroll-depth tracking — all without redeploying your Next.js app. And as your tracking grows more complex, you'll have the organizational tools (folders and templates) to keep everything maintainable.

Thanks, Matija