Google 跟踪代码管理器中的值未定义但在控制台中没有问题

Question

我正在通过 GTM 将值从网站推送到 Facebook，但我无权在服务器端更改代码。

所以我需要发送到 Facebook 的每个值都必须在 GTM 中使用自定义 Javacripts 找到。

我可以在控制台中获取这些值，但我不知道为什么在调试模式下看不到它们。它总是未定义的。

这是 GTM 中的代码之一：

function() {
  var prod = document.getElementById("product_addtocart_form").elements.namedItem("product").value;
  return prod;
}

那我做错了什么？

Answer 1

假设该行代码在控制台中有效，我怀疑您的函数中的代码被触发得太早并且元素还没有准备好。

确保在触发 gtm.dom 事件之前不会触发您的代码，如果仍然不起作用，请等到 gtm.load 被触发。如果这仍然不起作用，那么请查看这些元素何时真正准备就绪（也许它们是使用 AJAX 调用创建的？）。

如果 gtm 本机事件不够晚，当您知道元素已准备就绪时，您应该将自定义事件触发到您的 dataLayer 中，它会触发您的标签并重新填充变量。希望这将确保在触发代码时正确填充变量。

如果使用 jQuery AJAX 加载元素，您应该能够绑定到文档上的 ajaxComplete 事件。 See the jQuery docs。然后，您将向数据层触发一个自定义事件，该事件将触发使用现在应填充的变量中的数据的标签。您将设置一个带有 type=custom 事件且值为 'ajax_complete'（或您对事件的任何称呼）的触发器。

您的代码将如下所示：

$(document).on('ajaxComplete', function(){
  dataLayer.push({'event':'ajax_complete'});
});

如果在一个页面上触发了多个 AJAX 事件，那么您必须编写一些逻辑来区分调用 and/or 确保您不会多次触发它。 GTM 中的标签中还有一个设置说 'only fire once per page load'，因此您也可以利用它。

Google 跟踪代码管理器中的值未定义但在控制台中没有问题

Values in Google Tag Manager are undefined but in console are ok

javascript

google-tag-manager