ga4-data-layer-guide

GA4 Data Layer Guide

Complete guide for implementing a robust Data Layer for Google Analytics 4 via Google Tag Manager.

Data Layer Basics

WHAT IS THE DATA LAYER?
=======================

┌────────────────────────────────────────────────────────────────┐
│  dataLayer = JavaScript array that shares data with GTM        │
│                                                                │
│  FLOW:                                                         │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐ │
│  │ Website  │ -> │ dataLayer│ -> │   GTM    │ -> │   GA4    │ │
│  │  Code    │    │  Array   │    │  Tags    │    │ Property │ │
│  └──────────┘    └──────────┘    └──────────┘    └──────────┘ │
│                                                                │
│  ADVANTAGES:                                                   │
│  ├── Separation of data and tracking logic                     │
│  ├── Flexibility: modify tracking without code changes         │
│  ├── Reliability: data available when needed                   │
│  ├── Structured data: consistent formats                       │
│  └── Debug-friendly: easy to inspect                           │
└────────────────────────────────────────────────────────────────┘

BASIC SYNTAX:
─────────────
// Initialize dataLayer (before GTM snippet)
window.dataLayer = window.dataLayer || [];

// Push data to dataLayer
dataLayer.push({
  'event': 'event_name',
  'key': 'value'
});

Data Layer Initialization

CORRECT DATA LAYER SETUP
=========================

STEP 1: Initialize before GTM
──────────────────────────────

PLACE IN <head>, BEFORE GTM snippet:

```html
<script>
  window.dataLayer = window.dataLayer || [];

  // Optional: initial page data
  dataLayer.push({
    'pageType': 'product',
    'pageCategory': 'electronics',
    'userLoggedIn': true,
    'userId': 'user_12345',
    'userType': 'returning'
  });
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXX');</script>
<!-- End Google Tag Manager -->

STEP 2: GTM Container Code ─────────────────────────── GTM snippet comes AFTER the Data Layer initialization. This ensures data is available at page load.

ORDER IS CRITICAL: ──────────────────

1. dataLayer = window.dataLayer || [];
2. dataLayer.push({initial page data});
3. GTM tag
4. Rest of the page
5. dataLayer.push() for events (forms, clicks, etc.)