Source code Package

DataLayer Source

Integrates with existing Google Analytics 4 and GTM dataLayer implementations by intercepting dataLayer.push() calls.

Installation

npm install @walkeros/web-source-datalayer

Basic Setup

import { startFlow } from '@walkeros/collector';
import { sourceDataLayer } from '@walkeros/web-source-datalayer';

const { collector, elb } = await startFlow({
  sources: {
    dataLayer: {
      code: sourceDataLayer,
      config: {
        settings: {
          name: 'dataLayer', // Name of global dataLayer array
          prefix: 'dataLayer', // Event prefix for filtering
        },
      },
    },
  },
  destinations: {
    // Your destinations
  },
});

How It Works

The dataLayer source intercepts dataLayer.push() calls and transforms them into walkerOS events:

1. Intercepts existing dataLayer.push() calls
2. Filters events based on prefix or custom filter function
3. Transforms dataLayer format to walkerOS event format
4. Forwards to collector for processing

// Existing dataLayer code (unchanged)
window.dataLayer = window.dataLayer || [];
dataLayer.push({ event: 'purchase', value: 99.99 });

// Automatically captured and transformed by sourceDataLayer
// → Sent to walkerOS collector as standard event

Configuration

Property	Type	Description	More
name	string	DataLayer variable name (default: "dataLayer")
prefix	string	Event prefix for filtering (default: "dataLayer")
filter	(event: unknown) => boolean	Custom function to filter which events to process

Custom Filtering

Filter which dataLayer events get processed:

const { elb } = await startFlow({
  sources: {
    dataLayer: {
      code: sourceDataLayer,
      config: {
        settings: {
          filter: (event) => {
            // Only process purchase and add_to_cart events
            if (typeof event === 'object' && event !== null) {
              const e = event as { event?: string };
              return e.event === 'purchase' || e.event === 'add_to_cart';
            }
            return false;
          },
        },
      },
    },
  },
});

Migration Strategy

Use the dataLayer source for gradual migration from GA4/GTM:

1. Phase 1: Add walkerOS alongside existing dataLayer

   // Existing code continues to work
   dataLayer.push({ event: 'purchase', value: 99.99 });
   // Now also captured by walkerOS

2. Phase 2: Map dataLayer events to walkerOS destinations

   destinations: {
     ga4: {
       code: destinationGtag,
       config: {
         mapping: {
           // Map dataLayer purchase to GA4 format
         }
       }
     }
   }

3. Phase 3: Gradually replace dataLayer.push with elb()

   // Old
   dataLayer.push({ event: 'purchase', value: 99.99 });
   // New
   elb('order complete', { total: 99.99 });

Next Steps

• Review event mapping for transforming dataLayer events
• Check GA4 destination for Google Analytics integration