elbwalker docs
Search…
Quick readme
You should only need to read this to start using elbwalker. 🀟

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. 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. 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. 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