Adobe DTM 的新自定义和 pushState/hashChange 事件类型

已发表: 2023-03-21

上周，全明星 Adob​​e 动态标签管理团队为 DTM 基于事件的规则添加了一些有吸引力的新功能。 您可以使用 2 种基于事件的规则的新事件类型。

  1. 风俗
  2. pushState 或 hashchange

阅读以下部分以了解有关每种事件类型的更多信息。

基于事件的规则：自定义

首先，让我们定义一个自定义事件。 让我们看一下 DTM 中其他基于事件的规则的几个示例。 以下是基于事件的规则的事件类型列表。

adobe-dtm-事件列表

创建基于事件的规则时，您可以针对特定的默认事件进行设置。 每个浏览器（甚至 Internet Explorer）都有可以针对特定操作触发的默认事件。 一些简单的是：

  • 鼠标点击
  • 鼠标悬停（悬停在页面上的某处）
  • 表单域焦点（光标进入表单域内部）
  • 表单域模糊（光标离开表单域）
  • 表单提交
  • ETC。

这些都是有道理的； 它们是我们每天在网络上所做的事情。 有时您需要跟踪某些内容，但几乎不可能正确执行。 这就是我喜欢使用 JavaScript 事件的原因。 将事件想象成无线电波。 他们广播给每个人都能听到，但你必须调到正确的频率才能听到。 如果您广播而没有人在听，没什么大不了的（不要告诉广播广告商）。 与事件相同：您可以触发一个事件，如果没有监听它，它不会导致任何问题或抛出任何错误。 如果你监听一个从未发生过的事件，它也不会导致任何问题或抛出任何错误。

为什么这很重要？ 跟踪操作的一种旧方法是创建一个自定义 JavaScript 函数然后调用它，或者实现一组非常具体的代码，这些代码要么特定于标签管理系统，要么特定于其他代码库。 但是，如果该功能以某种方式被删除或重命名怎么办？ 您会遇到有时会破坏站点的 JavaScript 错误。 事件解决了这个问题。

如果您熟悉 DTM 的直接调用规则，您可能会问自己“为什么不直接使用直接调用规则？” 一个有效的问题。 问题是直接调用规则建立了对 DTM 的依赖。 如果我是一名开发人员并且有人告诉我在我的代码中放入一堆引用 _satellite.track 的代码，我会质疑它并且很可能会拒绝！ 相反，您可以使用一个没有依赖关系的事件。

为了能够收听一个事件，你必须先触发一个。 事件应由您的开发人员在网站代码中定义。 确定何时何地使用它可能有点棘手，但一个简单的经验法则是，如果它是您想要跟踪的东西，并且您无法使用预定义的 DTM 事件类型来跟踪它，请使用自定义事件。 我们可以从 Mozilla 找到一些关于如何执行此操作的有用信息。 有两种基本事件类型：

  • 事件——触发某事发生而不发送任何关于该事件的额外数据
  • CustomEvent——向事件中添加一些数据

我将使用带有自定义事件的示例，因为它们允许您添加数据。 假设我们有一个购物车，当您向购物车添加商品时，它使用 AJAX。 这意味着不会加载新页面，但可能会出现一个弹出窗口或一条消息，让您知道商品已添加到购物车。 发生这种情况时，我可以创建一个自定义事件，准确告诉我添加了什么：

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

在上面的代码中，您可以看到我正在引用名为“data”的对象中的数据。 我将自定义“详细信息”数据定义为一个对象，然后我可以在侦听事件时引用它。 构建事件后，我会在特定元素上触发它，在本例中是页面上 id 为“minicart”的元素。 现在我有一个自定义事件正在广播给任何想听的人。

接下来，我将配置一个规则以在 DTM 中侦听：

  1. 添加新的基于事件的规则
  2. 给它起个名字
  3. 选择事件类型“custom”并输入事件名称，我们定义为“addToCart”
    自定义事件类型
  4. 定义将要发生此事件的标签或元素。 使用 CSS 选择器，这将是“#minicart”
    DTM 自定义事件选择器
  5. 配置规则。 这就是它变得很酷的地方。 您可以使用事件中提供的“细节”，甚至可以将其用作对象。 感谢 ADOBE！ 在这里，我发送了一个包含我想要的数据的 Google Analytics（分析）事件。 您可以使用 %event.detail% 引用数据，或者如果您有一个对象，您可以将其引用为 %event.detail.<<name>>%。 请参见下面的示例。
    自定义事件的动态数据元素
    我可能永远不会发送这样的事件，但您了解如何使用它的要点。 如果您需要在自定义代码中使用它，比如说 Adob​​e Analytics 工具，您可以将其引用为 _satellite.getVar(“%event.detail.product_id%”)。 很棒的酱！！！

这不是一本小说，但我想展示这个功能有多棒。 尽管我喜欢直接调用规则，但它们在我的实现中处于次要地位，而自定义事件则处于被动地位。

pushState 或 hashchange

推送状态

现在让我们看看 pushState。 它基本上允许您更新页面/站点的 URL，而无需实际加载新页面。 它本身什么都不做，但它允许使用单页应用程序。 有几个框架利用了这个特性。 所以，如果您的站点是这样构建的，那么 pushState 功能会非常方便！

设置规则时，您当然会选择新的事件类型。

DTM pushState 或 hashchange 事件类型

不需要 CSS 选择器来进一步定义它。 但是，您需要查看一些条件。 如果您只是查看新 URL，您将使用的主要一个是路径。 就是这样！

散列变化

感谢 Twitter 我们都知道哈希是什么（哈希标签），所以 hashchange 必须指的是对哈希的更改！ 散列的妙处在于您可以随心所欲地更改它，而且它不会导致页面加载。 哈希可以用于多种用途，因此我们不会深入探讨为什么会有人使用它。 在 pushState 出现之前，使用 AJAXy 或单页站点的新内容更新散列并不少见。

要配置新规则，请选择与 pushState 相同的事件类型。 唯一的区别是您现在可以将散列视为您的标准。 例如：

Adobe DTM 哈希条件

结论

Adobe DTM 是顶级标签管理系统，幸运的是您的 Adob​​e 客户，它是免费的！ 使用这些有用的技巧来帮助您利用它的力量和潜力，并经常回来查看更多信息！ 如果您正在寻求网站分析方面的帮助，请联系我们，我们将免费发送一份关于如何帮助您的建议！