Quick readme

Installation
Either use the walker.js via npm as a project dependency
1
npm i @elbwalker/walker.js --save
Copied!
Or as a script. Place it in the HTML head and don't worry about performance issues. Our script is lighter than 5KB.
1
<script class="elbwalker" src="https://cdn.jsdelivr.net/npm/@elbwalker/[email protected]/dist/walker.js"></script>
Copied!
Set a few HTML attributes
1
<!-- General usage -->
2
<div data-elb="ENTITY" data-elb-ENTITY="KEY:VALUE" data-elbaction="TRIGGER:ACTION" />
3
​
4
<!-- Example usage -->
5
<div
6
  data-elb="product"
7
  data-elb-product="name:Everyday Ruck Snack;price:220"
8
  data-elbaction="click:add"
9
/>
Copied!
Get your result:
1
dataLayer.push({
2
  event: 'product add', // combination of entity and action
3
  data: {
4
    // all set properties with the elb-product attribute
5
    name: 'Everyday Ruck Snack',
6
    price: 220,
7
  },
8
  globals: {
9
    // all set properties with the elbglobals attribute
10
    // Not shown in example usage snippet (elbglobals="language:en;test:darkmode")
11
    language: 'en',
12
    test: 'darkmode',
13
  },
14
  user: {
15
    // a stored random id in the cookie (manually added once)
16
    device: 'cookieid',
17
  },
18
  nested: [], // all nested entities within the product
19
  id: '1647968113641-01b5e2-5', // timestamp, group & count of the event
20
  trigger: 'click', // name of the trigger that fired
21
  entity: 'product', // entity name
22
  action: 'add', // entity action
23
  timestamp: 1647968113641, // time when the event fired
24
  timing: 13.37, // how long it took from the page load to trigger the event
25
  group: '01b5e2', // random group id for all events on a page
26
  count: 2, // incremental counter of the events on a page
27
  version: {
28
    // Helpful when working with raw data
29
    walker: 1.3, // used walker.js version
30
    config: 42, // a custom configuration version number
31
  },
32
  walker: true, // flag to filter events
33
});
Copied!
You are completely free to define naming conventions. All you need to get started are the entity, action & trigger attributes. Learn more about the elbwalker event model and background in our blog.
1.You define the entity scope by setting the data-elb attribute with the name of an entity to an element, e.g. data-elb="product".
2.An action can be added by setting the data-elbaction attribute on the same level or all child elements in combination with a matching trigger, e.g. data-elbaction="click:add" to fire a product add event when a user clicks on the tagged element.
3.(Optional) To define the entities' properties, set the composited attribute data-elb-ENTITY with the name and value, e.g. data-elb-product="name:Everyday Ruck Snack;price:220".
1
<body data-elbglobals="language:en;test:darkmode">
2
  <div data-elb="product">
3
    <h1 data-elb-product="name:Everyday Ruck Snack">Everyday Ruck Snack</h1>
4
    <p data-elb-product="price:220">Price: 220 Euro</p>
5
    <button data-elbaction="click:add">Add to cart</button>
6
  </div>
7
</body>
Copied!
data-elb, data-elbaction and data-elbglobals are reserved attributes whereas data-elb- attributes may be arbitrary combinations based on the related entity name. Actions and properties can be set anywhere inside an data-elb attribute.
Get started on GitHub
GitHub - elbwalker/walker.js: An open-source analytics library to measure user events the hassle-free way.
GitHub

getting started - Previous

Event Schema

Next - Sources

Web

Last modified 1d ago

Copy link

Contents

Installation

Set a few HTML attributes

Get your result:

Get started on GitHub