GA4 & Tealium Implementation for Salesforce B2C Commerce

1 Understanding GA4 & Tealium

What is Google Analytics 4 (GA4)?

Google Analytics 4 represents a fundamental shift in how web analytics works. According to Google's official GA4 documentation, the platform uses an event-based data model where every interaction is tracked as an event with parameters, replacing the session-based model of Universal Analytics.

Key characteristics of GA4 include:

• Event-Driven Architecture: Every user action (page view, click, purchase) is an event with customizable parameters
• Cross-Platform Tracking: Unified measurement across websites, iOS apps, and Android apps
• Machine Learning: Built-in predictive analytics, anomaly detection, and data modeling
• Privacy-Centric Design: Built for a cookieless future with consent management integration
• Enhanced Measurement: Automatic tracking of page views, scrolls, outbound clicks, site searches, video engagement, and file downloads

What is Tealium?

Tealium is an enterprise-grade Customer Data Platform (CDP) and tag management solution. According to Tealium's official documentation, the platform consists of three main components:

How GA4 and Tealium Work Together

Tealium acts as the data orchestration layer between your Salesforce B2C Commerce storefront and GA4. This architecture provides flexibility, governance, and enhanced capabilities.

2 Salesforce B2C Commerce Architecture Quick Reference

Understanding the B2C Commerce architecture is essential for implementing analytics correctly. For a comprehensive deep-dive into the platform's history, evolution, and architecture, see my detailed guide: Salesforce B2C Commerce Cloud Complete Guide.

Key Architecture Points for Analytics

For GA4 and Tealium implementation, focus on these critical integration points:

3 Why Use Tealium with GA4?

While you can implement GA4 directly on your B2C Commerce storefront, using Tealium as an intermediary provides significant advantages for enterprise ecommerce operations.

Tag Management vs Direct Implementation

Tealium-Specific Advantages

4 Implementation Approaches

There are multiple ways to implement Tealium with GA4 on Salesforce B2C Commerce. The best approach depends on your storefront architecture and customization requirements.

Approach 1: Tealium Cartridge for SFRA

The official Tealium integration for Salesforce Commerce Cloud provides a pre-built cartridge that handles most common scenarios.

Installation Steps

Cartridge Structure

plugin_tealium/
├── cartridge/
│   ├── scripts/
│   │   └── datalayer.js        # Data layer configuration
│   └── templates/
│       └── default/
│           └── common/
│               ├── tealium.isml
│               └── datalayer.isml

Approach 2: Custom Plugin Cartridge

For more control, create a custom plugin_tealium cartridge that extends the base functionality.

// plugin_tealium/cartridge/scripts/datalayer.js
var CONTEXT = {
    GLOBAL: 'global',
    PLP: 'plp',
    PDP: 'pdp',
    CART: 'cart',
    CHECKOUT: 'checkout',
    ORDER_CONFIRMATION: 'orderconfirmation'
};

function getDataLayer(context, data) {
    var dataLayer = getGlobalData();

    switch(context) {
        case CONTEXT.PDP:
            dataLayer = Object.assign(dataLayer, getProductData(data));
            break;
        case CONTEXT.CART:
            dataLayer = Object.assign(dataLayer, getCartData(data));
            break;
        case CONTEXT.ORDER_CONFIRMATION:
            dataLayer = Object.assign(dataLayer, getOrderData(data));
            break;
    }

    return dataLayer;
}

function getGlobalData() {
    return {
        page_type: '',
        site_currency: session.currency.currencyCode,
        customer_logged_in: customer.authenticated ? '1' : '0',
        customer_id: customer.authenticated ? customer.ID : ''
    };
}

module.exports = {
    CONTEXT: CONTEXT,
    getDataLayer: getDataLayer
};

Approach 3: ISML Template Integration

The data layer is rendered in ISML templates. Here's a typical implementation for the product detail page:

<!-- templates/default/product/productDetails.isml -->
<script>
var utag_data = {
    page_type: "product",
    page_name: "${pdict.product.productName}",
    product_id: ["${pdict.product.id}"],
    product_name: ["${pdict.product.productName}"],
    product_brand: ["${pdict.product.brand}"],
    product_category: ["${pdict.product.primaryCategory.displayName}"],
    product_price: ["${pdict.product.price.sales.value}"],
    product_sku: ["${pdict.product.id}"],
    site_currency: "${session.currency.currencyCode}"
};
</script>

5 Data Layer Structure

The data layer is the foundation of your analytics implementation. According to Tealium's data layer best practices, using a well-structured Universal Data Object (UDO) ensures consistent data across all vendors.

Tealium Universal Data Object (UDO)

The utag_data object should contain all relevant information for the current page context:

// Base utag_data structure for ecommerce
var utag_data = {
    // Page-level data
    page_type: "product",
    page_name: "Product Detail Page",
    site_section: "products",
    site_currency: "USD",

    // User data
    customer_logged_in: "1",
    customer_id: "12345",
    customer_type: "returning",
    customer_email_hash: "a1b2c3d4...",

    // Product data (arrays for multiple products)
    product_id: ["SKU123"],
    product_name: ["Blue T-Shirt"],
    product_category: ["Apparel/Shirts/T-Shirts"],
    product_brand: ["BrandName"],
    product_price: ["29.99"],
    product_quantity: ["1"],
    product_variant: ["Large/Blue"],

    // Transaction data (for purchase events)
    order_id: "ORD-12345",
    order_total: "89.99",
    order_subtotal: "79.99",
    order_tax: "5.00",
    order_shipping: "5.00",
    order_discount: "0.00",
    order_coupon: ""
};

GA4 Ecommerce Event Structure

GA4 expects ecommerce data in a specific format. According to Google's ecommerce documentation, the items array is central to all ecommerce events:

// GA4 purchase event structure
dataLayer.push({
    event: "purchase",
    ecommerce: {
        transaction_id: "T_12345",
        value: 89.99,
        tax: 5.00,
        shipping: 5.00,
        currency: "USD",
        coupon: "SUMMER20",
        items: [{
            item_id: "SKU123",
            item_name: "Blue T-Shirt",
            item_brand: "BrandName",
            item_category: "Apparel",
            item_category2: "Shirts",
            item_category3: "T-Shirts",
            item_variant: "Large/Blue",
            price: 29.99,
            quantity: 1,
            coupon: "",
            discount: 0,
            index: 0,
            item_list_id: "related_products",
            item_list_name: "Related Products"
        }]
    }
});

Required Events by Page Type

Based on GA4's recommended events reference, here are the required events for each page type:

6 Tealium iQ Tag Manager Setup

Configuring Tealium iQ properly is essential for accurate GA4 tracking. According to Tealium's GA4 tag documentation, here's how to set up the integration.

GA4 Tag Configuration

Load Rules Configuration

Load rules determine when tags fire. According to Tealium's load rules documentation, use these patterns:

// Example load rules
- Load on All Pages: page_type EXISTS
- Product Pages Only: page_type EQUALS "product"
- Checkout Pages: page_type CONTAINS "checkout"
- Exclude Internal Traffic: user_ip NOT IN ["192.168.1.1", "10.0.0.1"]
- Consent Granted: consent_analytics EQUALS "granted"

Key Extensions

According to Tealium's extensions documentation, extensions process data before tags fire:

Extension Execution Order

Understanding the execution order is critical for proper data transformation:

Data Sources in Tealium

Tealium can pull data from multiple sources:

• utag_data: Primary Universal Data Object defined on the page
• DOM Scraping: Extract values from page elements using CSS selectors
• Cookie Values: Read first-party cookies for persistent data
• URL Parameters: Query string values from the current URL
• Meta Tags: Extract from page metadata (useful for SEO data)
• JavaScript Variables: Reference existing window-level variables

7 GA4 Event Mapping

Mapping your data layer events to GA4's expected format is critical for accurate ecommerce reporting. According to Google's official GA4 ecommerce documentation, these are the recommended events for tracking the customer journey.

Tealium Event Trigger Mapping

The tealium_event variable triggers specific GA4 events. Based on Tealium's GA4 tag documentation, here's how to map common ecommerce actions:

Triggering Events in Code

Use utag.link() to fire events dynamically (e.g., add to cart button click):

// Add to Cart button click handler
document.querySelector('.add-to-cart').addEventListener('click', function() {
    utag.link({
        tealium_event: "add_to_cart",
        product_id: ["SKU123"],
        product_name: ["Blue T-Shirt"],
        product_price: ["29.99"],
        product_quantity: ["1"],
        product_category: ["Apparel/Shirts"],
        product_brand: ["BrandName"]
    });
});

// Remove from Cart
function removeFromCart(productId) {
    utag.link({
        tealium_event: "remove_from_cart",
        product_id: [productId],
        product_quantity: ["1"]
    });
}

Items Array Transformation

According to GA4's event reference, all ecommerce events require an items array. Tealium's E-Commerce Extension automatically transforms your data layer arrays into GA4's items format:

8 Server-Side Tracking with EventStream

Server-side tracking via Tealium EventStream improves data accuracy by bypassing client-side limitations like ad blockers and browser restrictions.

Why Server-Side Tracking?

According to Tealium's EventStream documentation, server-side tracking offers several advantages:

• Ad Blocker Bypass: Data sent server-to-server isn't blocked by browser extensions
• Improved Data Accuracy: Reduces data loss from page abandonment and network issues
• Reduced Page Load: Removes vendor tags from the browser, improving performance
• Enhanced Security: API keys and credentials never exposed to the client

GA4 Measurement Protocol Setup

According to Tealium's GA4 Measurement Protocol connector documentation, configure these settings:

Measurement Protocol Endpoints

# Production endpoint
POST https://www.google-analytics.com/mp/collect?api_secret=XXX&measurement_id=G-XXX

# Validation/Debug endpoint (returns validation messages)
POST https://www.google-analytics.com/debug/mp/collect?api_secret=XXX&measurement_id=G-XXX

Hybrid Implementation (Recommended)

The best approach combines client-side and server-side tracking:

9 Consent Management

Privacy regulations like GDPR and CCPA require proper consent management before tracking users. Tealium provides built-in tools to handle consent orchestration across all your tags.

Google Consent Mode v2

As of March 2024, Google requires Consent Mode v2 for compliance with EU regulations. According to Tealium's Google Consent Mode documentation, these signals must be implemented:

Implementation Options

Tealium Consent Manager Setup

According to Tealium's consent management documentation, configure consent in Tealium iQ:

// Default consent state (before user interaction)
gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    wait_for_update: 500  // Wait 500ms for consent update
});

// Update consent when user accepts
function updateConsent(analyticsConsent, adsConsent) {
    gtag('consent', 'update', {
        ad_storage: adsConsent ? 'granted' : 'denied',
        analytics_storage: analyticsConsent ? 'granted' : 'denied',
        ad_user_data: adsConsent ? 'granted' : 'denied',
        ad_personalization: adsConsent ? 'granted' : 'denied'
    });
}

Compliance by Regulation

10 Debugging & Validation

Proper debugging ensures your implementation is accurate before going live. Use these tools to validate your GA4 and Tealium setup.

Client-Side Debugging Tools

1. GA4 DebugView

According to Google's DebugView documentation, this real-time tool shows events as they arrive:

• Location: GA4 Admin → DebugView
• Enable: Add debug_mode: true to your events or use GA Debugger extension
• View: Real-time stream of events with parameters

2. Chrome Extensions

3. Tealium Preview Mode

Test changes before publishing:

Server-Side Validation

Use the Measurement Protocol validation endpoint:

# Send test event to validation endpoint
curl -X POST 
  'https://www.google-analytics.com/debug/mp/collect?api_secret=YOUR_SECRET&measurement_id=G-XXXXX' 
  -H 'Content-Type: application/json' 
  -d '{
    "client_id": "123456.7890123456",
    "events": [{
      "name": "purchase",
      "params": {
        "transaction_id": "TEST-001",
        "value": 99.99,
        "currency": "USD"
      }
    }]
  }'

# Response shows validation messages without storing data

Debugging Workflow

11 Best Practices & Common Pitfalls

Following these best practices will help you avoid common implementation mistakes and ensure accurate analytics data.

Data Layer Best Practices

According to Tealium's official best practices:

• Naming Conventions: Use lowercase, underscore-separated names (e.g., product_unit_price)
• Use Arrays for Products: product_id: ["SKU1", "SKU2"] not comma-separated strings
• Include page_type Everywhere: Essential for load rules and vendor tag targeting
• Boolean Values: Use strings "1" and "0" instead of true/false for consistency
• Prefix Booleans: Use is_ or has_ (e.g., is_logged_in)

Common GA4 Implementation Pitfalls

SFRA-Specific Best Practices

Performance Optimization

According to Tealium iQ best practices:

• Async Loading: Load all tags asynchronously (default recommended)
• Bundle Tags: Enable in publish settings to reduce HTTP requests
• utag.js Placement: Load at top of <body> after data layer
• Minimize Sync Loading: Only use utag.sync.js when absolutely necessary
• Targeted Load Rules: Don't load event listener tags on every page

12 Abbreviations & Glossary

Related Reading

Continue your Salesforce Commerce and analytics learning journey with these related guides:

• Salesforce B2C Commerce Cloud Complete Guide - Comprehensive guide covering SFRA architecture, cartridge system, headless commerce with PWA Kit, and Einstein AI capabilities
• Salesforce Security Ultimate Guide - Master Salesforce security including encryption, authentication, and compliance frameworks
• 7 Ways to Secure Experience Cloud - Best practices for securing your Salesforce Experience Cloud implementations
• Apex Design Patterns - Essential design patterns for scalable Salesforce development

? Frequently Asked Questions