GA4 Reonboarding Part 2: Event Tracking Strategy with Google Tag Manager

by Colleen Shifflett | Oct 23, 2025 | Uncategorized

Event Tracking Strategy with GTM

Total time: 4-5 hours

Introduction (5 minutes)

Welcome back to our comprehensive GA4 reonboarding series. In Part 1, we established your analytics foundation with proper account structure, data retention, and access management. Now we’re diving into the heart of GA4’s power: event tracking through Google Tag Manager (GTM).

Unlike Universal Analytics where events were secondary to pageviews, GA4’s event-based model makes every interaction an opportunity for insight. But without a strategic approach, you’ll end up with a chaotic mess of data that provides little value. This guide will help you build a scalable, maintainable event tracking system that actually answers your business questions.

Prerequisites Checklist

Before starting Part 2, ensure you’ve completed:

[ ] GA4 property properly configured (Part 1 complete)
[ ] Admin access to both GA4 and Google Tag Manager
[ ] Internal IP filters configured and tested
[ ] Enhanced Measurement settings reviewed and configured
[ ] Access to your website’s codebase (or developer support)
[ ] List of key business questions your tracking needs to answer

Part 1: Setting Up GTM for GA4 (45 minutes)

Creating Your GTM Container (10 minutes)

If you’re starting fresh or need to reorganize your existing GTM:

Navigate to tagmanager.google.com
- Click “Create Account”
- Account Name: Your company name
- Container Name: Your website URL
- Target Platform: Web (or iOS/Android for apps)
Install the GTM Container Code
- Copy the two code snippets provided
- Paste the first snippet as high as possible in the <head> tag
- Paste the second snippet immediately after the opening <body> tag
- Verify installation using Tag Assistant Chrome extension
Container Organization Best Practices
- Use a consistent naming convention: [Type] - [Description] - [Location]
- Example: GA4 - Purchase Event - Checkout Page
- Create folders for different tracking categories (GA4, Advertising, Analytics Tools)

GA4 Configuration Tag Setup (15 minutes)

The configuration tag is your foundation—it loads GA4 on every page:

Create the Configuration Tag:
- In GTM, click Tags > New
- Name it: GA4 - Configuration Tag
- Tag Type: Google Analytics: GA4 Configuration
- Measurement ID: Your GA4 property ID (G-XXXXXXXXXX)
Essential Configuration Settings: Fields to Set: - cookie_domain: auto - cookie_expires: 63072000 (2 years in seconds) - cookie_prefix: _ga - cookie_update: true - cookie_flags: SameSite=None;Secure (for cross-domain tracking) - send_page_view: true (unless handling separately)
Server-Side Tagging Preparation (Optional):
- If using server-side GTM: Add server container URL
- Transport URL: https://your-server-container.com
- First-party mode: Enable for better cookie persistence
Trigger Configuration:
- Trigger Type: Page View – All Pages
- Exception: Add blocking triggers for pages you don’t want to track

Action Step: Publish your container with just the configuration tag and verify in GA4’s Realtime reports that pageviews are being recorded.

Built-in Variables Activation (10 minutes)

Enable variables you’ll use for event tracking:

Navigate to Variables in GTM
Configure Built-in Variables:
- Page Variables: Page URL, Page Path, Page Hostname, Referrer
- Utilities: Container ID, Container Version, HTML ID
- Clicks: Click Element, Click Classes, Click ID, Click URL, Click Text
- Forms: Form Element, Form Classes, Form ID
- User Engagement: Scroll Depth Variables (all)
- Videos: Video Provider, Video URL, Video Title, Video Duration
Create Custom JavaScript Variables for GA4: // User ID Variable (if you have logged-in users) function() { // Replace with your actual user ID retrieval method return window.userId || undefined; } // Client ID Retrieval function() { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.indexOf('_ga=') === 0) { return cookie.substring(4); } } return undefined; }

Data Layer Planning (10 minutes)

The data layer is your contract between the website and GTM:

Basic Data Layer Structure: window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'custom_event_name', 'event_category': 'engagement', 'event_label': 'newsletter_signup', 'value': 0, 'custom_parameter': 'custom_value' });
Standardized Events to Implement:
- User actions: login, sign_up, share
- Engagement: scroll, time_on_page, rage_click
- Content: search, view_item, select_content
- Conversion: generate_lead, purchase, subscribe

Action Step: Create a data layer specification document that developers can reference when adding tracking code.

Part 2: Creating Your Measurement Plan for Custom Events (60 minutes)

The Event Taxonomy Framework (20 minutes)

GA4 allows up to 500 distinct event types per property. Here’s how to organize them:

Event Naming Convention:
- Use lowercase with underscores (snake_case)
- Maximum 40 characters
- Start with verb: view_, click_, submit_, download_
- Be specific but not too granular
Three-Tier Event Hierarchy:Tier 1: Automatic Events (GA4 collects these automatically)
- first_visit, session_start, page_view
- Don’t recreate these
Tier 2: Recommended Events (Use Google’s naming when applicable)
- login, sign_up, search, share
- view_item, add_to_cart, begin_checkout, purchase
- Full list: GA4 Recommended Events
Tier 3: Custom Events (Your business-specific events)
- calculator_complete
- whitepaper_download
- demo_request
- pricing_interaction
Parameter Planning:
- Standard parameters (use across all events):
  - event_category: High-level grouping
  - event_label: Specific descriptor
  - value: Numerical value
- Custom parameters (event-specific):
  - Keep under 25 per event
  - Maximum 100 unique per property
  - Register important ones as custom dimensions

Creating Your Measurement Plan Document (25 minutes)

Build a comprehensive tracking plan in a spreadsheet:

Columns to Include:

Event Name
Event Type (Automatic/Recommended/Custom)
Trigger Description
Parameters (with example values)
Business Question Answered
Implementation Status
QA Status
Notes

Example Entries:

Event Name	Type	Trigger	Parameters	Business Question	Status
form_submit	Custom	Contact form submission	form_name: “contact”<br>form_location: “header”<br>form_value: 50	Which forms drive the most leads?	Pending
video_progress	Recommended	25%, 50%, 75%, 90% milestones	video_title: “Product Demo”<br>video_percent: 25<br>video_provider: “youtube”	How much of our videos do users watch?	Active
scroll_milestone	Custom	25%, 50%, 75%, 90% scroll depth	scroll_depth: 50<br>page_category: “blog”<br>content_length: “long”	How far do users scroll on different page types?	Testing

Conversion Event Planning (15 minutes)

Identify your key conversion events (you can mark up to 30 as conversions):

Primary Conversions (Direct business impact):
- purchase / transaction
- generate_lead
- sign_up
- subscribe
Micro-Conversions (Indicate user intent):
- add_to_cart
- view_pricing
- download_resource
- video_complete
Conversion Configuration:
- In GA4: Admin > Events > Mark as conversion
- Add conversion value parameters where applicable
- Set up conversion windows appropriately

Action Step: Create a prioritized list of 10-15 conversion events that align with your business objectives.

Part 3: Standard Ecommerce vs Enhanced Ecommerce Implementation (45 minutes)

Understanding the GA4 Ecommerce Model (10 minutes)

GA4 uses a single, enhanced ecommerce implementation (no more choosing between standard and enhanced):

Key Differences from UA:

Simplified data model with items array
Automatic currency conversion
Built-in product list tracking
Promotion tracking integrated
No need for enhanced ecommerce plugin

Core Ecommerce Events Implementation (35 minutes)

1. Product Discovery Events

view_item_list (Product listings/category pages):

dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_123',
    item_list_name: 'Summer Collection',
    items: [{
      item_id: 'SKU123',
      item_name: 'Cotton T-Shirt',
      affiliation: 'Online Store',
      coupon: '',
      discount: 5.00,
      index: 0,
      item_brand: 'BrandName',
      item_category: 'Apparel',
      item_category2: 'Shirts',
      item_category3: 'T-Shirts',
      item_list_id: 'category_123',
      item_list_name: 'Summer Collection',
      item_variant: 'Blue',
      location_id: 'warehouse_1',
      price: 29.99,
      quantity: 1
    }]
  }
});

view_item (Product detail pages):

dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'USD',
    value: 29.99,
    items: [{
      item_id: 'SKU123',
      item_name: 'Cotton T-Shirt',
      item_brand: 'BrandName',
      item_category: 'Apparel',
      price: 29.99,
      quantity: 1
    }]
  }
});

2. Shopping Behavior Events

add_to_cart:

dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'USD',
    value: 29.99,
    items: [/* item details */]
  }
});

remove_from_cart:

dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'USD',
    value: 29.99,
    items: [/* item details */]
  }
});

3. Checkout Events

begin_checkout:

dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'USD',
    value: 89.97,
    coupon: 'SUMMER10',
    items: [/* array of items */]
  }
});

add_shipping_info:

dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    currency: 'USD',
    value: 89.97,
    coupon: 'SUMMER10',
    shipping_tier: 'Standard',
    items: [/* array of items */]
  }
});

add_payment_info:

dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    currency: 'USD',
    value: 89.97,
    coupon: 'SUMMER10',
    payment_type: 'credit_card',
    items: [/* array of items */]
  }
});

4. Transaction Event

purchase (Thank you/confirmation page):

dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: '12345',
    value: 89.97,
    tax: 7.20,
    shipping: 5.99,
    currency: 'USD',
    coupon: 'SUMMER10',
    items: [{
      item_id: 'SKU123',
      item_name: 'Cotton T-Shirt',
      affiliation: 'Online Store',
      coupon: 'ITEM10',
      discount: 2.99,
      item_brand: 'BrandName',
      item_category: 'Apparel',
      item_variant: 'Blue',
      price: 29.99,
      quantity: 3
    }]
  }
});

GTM Tags for Ecommerce Events

Create a tag for each ecommerce event:

Tag Configuration:
- Tag Type: GA4 Event
- Configuration Tag: Select your GA4 Configuration Tag
- Event Name: Use the exact event name (e.g., ‘purchase’)
Event Parameters:
- Add ecommerce parameters using GTM variables
- Create Data Layer Variables for complex objects
Trigger Setup:
- Trigger Type: Custom Event
- Event Name: Matches the dataLayer event name

Action Step: Implement view_item and add_to_cart events first, then expand to the full funnel.

Part 4: Form Tracking, Scroll Depth, and Engagement Metrics (45 minutes)

Intelligent Form Tracking (20 minutes)

Move beyond basic form submissions to understand user interaction:

1. Form Interaction Events

form_start (User begins filling form):

// GTM Tag Configuration
Event Name: form_start
Parameters:
  form_name: {{Form ID}}
  form_type: contact|newsletter|demo_request
  form_location: {{Page Path}}

form_progress (Track field-by-field completion):

// Track when users complete each field
Event Name: form_progress
Parameters:
  form_name: {{Form ID}}
  field_name: email|phone|company
  fields_completed: 3
  total_fields: 7
  completion_percentage: 43

form_submit (Successful submission):

Event Name: form_submit
Parameters:
  form_name: {{Form ID}}
  form_type: {{Form Type}}
  form_value: {{Lead Value}}
  time_to_complete: 45 // seconds
  validation_errors: 0

2. Form Abandonment Tracking

Create a timer-based trigger to detect abandonment:

// Custom HTML Tag - Form Abandonment Timer
<script>
(function() {
  var formStarted = false;
  var formSubmitted = false;
  var formName = '';
  
  // Detect form interaction
  document.addEventListener('focus', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
      if (!formStarted) {
        formStarted = true;
        formName = e.target.form ? e.target.form.id : 'unknown';
        
        // Set abandonment timer (30 seconds)
        setTimeout(function() {
          if (formStarted && !formSubmitted) {
            dataLayer.push({
              'event': 'form_abandon',
              'form_name': formName
            });
          }
        }, 30000);
      }
    }
  }, true);
  
  // Detect form submission
  document.addEventListener('submit', function(e) {
    formSubmitted = true;
  });
})();
</script>

Advanced Scroll Tracking (15 minutes)

Beyond basic percentages, track meaningful scroll interactions:

1. Content Milestone Tracking

// Scroll Depth with Content Awareness
Event Name: scroll_milestone
Parameters:
  percent_scrolled: 25|50|75|90
  content_type: article|product|landing_page
  page_length: short|medium|long // Based on pixel height
  time_to_milestone: 15 // seconds
  direction: down|up // Track scroll direction

2. Viewport Time Tracking

Track how long key elements stay in viewport:

// Custom HTML Tag - Viewport Time Tracking
<script>
(function() {
  var importantElements = document.querySelectorAll('[data-track-viewport]');
  var viewportTime = {};
  
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      var elementId = entry.target.getAttribute('data-track-viewport');
      
      if (entry.isIntersecting) {
        viewportTime[elementId] = Date.now();
      } else if (viewportTime[elementId]) {
        var duration = Math.round((Date.now() - viewportTime[elementId]) / 1000);
        
        if (duration > 3) { // Only track if viewed for 3+ seconds
          dataLayer.push({
            'event': 'element_view_time',
            'element_id': elementId,
            'view_duration': duration
          });
        }
      }
    });
  }, {threshold: 0.5}); // Element must be 50% visible
  
  importantElements.forEach(function(element) {
    observer.observe(element);
  });
})();
</script>

Engagement Quality Metrics (10 minutes)

Track meaningful engagement beyond time on page:

1. Rage Click Detection

// Detect frustrated clicking behavior
<script>
(function() {
  var clicks = [];
  var rageClickThreshold = 3;
  var timeWindow = 750; // milliseconds
  
  document.addEventListener('click', function(e) {
    var now = Date.now();
    var target = e.target;
    
    // Add current click
    clicks.push({
      time: now,
      element: target
    });
    
    // Remove old clicks outside time window
    clicks = clicks.filter(function(click) {
      return now - click.time < timeWindow;
    });
    
    // Check for rage clicking
    if (clicks.length >= rageClickThreshold) {
      var sameElement = clicks.every(function(click) {
        return click.element === target;
      });
      
      if (sameElement) {
        dataLayer.push({
          'event': 'rage_click',
          'clicked_element': target.tagName,
          'clicked_text': target.innerText ? target.innerText.substring(0, 50) : '',
          'click_count': clicks.length
        });
        clicks = []; // Reset after firing event
      }
    }
  });
})();
</script>

2. True Engagement Time

// Track actual engaged time (not just time on page)
<script>
(function() {
  var engagedTime = 0;
  var startTime = Date.now();
  var lastActivity = Date.now();
  var isEngaged = true;
  var idleThreshold = 30000; // 30 seconds
  
  // Track various engagement signals
  ['mousedown', 'keydown', 'scroll', 'touchstart'].forEach(function(event) {
    document.addEventListener(event, function() {
      lastActivity = Date.now();
      if (!isEngaged) {
        isEngaged = true;
        startTime = Date.now();
      }
    });
  });
  
  // Check for idle state
  setInterval(function() {
    if (Date.now() - lastActivity > idleThreshold) {
      if (isEngaged) {
        engagedTime += Date.now() - startTime;
        isEngaged = false;
      }
    }
  }, 5000);
  
  // Send engaged time before page unload
  window.addEventListener('beforeunload', function() {
    if (isEngaged) {
      engagedTime += Date.now() - startTime;
    }
    
    if (engagedTime > 0) {
      navigator.sendBeacon('/collect', JSON.stringify({
        event: 'engaged_time',
        duration: Math.round(engagedTime / 1000)
      }));
    }
  });
})();
</script>

Part 5: Testing and QA Protocols for Event Tracking (45 minutes)

Pre-Launch Testing Framework (20 minutes)

1. GTM Preview Mode Testing

Step-by-Step Testing Protocol:

Enter Preview Mode:
- Click “Preview” in GTM
- Enter your website URL
- Keep Tag Assistant window open
Test Each Event Systematically:
- Create a testing checklist
- Test one event at a time
- Document expected vs. actual behavior
Validation Checklist: For each event, verify: □ Event fires on correct trigger □ Event name matches specification □ All required parameters present □ Parameter values are correct format □ No duplicate events firing □ Event fires in correct sequence □ Data layer values properly populated

2. GA4 DebugView Validation

Enable DebugView:

Browser extension method: Install Google Analytics Debugger
URL parameter method: Add ?_dbg=1 to your URL
GTM method: Add debug_mode parameter to configuration tag

DebugView Testing Process:

1. Open GA4 > Admin > DebugView
2. Perform action on website
3. Verify in DebugView:
   - Event appears within 1-2 seconds
   - Click event to see parameters
   - Check for parameter value formatting
   - Verify no "error" badges on events
   - Confirm user properties are set correctly

Creating Automated QA Tests (15 minutes)

1. Browser Console Testing Scripts

Create reusable console scripts for quick validation:

// Event Tracking Validator
(function validateGA4() {
  var errors = [];
  var warnings = [];
  
  // Check if dataLayer exists
  if (typeof dataLayer === 'undefined') {
    errors.push('dataLayer not found');
    return {errors: errors};
  }
  
  // Check for required events
  var requiredEvents = ['page_view', 'form_submit', 'add_to_cart'];
  var foundEvents = dataLayer.filter(function(item) {
    return item.event && requiredEvents.includes(item.event);
  }).map(function(item) {
    return item.event;
  });
  
  requiredEvents.forEach(function(event) {
    if (!foundEvents.includes(event)) {
      warnings.push('Missing required event: ' + event);
    }
  });
  
  // Check for duplicate events
  var eventCounts = {};
  dataLayer.forEach(function(item) {
    if (item.event) {
      eventCounts[item.event] = (eventCounts[item.event] || 0) + 1;
    }
  });
  
  Object.keys(eventCounts).forEach(function(event) {
    if (eventCounts[event] > 1 && event !== 'page_view') {
      warnings.push('Duplicate event detected: ' + event + ' (' + eventCounts[event] + ' times)');
    }
  });
  
  console.table({
    'Errors': errors.length || 'None',
    'Warnings': warnings.length || 'None',
    'Total Events': dataLayer.length
  });
  
  if (warnings.length > 0) {
    console.warn('Warnings:', warnings);
  }
  
  return {
    passed: errors.length === 0,
    errors: errors,
    warnings: warnings
  };
})();

2. Automated Testing with Cypress or Playwright

// Example Cypress test for GA4 events
describe('GA4 Event Tracking Tests', () => {
  beforeEach(() => {
    cy.visit('/');
    cy.window().then((win) => {
      win.dataLayer = win.dataLayer || [];
      cy.wrap(win.dataLayer).as('dataLayer');
    });
  });
  
  it('should track form submission', () => {
    // Fill and submit form
    cy.get('#email').type('test@example.com');
    cy.get('#submit').click();
    
    // Verify event was pushed to dataLayer
    cy.get('@dataLayer').should((dataLayer) => {
      const formEvent = dataLayer.find(item => item.event === 'form_submit');
      expect(formEvent).to.exist;
      expect(formEvent.form_name).to.equal('newsletter');
      expect(formEvent.form_type).to.equal('email_capture');
    });
  });
  
  it('should track scroll depth milestones', () => {
    // Scroll to 50% of page
    cy.scrollTo('50%');
    cy.wait(1000);
    
    // Verify scroll event
    cy.get('@dataLayer').should((dataLayer) => {
      const scrollEvent = dataLayer.find(item => 
        item.event === 'scroll' && item.percent_scrolled === 50
      );
      expect(scrollEvent).to.exist;
    });
  });
});

Post-Launch Monitoring (10 minutes)

1. Real-Time Monitoring Dashboard

Create alerts for tracking issues:

// GA4 Custom Alert Examples
1. Missing Critical Events:
   - Condition: Purchase events = 0 for 1 hour
   - Alert: Email to technical team
   
2. Abnormal Event Volume:
   - Condition: Form submissions > 500% of daily average
   - Alert: Possible bot activity or duplicate firing
   
3. Parameter Issues:
   - Condition: Events with missing required parameters > 10%
   - Alert: Implementation issue detected

2. Weekly QA Checklist

## Weekly GA4 QA Checklist

### Data Quality Checks
- [ ] Compare event counts week-over-week
- [ ] Check for new "unassigned" traffic
- [ ] Verify conversion tracking accuracy
- [ ] Review error events in DebugView
- [ ] Validate ecommerce revenue matches backend

### Technical Checks
- [ ] Review GTM version history for unauthorized changes
- [ ] Check browser console for JavaScript errors
- [ ] Verify page load impact of tracking code
- [ ] Test tracking in different browsers/devices
- [ ] Confirm cookie consent implementation working

### Business Validation
- [ ] Cross-reference GA4 metrics with business KPIs
- [ ] Verify marketing campaign tracking
- [ ] Check for data sampling in reports
- [ ] Review custom dimension population rates
- [ ] Validate user ID tracking (if applicable)

Implementation Roadmap & Prioritization (15 minutes)

Phase 1: Foundation (Week 1)

GTM installation and configuration tag
Basic page tracking verification
Site search and scroll tracking
Internal traffic filtering validation

Phase 2: Critical Events (Week 2)

Form submission tracking
Key conversion events (2-3 most important)
Basic error tracking
Outbound link tracking

Phase 3: Ecommerce (Week 3)

Product view events
Add to cart tracking
Checkout funnel events
Purchase confirmation

Phase 4: Advanced Engagement (Week 4)

Video tracking
Download tracking
Engagement time metrics
Rage click detection

Phase 5: Optimization (Ongoing)

Custom dimensions setup
Audience creation
Advanced segments
Predictive metrics activation

Troubleshooting Common Issues

Issue 1: Events Not Appearing in GA4

Diagnostic Steps:

Check GTM Preview – Is tag firing?
Check browser console for errors
Verify Measurement ID is correct
Check GA4 Data Filters aren’t excluding
Wait 24 hours (processing delay for some reports)

Issue 2: Duplicate Event Firing

Solutions:

Check for multiple GTM containers
Review trigger conditions for overlap
Look for hardcoded GA4 on pages
Add trigger exceptions where needed
Use “once per page” trigger setting

Issue 3: Missing Ecommerce Data

Checklist:

Verify items array structure is correct
Check currency code is valid (ISO 4217)
Ensure item_id is consistent across funnel
Validate numerical values aren’t strings
Confirm dataLayer.push happens before GTM fires

Issue 4: Cross-Domain Tracking Not Working

Fixes:

Add all domains to GA4 configuration
Check for payment gateway redirects
Verify linker parameters aren’t stripped
Test in incognito mode
Allow 3rd party cookies for testing

Conclusion and Next Steps (5 minutes)

Congratulations! You’ve now built a robust event tracking system that goes far beyond basic GA4 implementation. Your tracking strategy now captures meaningful user interactions, properly implements ecommerce tracking, and includes quality assurance protocols that ensure data reliability.

Key Achievements from Part 2:

✓ GTM properly configured for GA4 tracking ✓ Comprehensive measurement plan documented ✓ Ecommerce funnel completely tracked ✓ Advanced engagement metrics implemented ✓ QA protocols established and tested

Before Moving to Part 3:

Let your tracking run for at least 48 hours
Validate data in both DebugView and standard reports
Compare key metrics with your previous analytics
Document any custom requirements discovered
Get stakeholder sign-off on event taxonomy

What’s Coming in Part 3:

In our next installment, we’ll tackle advanced configuration and customization, including:

Custom dimensions and metrics setup
Audience creation and activation
Attribution model configuration
Reporting customization and automation
Integration with Google Ads and other marketing platforms

Remember, great analytics isn’t about tracking everything—it’s about tracking the right things in the right way. Take time to validate your implementation before adding more complexity. Quality beats quantity every time in analytics.

Resources and References:

Have questions or need clarification on any part of this guide? Comment below or reach out directly. Stay tuned for Part 3 where we’ll unlock GA4’s advanced features to supercharge your analytics insights.