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.

This post continues from my earlier setup guide and focuses entirely on the Tag Manager web interface — how to navigate it, think about it, and actually build events that show up cleanly in GA4.

Understanding the GTM Mental Model

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

• Tags are what you want to fire — usually analytics or tracking events.
• Triggers decide when to fire them — page views, clicks, form submissions, etc.
• Variables store information — like the clicked element, the page path, or custom IDs you define.

You can think of it like this:

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

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:

This makes the event way more useful in GA4 later.

Step 2: Create the Trigger

Next, click “Triggering” inside the tag editor, then hit + 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:

1. Go to Variables in the sidebar.
2. Click Configure under “Built-in Variables.”
3. 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 your GA4 → Reports → Real-time view. 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: Keep It Organized

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”).

Wrapping Up

The code part was easy — the real power comes from mastering GTM’s interface. Once you understand tags, triggers, and variables, you stop editing code for every analytics tweak and start iterating right inside the browser.

In this post, you learned how to:

• 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

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.

Thanks, Matija