DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Ayla Prinz for WalkerJS

Posted on • Updated on

Webflow + Walker.js

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>
Enter fullscreen mode Exit fullscreen mode

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:

elb-attributes in Webflow

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:

Config of custom elb-attributes in Webflow

Measure mouse hover & click events

data-elbaction="hover;click:start"

Config of custom elb-attributes in Webflow clicks and hover

data-elbaction="click:demo"

Config of custom elb-attributes in Webflow clicks

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"

Custom global elb-attributes in Webflow

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> 
Enter fullscreen mode Exit fullscreen mode


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

Top comments (0)

Rust language vs others

Stop by this week's meme thread!