Universal Analytics：具有动态 ID 或类的目标 DOM 元素答案

【问题标题】：Universal Analytics: target DOM element with dynamic ID or classUniversal Analytics：具有动态 ID 或类的目标 DOM 元素
【发布时间】：2014-07-24 18:38:12
【问题描述】：

要求：捕获导航菜单点击

当前设置：

标签 1：全局点击监听器，所有页面都有一个触发规则，即

{{url}} matches RegEX .*

标记 2：菜单点击跟踪 - 自定义 HTML 标记类型，所有页面和 HTML 都有一个触发规则：

<script type="text/javascript">

$('#top_nav_menu a').click(function(){
  var target = event.target;
  var parentElem = $(target).parent();
  var targetHref = $(target).attr("href");
  var targetClass= $(parentElem).attr("class");

  dataLayer.push({
      'event': 'navigation',
      'eventAction': targetClass,
      'eventLabel': targetHref
  });
});

</script>

标签 3：事件 - 菜单点击 - Universal Analytics 代码类型，带有触发规则：

{{event}} equals navigation

跟踪类型：事件

Category: {{event}}
Action: {{event action}}
Label: {{event label}}

宏：

事件操作 - 数据层变量宏类型

数据层变量名称：eventAction

事件标签 - 数据层变量宏类型

数据层变量名称：eventLabel

发生了什么：目前全局点击监听器和菜单点击跟踪正确触发，但事件 - 菜单点击失败。我假设它是因为没有正确定位 DOM 元素。 DOM 结构是这样的：

<nav id="top_nav_menu">
  <ul class="no-list">
    <li id="about" class="about"><a href="link-value">about</a></li>
    <li id="services" class="services"><a href="link-value">services</a></li>
    <li id="work" class="work"><a href="link-value">work</a></li>
    <li id="contact" class="contact"><a href="link-value">contact</a></li>
  </ul>
</nav>

我无法更改 HTML 或添加类，我如何确保触发 Event - Menu Click 标记并推送正确的 dataLayer 值。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

您不需要将“event”作为参数传递给您的点击处理程序以访问 event.target（肯定看起来像在api.jquery.com/event.target 的文档中）？

标签： javascript jquery google-tag-manager universal-analytics

【解决方案1】：

在您的“菜单点击跟踪”标签的数据层推送中，您将“$(targetClass)”分配给操作，将“$(targetHref)”分配给标签，这似乎是 jQuery 引用（即“$ (...)") 而不是字符串。你能把它们改成变量名“targetClass”和“targetHref”吗？

希望这会有所帮助。

【讨论】：

我也意识到了这一点，但改变它并没有帮助。在任何情况下，“事件 - 菜单点击”应该仍然被触发，因为“事件”的值是作为字符串传递的，所以如果不是其余的值，至少应该传递它。
另外需要指出的是，'$(target)' 在你的函数定义中应该是 'this'，因为调用该方法的对象是锚元素（即 $(" #top_nav_menu a"))。然后'targetClass'将是'parentElem.attr（“class”）'。不要忘记添加 Eike 指出的“事件”参数。