Source code Package

Browser Source

The Browser Source is walkerOS's primary web tracking solution that you can use to capture user interactions directly from the browsers DOM.

What It Does

The Browser Source transforms your website into a comprehensive tracking environment by:

• Data attribute reading: Extracts custom tracking data from HTML data-elb attributes
• Session management: Detects and handles user sessions automatically

Installation

npm

Install the source via npm

npm install @walkeros/web-source-browser

Setup in your project

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

const { collector } = await createCollector({
  sources: {
    browser: createSource(sourceBrowser, {
      settings: {
        pageview: true,
        session: true,
        elb: 'elb', // Browser source will set window.elb automatically
      },
    }),
  },
});

script

Load the source via dynamic import

<script>
  // Load the collector, core utilities, and source
  const { createCollector } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs'
  );
  const { createSource } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/core/dist/index.mjs'
  );
  const { sourceBrowser } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs'
  );

  const { collector, elb } = await createCollector({
    sources: {
      browser: createSource(sourceBrowser, {
        settings: {
          prefix: 'data-elb',
          pageview: true,
          session: true,
        },
      }),
    },
  });
</script>

Configuration reference

Property	Type	Description	More
prefix	string	Prefix for data attributes used in DOM tracking
scope	Element | Document	DOM scope for event tracking (default: document)
pageview	boolean	Enable automatic pageview tracking
session	boolean	Enable session tracking and management
elb	string	Custom name for the global elb function
name	string	Custom name for the browser source instance
elbLayer	boolean | string | Elb.Layer	Enable elbLayer for async command queuing

elb

tip

Two Different elb Functions

The collector provides two different elb functions:

1. Collector elb (elb from createCollector): Basic event tracking that works with all sources and destinations
2. Browser Source elb (collector.sources.browser.elb or direct from createSource): Enhanced function with browser-specific features

Browser Source elb adds:

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

Use separate source creation for direct access to the enhanced elb function, or access it via collector.sources.browser.elb in the unified API.

See Commands for full browser source API documentation.