Source code Package

Browser Source

Captures user interactions directly from the DOM using data attributes.

Features

• Data attribute reading: Extracts tracking data from data-elb-* attributes
• Session management: Automatic session detection and handling
• Pageview tracking: Automatic or manual page view events
• DOM commands: Enhanced elb function with walker init support

Installation

npm

npm install @walkeros/web-source-browser

import { startFlow } from '@walkeros/collector';
import { sourceBrowser } from '@walkeros/web-source-browser';

const { collector, elb } = await startFlow({
  sources: {
    browser: {
      code: sourceBrowser,
      config: {
        settings: {
          pageview: true,
          session: true,
          prefix: 'data-elb',
        },
      },
    },
  },
});

script

<script>
  const { startFlow } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs'
  );
  const { sourceBrowser } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs'
  );

  const { collector, elb } = await startFlow({
    sources: {
      browser: {
        code: sourceBrowser,
        config: {
          settings: {
            pageview: true,
            session: true,
          },
        },
      },
    },
  });
</script>

Configuration

Property	Type	Description	More
prefix	string	Prefix for data attributes (default: "data-elb")
scope	Element | Document	DOM scope for event tracking (default: document)
pageview	boolean	Enable automatic pageview tracking
session	boolean	Enable session tracking
elb	string	Name for global elb function (e.g., window.elb)
name	string	Custom name for source instance
elbLayer	boolean | string | Elb.Layer	Enable elbLayer for async command queuing

Enhanced elb Function

The browser source returns an enhanced elb function with additional features:

// Collector elb: Basic event tracking
collector.push('product view', { id: 'P123' });

// Browser source elb: Enhanced with DOM commands
elb('walker init', { scope: document.querySelector('#app') });
elb('product view', { id: 'P123' }); // Also tracks events

Browser Source elb adds:

• DOM Commands: walker init for asynchronous DOM element loading
• Flexible Arguments: Support for multiple argument patterns
• elbLayer Integration: Automatic processing of queued commands
• Element Parameters: Support for element parameters in commands

See Commands for complete API documentation.

Next Steps

• Tagging Guide - Learn about data attributes
• Commands Reference - Full API documentation
• Tagger Tool - Visual tagging tool