Walker.js is a lightweight, open-source library to capture analytics events and send them to any destination based on HTML attributes.
// What you'll get using walker.js
{
"event": "newsletter signup", // combination of entity and action
"data": {
// arbitrary properties set with the data-elb-newsletter attribute
list: "analytics_hacks",
position: "overlay",
},
"globals": {
// all set properties with the data-elbglobals attribute
language: "en",
test: "darkmode",
},
"user": {
// stored user ids (manually added once)
id: "userid",
device: "cookieid",
hash: "hashid",
},
"nested": [], // all nested entities within the newsletter
"id": "1647968113641-01b5e2-5", // timestamp, group & count of the event
"trigger": "click", // name of the trigger that fired
"entity": "newsletter", // entity name
"action": "signup", // entity action
"timestamp": 1647968113641, // time when the event fired
"timing": 13.37, // how long it took from the page load to trigger the event
"group": "01b5e2", // random group id for all events on a page
"count": 2, // incremental counter of the events on a page
"version": {
// Helpful when working with raw data
"walker": 1.4, // used walker.js version
"config": 42, // a custom configuration version number
}
}
”Walker.js reduces the time-to-implementation massively. For me, the approach to instrument event tracking as code is also an enormous improvement in speed, quality, and control of the data collection.”
Walker.js is a descriptive approach to creating a single, vendor-agnostic event collection layer.
Stop decoupling your data collection from what the user truly sees and does with data-attributes.
The walker comes with a bunch of integrated triggers that will fire your events at the right moment.
Events consist of entities & actions. The concept forces you to capture events clean and consistent across tools.
Easily add global properties like logged-in status or language settings to give events the important context.
The library is extendable with destinations to speed up the implementation, or enhancement of your existing analytics tools.
Start with setting up a new analytics tool, or extending an existing one.
Install the walker.js library either via npm or as a script.
You define the entity scope by setting the data-elb attribute with the name of an entity to an element. Then set a data-elbaction attribute on the same level or all child elements in combination with a matching trigger.
Optionally set composited attributes to define the entities' properties. Properties that are related to all entities can be collected once using our global attributes.
<body data-elbglobals="language:en;test:darkmode;pagetype:home">
<div data-elb="hero">
<h1 data-elb-hero="title:analytics_hacks">
Awesome Analytics Hacks
</h1>
<button data-elbaction="click:github">Check it out on GitHub</button>
</div>
<div data-elb="newsletter" data-elb-newsletter="position:overlay">
<h1 data-elb-newsletter="list:analytics_hacks">
Awesome Analytics Hacks Newsletter
</h1>
<button data-elbaction="click:signup">Signup</button>
</div>
</body>Do you need short- or long-term support for your next data project? We're experts at building custom data pipelines and durable data stacks for digital product and marketing teams. Exemplary services are:
To talk about your project please set up a quick call or use our contact form and we will come back to you within two business days.
