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 | More |
|---|---|---|---|
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 | More |
|---|---|---|---|
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) |
DataLayer Settings
| Property | Type | Description | More |
|---|---|---|---|
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 | More |
|---|---|---|---|
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 & 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 browsersindex.es5.js- GTM-compatible ES2015 buildindex.mjs- ES modules for modern bundlersindex.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.
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 instanceelb- Browser push function for event tracking
Utility Functions
Related documentation
- 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.