🎯 GTM Setup Guide

Step 1: Get Your GA4 Measurement ID

1. Go to Google Analytics
2. Click Admin (gear icon, bottom left)
3. Under Property, click Data Streams
4. Click on your web stream
5. Copy your Measurement ID (format: G-XXXXXXXXXX)

Don't have GA4 yet?

• Go to Admin → Create Property → Web → Enter site details
• Copy the Measurement ID that's generated

Step 2: Create GA4 Configuration Tag in GTM

1. In GTM, click "Add a new tag" (or go to Tags → New)
2. Tag Configuration:
   • Click "Tag Configuration"
   • Select "Google Analytics: GA4 Configuration"
3. Enter Measurement ID:
   • Paste your GA4 Measurement ID (e.g., G-ABC123XYZ)
   • Leave other fields as default
4. Set Trigger:
   • Click "Triggering" section
   • Click the pencil icon
   • Select "All Pages" (this fires on every page load)
   • Click "Save"
5. Name Your Tag:
   • At the top, name it: GA4 - Configuration
   • Click "Save"

Step 3: Create Click Event Tag

1. Create New Tag:
   • Click Tags → New
2. Tag Configuration:
   • Click "Tag Configuration"
   • Select "Google Analytics: GA4 Event"
3. Configure Event:
   • Configuration Tag: Select your GA4 - Configuration tag
   • Event Name: button_click
   • Leave other fields as default
4. Set Trigger:
   • Click "Triggering" section
   • Click the pencil icon → "New"
   • Trigger Type: "Click - All Elements"
   • Trigger Name: Click - Test Button
   • Under "This trigger fires on": Select "Some Clicks"
   • Condition:
     • Variable: Click Element
     • Condition: matches CSS selector
     • Value: #testButton
   • Click "Save"
5. Name Your Tag:
   • Name: GA4 - Button Click Event
   • Click "Save"

Step 4: Preview & Test

1. Enter Preview Mode:
   • Click "Preview" button (top right)
   • Enter your localhost URL: http://localhost/gtm-learning/index.php
   • Click "Connect"
2. Test Your Setup:
   • A new browser tab will open
   • You'll see GTM Preview panel at the bottom
   • Click the "Click Me" button on your page
   • In Preview panel, you should see:
     • ✅ gtm.js loaded
     • ✅ GA4 - Configuration tag fired
     • ✅ GA4 - Button Click Event tag fired (when you click)
3. Verify Events:
   • In Preview panel, click on each tag
   • Check that events are firing correctly
   • Look for any errors (red indicators)

Step 5: Publish Your Container

1. Submit Changes:
   • Click "Submit" button (top right, blue)
   • Version Name: Initial GA4 Setup
   • Version Description: Added GA4 Configuration and Button Click Event
   • Click "Publish"
2. Verify:
   • The "Workspace Changes: 0" should reset
   • Your tags are now live!

Step 6: Verify in GA4

1. Open GA4 DebugView:
   • Go to Google Analytics
   • Navigate to Reports → DebugView
   • (Or Admin → DebugView)
2. Enable Debug Mode:
   • Install Tag Assistant Legacy Chrome extension
   • OR add ?debug_mode=true to your URL
   • OR use Chrome DevTools → Application → Cookies → Add debug_mode=true
3. Test Again:
   • Open your learning platform page
   • Click the buttons
   • You should see events in real-time in DebugView:
     • page_view
     • button_click
     • custom_event