Browser Source Commands

The browser source provides an enhanced elb function that supports browser-specific features like DOM interaction, elbLayer communication, and automatic initialization. These commands are processed by the browser source translation layer before being passed to the collector.

elb

The browser source provides an enhanced elb function that supports flexible argument patterns and browser-specific features.

// Import from browser source
import { elb } from '@walkeros/web-source-browser';
window.elb = elb;

// Or define the elb function manually in the browser
function elb() {
  (window.elbLayer = window.elbLayer || []).push(arguments);
}

Usage options:

elb("entity action", data, ...);
elb({event: "entity action", data: { foo: "bar"}});

config

Configure the browser source during initialization using createSource. These settings control browser-specific behavior:

import { createSource } from '@walkeros/core';
import { sourceBrowser } from '@walkeros/web-source-browser';

const browserSource = createSource(sourceBrowser, {
  settings: {
    elb: 'elb', // Name to assign the elb function to the window
    elbLayer: true, // Enable elbLayer for async command queuing
    pageview: true, // Trigger a page view event by default
    prefix: 'data-elb', // Attributes prefix used by the walker for DOM scanning
    session: true, // Enable session tracking
  },
});

// Use in collector
const { collector } = await createCollector({
  sources: {
    browser: browserSource,
  },
});

note

Browser source configuration must be done during createSource initialization. Settings like prefix and elbLayer cannot be changed after the source is created.

run

A run initializes the browser source and triggers automatic DOM scanning and event setup. It will:

• Initialize DOM event listeners
• Scan for data-elb attributes
• Trigger a page view event by default
• Process the elbLayer stack

elb('walker run');

A run accepts a partial state parameter:

elb('walker run', { group: 'group1d' });

init

Re-initializes event listeners on one or multiple target elements. Useful for dynamically loaded content like newly added products or wizard steps.

elb('walker init', element); // Single element
elb('walker init', [element1, element2]); // Multiple elements

This command is essential for Single Page Applications (SPAs) where content is added dynamically after the initial page load.

tip

Use walker init after adding new DOM elements with data-elb attributes to ensure they are tracked properly.

Integration with Collector

Browser source commands work in conjunction with collector commands. The browser source handles DOM-specific functionality while the collector manages destinations, consent, and user data.

Common workflow:

1. Configure browser source during createSource
2. Create collector with configured browser source
3. Browser source automatically initializes (or use walker run for manual control)
4. Use walker init for dynamic content