📊 Google Tag Manager Learning Platform

Master GTM, GA4, and Event Tracking - Step by Step Guide

⏳

Checking GTM Status...

Verifying that Google Tag Manager is loaded correctly

🔗 Access Google Dashboards

Use these dashboards to set up and verify your tracking. Each card below has a direct link and step-by-step instructions.

🏷️

Google Tag Manager

Create and manage your tags, triggers, and variables. This is where you configure what events to track.

Open GTM Dashboard →
What to do:
  1. Click "Tags" → "New" to create a GA4 Configuration tag
  2. Add your GA4 Measurement ID (from Google Analytics)
  3. Set trigger to "All Pages"
  4. Click "Preview" button to test your setup
  5. Enter this page URL:
  6. Click "Submit" → "Publish" to make tags live
📈

Google Analytics 4

View your website analytics, user behavior, and event data. See real-time events and reports.

Open GA4 Dashboard →
What to do:
  1. Go to "Admin" (gear icon) → "Data Streams"
  2. Click your web stream to get your Measurement ID (G-XXXXXXXXXX)
  3. Copy this ID and use it in GTM Configuration tag
  4. Go to "Reports" → "Realtime" to see live events
  5. Go to "Admin" → "DebugView" for detailed event debugging
🔍

Tag Assistant

Verify that your tags are firing correctly. Use this to debug and validate your GTM setup.

Open Tag Assistant →
What to do:
  1. Click "Add domain" button
  2. Enter:
  3. Click your domain to start debugging session
  4. Copy the debug URL provided
  5. Open that URL in a new tab
  6. Return to Tag Assistant to see tag status
🐛

GA4 DebugView

See events in real-time with detailed parameters. Perfect for debugging event tracking issues.

Open GA4 DebugView →
What to do:
  1. In GA4, go to "Admin" → "DebugView" (or Reports → DebugView)
  2. Enable debug mode by installing Tag Assistant Legacy extension
  3. OR add ?debug_mode=true to this page URL
  4. Click the test buttons on this page
  5. Watch events appear in real-time in DebugView
  6. Click on events to see all parameters

🚀 Getting Started - 3 Simple Steps

1

Set Up Your Accounts

First, create your GA4 property and GTM container using the dashboard cards above. Follow the step-by-step instructions in each card.

2

Test Events on This Page

Click the test buttons below to send events to GTM. Open DevTools (F12) → Console tab to see the events being sent.

3

Verify in GTM Preview

Go to Google Tag Manager → Click Preview → Enter this page URL → Click the test buttons and watch events appear in real-time.

🎯

Test Events

Click these buttons to send events to GTM. Each button demonstrates a different type of event tracking. Open DevTools (F12) → Console tab to see detailed event logs.

⚙️

Configuration

📋 Current Configuration

GTM Container ID: GTM-WKCPQZ3G

This demo uses container ID GTM-WKCPQZ3G. In your real project, you'll create your own container in Google Tag Manager and replace this ID.

📊 Events to Configure in GTM

  • button_click - Fires when "Track Button Click" is clicked
  • page_view - Fires automatically on page load (via GA4 Config tag)
  • custom_event - Fires when "Send Custom Event" is clicked

💡 Tip: See GTM_Container_and_GA4_Tags.md for detailed setup instructions.

🔍

How to Verify Events Are Working

Method 1: Browser Console

Press F12 → Console tab. You should see messages like:

✅ GTM dataLayer initialized: [...]
📊 Event pushed to dataLayer: button_click

Method 2: GTM Preview Mode

Use the Google Tag Manager dashboard card above for step-by-step instructions.

  1. Click the GTM dashboard link above
  2. Click Preview button (top right)
  3. Enter this page URL:
  4. Click Connect
  5. Open this page in a new tab
  6. Click the test buttons and watch events appear in the Preview panel

Method 3: GA4 DebugView

Use the GA4 DebugView dashboard card above for step-by-step instructions.

  1. Click the GA4 DebugView dashboard link above
  2. Navigate to Admin → DebugView
  3. Enable debug mode (see instructions in the dashboard card)
  4. Click the test buttons on this page
  5. See events appear in real-time in DebugView

📖 Project Documentation

This project includes comprehensive guides in the docs/ folder:

🔗 Official Google Resources