tools-only GA4 Google Tag Manager Integration
Expert guidance for implementing GA4 using Google Tag Manager including tags, triggers, variables, and data layer.
Overview
Google Tag Manager (GTM) provides a powerful, no-code approach to implementing GA4 tracking. GTM centralises tag management, enables version control, and allows updates without code changes.
Why Use GTM
| Benefit | Description |
|---|---|
| No code changes | Update tracking without developers |
| Version control | Rollback to previous versions |
| Team collaboration | Multiple users, permissions |
| Testing | Preview mode before publish |
| Multiple tags | Manage all tags in one place |
| Flexibility | Complex trigger conditions |
GTM Container Installation
Head Snippet
Place immediately after <head>:
<!-- Google Tag Manager -->
<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>
<!-- End Google Tag Manager -->
Body Snippet
Place immediately after <body>:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
GA4 Configuration Tag
The base tag that initialises GA4 on all pages.
Creating the Tag
- GTM -> Tags -> New
- Click "Tag Configuration"
- Select "Google Tag"
- Enter GA4 Measurement ID (G-XXXXXXXXXX)
- Click "Triggering"
- Select "Initialisation - All Pages"
- Name tag: "GA4 - Configuration"
- Save
Configuration Options
| Option | Description |
|---|---|
| Send page view | Auto page view on load (default: true) |
| Google Signals | Demographics, cross-device |
| User ID | Cross-device tracking |
| Debug mode | Enable DebugView |
Adding User ID
- Create Data Layer Variable for user_id
- In Configuration tag, expand "Configuration Settings"
- Add Fields to Set:
- Field Name: user_id
- Value: {{DL - User ID}}
GA4 Event Tags
Send specific events to GA4.
Creating Event Tags
- Tags -> New
- Tag Configuration -> Google Tag
- Tag ID: G-XXXXXXXXXX (same as config)
- Event Name: enter event name
- Event Parameters: add parameters
- Set trigger
- Save
Event Tag Example: Button Click
Tag Configuration:
- Tag Type: Google Tag
- Tag ID: G-XXXXXXXXXX
- Event Name: button_click
- Event Parameters:
- button_name: {{Click Text}}
- button_id: {{Click ID}}
- button_location: header
Trigger:
- Trigger Type: Click - All Elements
- Fire on: Some Clicks
- Condition: Click ID equals "subscribe-btn"
Event Tag Example: Form Submit
Tag Configuration:
- Tag Type: Google Tag
- Tag ID: G-XXXXXXXXXX
- Event Name: form_submit
- Event Parameters:
- form_name: {{Form Name Variable}}
- form_id: {{Form ID}}
Trigger:
- Trigger Type: Form Submission
- Fire on: Some Forms
- Condition: Form ID equals "contact-form"
Event Tag Example: Purchase
Tag Configuration:
- Tag Type: Google Tag
- Tag ID: G-XXXXXXXXXX
- Event Name: purchase
- Event Parameters:
- transaction_id: {{DL - Transaction ID}}
- value: {{DL - Purchase Value}}
- currency: {{DL - Currency}}
- items: {{DL - Items}}
Trigger:
- Trigger Type: Custom Event
- Event Name: purchase
GTM Triggers
Trigger Types
| Type | Use For |
|---|---|
| Page View | Page loads |
| DOM Ready | After DOM parsed |
| Window Loaded | After all resources |
| Click - All Elements | Any click |
| Click - Just Links | Link clicks only |
| Form Submission | Form submits |
| Custom Event | dataLayer.push events |
| Scroll Depth | Scroll percentage |
| Timer | Time-based |
| JavaScript Error | Error tracking |
Creating Triggers
Page View Trigger:
- Triggers -> New
- Trigger Type: Page View
- Fire on: Some Page Views
- Condition: Page Path contains "/products"
- Name: "Page View - Products"
- Save
Click Trigger:
- Triggers -> New
- Trigger Type: Click - All Elements
- Fire on: Some Clicks
- Condition: Click ID equals "cta-button"
- Name: "Click - CTA Button"
- Save
Custom Event Trigger:
- Triggers -> New
- Trigger Type: Custom Event
- Event Name: add_to_cart
- Fire on: All Custom Events
- Name: "CE - Add to Cart"
- Save
GTM Variables
Built-in Variables
Enable in Variables section:
Page Variables:
- Page URL
- Page Hostname
- Page Path
- Referrer
Click Variables:
- Click Element
- Click Classes
- Click ID
- Click Text
- Click URL
Form Variables:
- Form Element
- Form Classes
- Form ID
- Form Text
Data Layer Variables
Extract data from dataLayer.push():
Creating Variable:
- Variables -> User-Defined -> New
- Variable Type: Data Layer Variable
- Data Layer Variable Name: exact key name
- Name: "DL - Product ID"
- Save
Example:
dataLayer.push({
'event': 'add_to_cart',
'product_id': 'SKU_123',
'product_name': 'Blue T-Shirt',
'product_price': 29.99
});
Variables needed:
- DL - Product ID:
product_id - DL - Product Name:
product_name - DL - Product Price:
product_price
Custom JavaScript Variables
For computed values:
function() {
return document.title + ' | ' + window.location.pathname;
}
Data Layer Integration
What is the Data Layer
JavaScript object that holds structured data for GTM:
window.dataLayer = window.dataLayer || [];
Pushing Events
// Simple event
dataLayer.push({
'event': 'button_click',
'button_name': 'Subscribe',
'button_location': 'header'
});
// Ecommerce event
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': 'TXN_12345',
'value': 99.99,
'currency': 'USD',
'items': [
{
'item_id': 'SKU_001',
'item_name': 'Product Name',
'price': 99.99,
'quantity': 1
}
]
}
});
GTM Listens for Event Key
When dataLayer.push includes event, GTM can trigger tags.
Preview Mode Testing
Enabling Preview
- Click "Preview" (top-right in GTM)
- Enter website URL
- Click "Connect"
- Tag Assistant window opens
What to Check
Tags Tab:
- Which tags fired
- Which tags didn't fire
- Firing order
Variables Tab:
- Variable values at each event
- Data Layer contents
Data Layer Tab:
- All dataLayer.push calls
- Event sequence
Errors Tab:
- Any configuration errors
- Warning messages
Testing Workflow
- Enable Preview mode
- Navigate website
- Trigger actions (clicks, forms, purchases)
- Verify in Tag Assistant:
- Correct tags fire
- Parameters populated
- No errors
Publishing Changes
Process
- Click "Submit" (top-right)
- Enter Version Name (e.g., "GA4 Setup - January 2025")
- Enter Version Description
- Click "Publish"
Best Practices
- Use descriptive version names
- Include date in version name
- Document all changes
- Test in Preview before publish
- Keep version history clean
Common Tag Configurations
GA4 Configuration Tag
Name: GA4 - Configuration
Type: Google Tag
Tag ID: G-XXXXXXXXXX
Trigger: Initialisation - All Pages
GA4 Event - Button Click
Name: GA4 - Button Click
Type: Google Tag
Tag ID: G-XXXXXXXXXX
Event Name: button_click
Parameters:
- button_name: {{Click Text}}
- button_id: {{Click ID}}
Trigger: Click - CTA Buttons
GA4 Event - Form Submit
Name: GA4 - Form Submit
Type: Google Tag
Tag ID: G-XXXXXXXXXX
Event Name: form_submit
Parameters:
- form_name: {{DL - Form Name}}
- form_id: {{Form ID}}
Trigger: Form Submission
GA4 Event - Purchase
Name: GA4 - Purchase
Type: Google Tag
Tag ID: G-XXXXXXXXXX
Event Name: purchase
Parameters:
- transaction_id: {{DL - Transaction ID}}
- value: {{DL - Value}}
- currency: {{DL - Currency}}
- items: {{DL - Items}}
Trigger: CE - Purchase
Troubleshooting
Tags Not Firing
Causes:
- Trigger conditions not met
- Wrong variable values
- Tag paused
Solutions:
- Check trigger conditions in Preview
- Verify variable values
- Ensure tag not paused
Wrong Parameter Values
Causes:
- Incorrect variable mapping
- Data layer not populated
- Timing issues
Solutions:
- Check Data Layer in Preview
- Verify variable names match exactly
- Check event sequence timing
Duplicate Events
Causes:
- Multiple tags for same event
- Both GTM and gtag.js
- Trigger fires multiple times
Solutions:
- Remove duplicate tags
- Choose GTM OR gtag.js
- Add trigger conditions
Best Practices
Naming Conventions
Tags:
- "GA4 - Configuration"
- "GA4 - Purchase"
- "GA4 - Form Submit"
Triggers:
- "PV - Products Pages"
- "Click - CTA Buttons"
- "CE - Add to Cart"
Variables:
- "DL - Product ID"
- "CJS - Page Category"
- "Constant - GA4 ID"
Container Organisation
- Create folders for GA4 tags
- Create folders for variables
- Use consistent naming
- Document custom configurations
Testing Protocol
- Always use Preview mode
- Test all triggers
- Verify all parameters
- Check DebugView
- Then publish
Quick Reference
Setup Order
- Create GA4 Configuration tag (Initialisation trigger)
- Test with Preview
- Create event tags
- Create triggers
- Create variables
- Test with Preview
- Publish
Common Issues
- Tags not firing: Check triggers
- Wrong values: Check variables
- Duplicates: Remove extra tags
- No data: Verify Measurement ID