walker.js

Walker.js is a pre-built walkerOS application that combines both the browser and dataLayer sources with the collector and a default dataLayer destination into a pre-build package. It's designed for users who want instant web tracking without complex setup or configuration.

Installation

Option 1: npm package

Option 2: CDN

Basic setup

1. Add event queueing (recommended)

Add this script before walker.js loads to queue events during initialization:

2. Include walker.js

3. Configure destinations

Configuration options

Walker.js supports multiple configuration approaches with different priorities:

Script tag data-elbconfig (highest priority)
window.elbConfig (default fallback)
Manual initialization (when run: false)

Settings

Property	Type	Description
`collector`	`any`	Collector configuration (Collector.InitConfig)
`browser`	`any`	Browser source configuration (Partial<SourceBrowser.Settings>)
`dataLayer`	`boolean \| any`	DataLayer configuration (boolean \| Partial<SourceDataLayer.Settings>)
`elb`	`string`	Name for the global elb function (default: "elb")
`name`	`string`	Name for the global instance
`run`	`boolean`	Auto-run on initialization (default: true)

Browser source settings

Property	Type	Description
`prefix*`	`string`	Prefix for data attributes (default: data-elb)
`scope`	`string`	DOM scope for event tracking (default: document)
`pageview*`	`boolean`	Enable automatic pageview tracking
`session*`	`boolean \| any`	Enable session tracking (boolean or SessionConfig object)
`elb*`	`string`	Name for global elb function
`name`	`string`	Custom name for source instance
`elbLayer*`	`boolean \| string \| any`	Enable elbLayer for async command queuing (boolean, string, or Elb.Layer)

* Required fields

DataLayer settings

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

Collector settings

Property	Type	Description
`run`	`boolean`	Whether to run collector automatically on initialization
`tagging`	`number`	Tagging version number
`globalsStatic`	`Record<string, any>`	Static global properties that persist across collector runs
`sessionStatic`	`Record<string, any>`	Static session data that persists across collector runs
`verbose`	`boolean`	Enable verbose logging for debugging
`onError`	`function`	Error handler function: (error, state?) => void
`onLog`	`function`	Log handler function: (message, verbose?) => void
`consent`	`Record<string, boolean>`	Initial consent state
`user`	`any`	Initial user data
`globals`	`Record<string, any>`	Initial global properties
`sources`	`any`	Source configurations
`destinations`	`any`	Destination configurations
`custom`	`Record<string, any>`	Initial custom implementation-specific properties

Full configuration object

Inline configuration

Configure directly in the script tag using simple key:value pairs:

Named configuration object

Use a custom configuration object name:

Usage

Automatic DOM tracking

Walker.js automatically tracks events based on HTML data attributes:

For detailed information on data attributes, see the Browser Source documentation.

Manual event tracking

Use the global elb function for manual tracking:

DataLayer integration

Walker.js can integrate with existing dataLayer implementations:

Advanced features

Async loading and event queueing

Walker.js handles async loading gracefully with automatic event queueing:

Build variants

Walker.js provides multiple build formats for different environments:

walker.js - Standard IIFE bundle for browsers
index.es5.js - GTM-compatible ES2015 build
index.mjs - ES modules for modern bundlers
index.js - CommonJS for Node.js environments

Programmatic usage

Use walker.js programmatically in applications:

Destination configuration

Configure multiple destinations for your events:

For comprehensive destination options, see the Destinations documentation.

Growing beyond walker.js

Walker.js is a convenience bundle that combines Browser Source, DataLayer Source, and Collector into a single file. It's perfect for getting started, but you may outgrow it.

When to stay with walker.js

✅ Simple tracking needs (pageviews, clicks, forms)
✅ Static sites or traditional server-rendered pages
✅ Quick proof-of-concept or MVP
✅ Teams who prefer minimal setup

When to upgrade

Consider moving to full Integrated or Bundled mode when you need:

Need	Solution
Server-side tracking	Bundled mode with Docker
Custom sources (HTTP, AWS, GCP)	Both modes support server sources
Multiple flows per page	Full Collector configuration
TypeScript integration	Integrated mode
CI/CD versioned configs	Bundled mode
Event mapping/transformation	Both modes with mapping config

Migration path

Walker.js configuration maps directly to full modes:

Integrated
Bundled

// walker.js equivalent in Integrated mode
import { startFlow } from '@walkeros/collector';
import { sourceBrowser } from '@walkeros/web-source-browser';

const { elb } = await startFlow({
  sources: {
    browser: {
      code: sourceBrowser,
      config: { settings: { pageview: true, session: true } },
    },
  },
  destinations: {
    // Your destinations here
  },
  run: true,
});

// walker.js equivalent in Bundled mode (flow.json)
{
  "version": 1,
  "flows": {
    "default": {
      "web": {},
      "sources": {
        "browser": {
          "package": "@walkeros/web-source-browser",
          "config": { "settings": { "pageview": true, "session": true } }
        }
      },
      "destinations": {
        // Your destinations here
      },
      "collector": { "run": true }
    }
  }
}

The mental model is the same (sources, collector, destinations), just with more control.

Troubleshooting

Common issues

Events not firing: Check that walker.js loaded and configuration is valid.

Missing events: Ensure event queueing function is added before walker.js.

Configuration not applied: Verify data-elbconfig points to the correct object name.

API reference

Factory function

Creates a new walker.js instance with the provided configuration.

Instance properties

collector - The walkerOS collector instance
elb - Browser push function for event tracking

Utility functions

Browser Source - Detailed DOM tracking capabilities
Collector - Event processing and routing
Destinations - Available destination options
DataLayer Source - DataLayer integration details

Walker.js combines all these components into a single, easy-to-use package perfect for getting started with walkerOS quickly.

💡 Need Professional Support?

Need professional support with your walkerOS implementation? Check out our services.

Installation​

Option 1: npm package​

Option 2: CDN​

Basic setup​

1. Add event queueing (recommended)​

2. Include walker.js​

3. Configure destinations​

Configuration options​

Settings​

Browser source settings​

DataLayer settings​

Collector settings​

Full configuration object​

Inline configuration​

Named configuration object​

Usage​

Automatic DOM tracking​

Manual event tracking​

DataLayer integration​

Advanced features​

Async loading and event queueing​

Build variants​

Programmatic usage​

Destination configuration​

Growing beyond walker.js​

When to stay with walker.js​

When to upgrade​

Migration path​

Troubleshooting​

Common issues​

API reference​

Factory function​

Instance properties​

Utility functions​

Related documentation​