在WebFlow中跟踪Google标签管理器的事件时，是一个完美的匹配。

要在WebFlow网站上跟踪用户行为，典型选项涉及每个页面上具有自定义HTML的手动编码数据板脚本，或者通过Google标签管理器接口使用CSS选择器。如果这些都不适合您，请尝试使用walker.js进行用户行为跟踪，仅基于自定义属性。

Walker.js是一个轻巧的JavaScript库，用于直接在HTML Markup中捕获第一方用户行为数据。它为开发人员提供了大分析库的经验和灵活性，例如sains ananaltics.js，但至关重要的是，通过声明的方法。

Walker.js代码直接生活在元素属性中，这使其非常适合WebFlow网站。

那么，如何在WebFlow中集成和使用Walker.js？

初始化Walker.js

要在WebFlow中初始化Walker.js，请在项目设置中全球的<head>元素中包含以下脚本标签：

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

请参阅WebFlow文档文章âHow to add custom code to Webflowâ€in WebFlow中的自定义代码。

通过自定义属性添加ELB标签

walker.js事件被声明为自定义元素属性。要将自定义属性添加到WebFlow Designer中的元素中，请访问“元素设置”选项卡，然后单击“自定义属性”面板上的Plus图标：

在本文中，自定义属性将如下描述：

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

对应于WebFlow Designer中的以下设置：

在本简短的教程中，说您想使用walker.js。

跟踪用户的参与度

我们想测量您的用户可见促销横幅的频率。 “入门”了多少次 - 丁顿徘徊在“启动”和“ book demo” -button上发生了多少次点击。

设置我们要跟踪的元素的范围，我们要做的第一件事就是设置实体。

data-elb="banner"

我们还想添加一个属性，该属性进一步描述了实体，例如标题或我们使用的标题。这样，我们以后可以互相测试不同的标题。

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

添加操作属性并使用触发visible，该元件在用户的视口中启动视图事件至少50％，持续一秒钟。

data-elbaction="visible:view"
在这一点上，配置应像这样：

data-elbaction="hover;click:start"

data-elbaction="click:demo"

还有更多的预制触发器，例如脉冲，负载和等待... See the full list。

全局属性为数据提供了更多上下文。为页面类型设置ELB全球属性，例如有助于区分不同页面类型上发生的相同事件。我们在此示例中使用了家庭和功能类型。可以简单地添加全局属性，例如到body div。

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

为了能够在控制台中调试实现，我们将在“自定义代码设置”中添加控制台目标。

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

在WebFlow中您有Walker.js！

通过在Datalayer中进行完整的事件，您可以在Google标签管理器中进一步使用它们。您可以例如将它们用作Google Analytics（分析4）或元像素的转换事件。

这只是一个小型WebFlow系列的开始 - 请让我知道您要与Weber.js中的Walker.js测量哪些用户交互。

链接：