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

DEV Community: Ayla Prinz