Webflow + Walker.js

Ayla Prinz — Thu, 24 Nov 2022 10:51:17 +0000

The perfect match when it comes to tracking events for Google Tag Manager in Webflow.

To track user behavior on a Webflow site, the typical options involve manually coded dataLayer scripts with custom HTML on each page or using CSS selectors via the Google Tag Manager interface. If neither of these really work for you, try using walker.js for user behavior tracking based solely on custom attributes.

Walker.js is a light-weight JavaScript library for capturing first-party user behavior data directly in HTML markup. It offers the developer’s experience and flexibility of big analytics libraries like Segment's analytics.js but, crucially, remains much simpler than it through a declarative approach.

Walker.js code lives directly in element attributes, and that makes it a perfect fit for Webflow sites.

So, how can you integrate and use walker.js in Webflow?

Initializing walker.js

To initialize walker.js in Webflow, include the following script tag in the <head> element globally in Project Settings:

<script async class="elbwalker" src="https://cdn.jsdelivr.net/npm/@elbwalker/walker.js@latest/dist/walker.js" data-default="true"></script>

Please refer to the Webflow docs article “How to add custom code to Webflow” to learn more about custom code in Webflow.

Adding elb-tags via custom attributes

Walker.js events are declared as custom element attributes. To add a custom attribute to an element in Webflow Designer go to the Element Settings tab and click the plus icon on the custom attributes panel:

Add custom attributes in Webflow - Watch Video

In this article, custom attributes will be described as follows:

data-elb="ENTITY" data-elb-ENTITY="KEY:VALUE" data-elbaction="TRIGGER:ACTION" data-elbglobals="KEY:VALUE"

which corresponds to the following settings in Webflow Designer:

Walker.js example: tagging banner engagement

In this short tutorial, say you want to track the engagement of a user with a promotion banner using walker.js.

We want to measure how often the promotion banner has been visible to your users. How many times the "Get started"-button got hovered over and how many clicks happened on both the "Get started" and "book demo"-button.

Setting the scope and properties of the banner

To set the scope of what element we want to track the first thing we do is set the entity.

data-elb="banner"

We also want to add a property that further describes the entity e.g. title or the headline we used. This way we can later test different titles against each other for example.

data-elb-banner="title:Example Banner"

Measure visibility of the banner

Add the action attribute and use the trigger visible which fires the view event after the element has been in the user's viewport for at least 50% for one second.

data-elbaction="visible:view"
The config should look like this at this point:

Measure mouse hover & click events

data-elbaction="hover;click:start"

data-elbaction="click:demo"

There are many more prebuilt triggers like pulse, load, and wait ...See the full list.

Set global attributes to every user interaction

Global attributes give more context to the data. Setting an elb-global attribute for page types e.g. helps to differentiate between the same events happening on different page types. We used the home and features type in this example. Global attributes can simply be added e.g. to the body div.

data-elbglobals="pagetype:home"
data-elbglobals="pagetype:features"

Debugging in the console

To be able to debug the implementation in the console we’ll add the “console destination” in the custom code settings.

<script>
  function elb(){(window.elbLayer = window.elbLayer || []).push(arguments);}
elb('walker destination', {
  push: console.log,
});
</script>

Testing walker.js implementation in Webflow - Watch Video

Conclusion

There you have it — walker.js in Webflow!

By having full events in the dataLayer you can further use them in Google Tag Manager. You can e.g. use them as events for Google Analytics 4 or as conversion events for the Meta pixel.

This is just the beginning of a small Webflow series — please let me know what user interactions you want to measure with walker.js in Webflow.

Links:

Documentation: https://docs.elbwalker.com
More examples: https://www.elbwalker.com/gallery
GitHub: https://github.com/elbwalker/walker.js
LinkedIn: https://linkedin.com/elbwalker

The entity-action event concept

alexander — Wed, 26 Oct 2022 15:21:40 +0000

Where we are coming from

We, as well as many other data professionals out there, grew up with still the most common event out there: the pageview - the mother of all tracking events for over a decade. Over the years new events, mostly to track online shopping behavior, became the new normal and the concept of the traditional purchase conversion was born. With the rising importance of mobile apps (where there is no such thing as a pageview), event tracking evolved immensely. And today it's not only about online shopping anymore. But events and event-based tracking came to stay.

We believe that tracking shouldn't sound like some abstract techy abbreviation concept. It should feel natural and everyone in an organization should immediately understand it no matter if they implemented the tracking or not. Only when everyone understands what is being measured, there will be fewer misunderstandings, higher data quality, and more actionable data in the organization at the end of the day.

elbwalker's approach to the concept of an event

A lot of languages are based on some kind of subject, predicate, object structure. It is the general rule for understanding this sentence right here (which may drove some of us insane at school). At elbwalker, we asked ourselves how we can evolve a simple pageview to a more natural concept.

Let us introduce: the page view (notice the space!). A small change with a huuuge impact.

Doesn't look very different to you? Well, let us explain why it is.

Tracking starts with a user interaction that triggers something. Whether it is something implicit, e.g. loading, scrolling, waiting, or something explicit, e.g. clicking a specific button right at this moment. We treat the user, who e.g. is loading something, as the subject. The page (context) is the object and the action "view" is basically the predicate.

A user views a page by loading it → page view.

Since we want to evolve the classic, static concept of an event we split the action (view) from the object (page). Just because there are so many more possibilities that can be done with the same object.

To sum up: an elbwalker event consists of three components: a trigger (load), an entity (page), and an action (view). Now we're free to do a lot of great things! So let's get started.

How this concept makes your life in measurement much easier

It's nice to know that a page view has happened, but we also want to know which page exactly had that view. Also, the information click isn't worth a lot, if we don't know what exactly has been clicked by someone. We need to know the context to know that it was the add to cart button of a specific product in a specific size. Most of the time, the more context, the better.

Context creates meaning. Context is queen and king.

An elbwalker entity is defining the scope to create a specific context. Inside this entity scope, all actions are to be defined. As a data person, I want to know which product someone added to the cart. As a data person, I want to know which page someone viewed. And so on. To capture this information you can add properties to an elbwalker event. You will likely know this from e.g. Google Analytics 4 implementations.

There are endless possibilities of what someone can do on a page. There is no need to just focus on the view, and create weird concepts like bounce rates. Let's move on and measure the read action in addition to the view action of a page. And how about measuring the user's feedback like the like action or share action? Imagine all the new possibilities we can now analyze and report and how we can personalize and optimize based on the context of a page.

Entity	Actions
page	view, read, like, share
product	view, interest, like, add

We've built the open-sourced walker.js to support this new approach of event tracking. The combination of an attributed-based tracker and the new event concept makes tracking implementation easy, fast, and reliable.

Forem: WalkerJS