General usage
You can implement all sorts of front-end user events easily with walker.js. From product and UX events like promotion view, filter usage, etc. to e-commerce actions like product add to carts or order complete events. The walker.js handles all trigger initializations and race conditions, builds the events with context, and distributes them based on consent states and mapping definitions to any destinations.
<!-- Generic usage -->
<div
data-elb="ENTITY"
data-elb-ENTITY="KEY:VALUE"
data-elbaction="TRIGGER:ACTION"
data-elbcontext="KEY:VALUE"
data-elbglobals="KEY:VALUE"
/>
<!-- Example usage -->
<div data-elbglobals="language:en">
<div data-elbcontext="test:engagement">
<div data-elb="promotion" data-elbaction="visible:view">
<h1 data-elb-promotion="name:Setting up tracking easily">
Setting up tracking easily
</h1>
<p data-elb-promotion="category:analytics">Analytics</p>
</div>
</div>
</div>
{
event: 'promotion view', // combination of entity and action
data: {
// arbitrary set properties with the data-elb-promotion attribute
name: 'Setting up tracking easily',
category: 'analytics',
},
context: {
// Related properties defined with the data-elbcontext attribute
test: ['engagement', 0] // Value and order
},
globals: {
// General Properties defined with the data-elbglobals attribute
language: 'en'
},
user: {
// stored user ids (manually added once)
id: 'userid',
device: 'cookieid',
session: 'sessionid',
},
nested: [], // all nested entities within the promotion
consent: { functional: true }, // status of the consent state(s)
id: '1647968113641-01b5e2-5', // timestamp, group & count of the event
trigger: 'visible', // name of the trigger that fired
entity: 'promotion', // entity name
action: 'view', // entity action
timestamp: 1647968113641, // time when the event fired
timing: 3.14, // 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.5, // used walker.js version
config: 42, // a custom configuration version number
},
source: {
// Origins of the event
type: 1, // Source type of the event (1=Web)
id: 'https://github.com/elbwalker/walker.js', // Source id of the event's origin (url)
previous_id: 'https://www.elbwalker.com/' // Previous source id of the event's origin (referrer)
},
walker: true, // flag to filter events
}
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 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="promotion". The default entity page, when there is no data-elb. - 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="visible:view" to fire a promotion view 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-promotion="name:Setting up tracking easily;position:overlay".
Use the
data-elblink tag to extend the scope of an entity by other elements, placed somewhere else (like modals). Linked elements are related by some id. They are hierarchically and can either be a parent or a child.<div data-elb="info" data-elblink="details:parent"> ... </div>
...
<div data-elblink="details:child" data-elbaction="visible"> ... </div>
<p data-elblink="another:child"> ... </p>
The second element is the parent, triggering the visible action for the
info visible event. There can be multiple children, but only one parent element per id.data-elb, data-elbaction data-elbcontext, data-elbglobals, and data-elblink 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 elb scope.
Spaces in entities, e.g. "shopping cart" or actions, e.g. "add to cart" will be replaced by underscores to "shopping_cart" and "add_to_cart".
Spaces in property values are no problem, e.g. "category: 'summer sale'" works fine. But better set them in quotes when doing so or when using symbols, especially : or ;
For more information on any of the things covered in this documentation, you can
Last modified 3mo ago