检测 Google 跟踪代码管理器何时完成加载代码

Question

我正在使用 Google 跟踪代码管理器以及 Webpack 加载的 javascript。

（在我页面的head标签中，我先有GTM加载脚本，然后有Webpack编译的manifest.js、vendor.js和page-specific.js。）

如果我通过 GTM 加载某个 javascript 库（在我的情况下，我将 Facebook 像素作为自定义标签），我如何指示我的 page-specific.js 中的函数等到 Facebook 像素标签已被 GTM 加载？

（函数调用fbq('track', 'Purchase', {value: facebookTrackingPurchaseValue, currency: 'USD'});，取决于已经加载的Facebook Pixel。）

现在，这是一个竞争条件。

我正在以一种笨拙的方式处理它（通过在我的page-specific.js 中添加一个 4 秒的超时，这样 GTM 中的 Facebook Pixel 很可能已经完成加载）。

明确一点：我已经知道如何设置多个标签在 GTM 内等待 GTM 标签加载，但这不是我在这里想要做的（因为我的page-specific.js不在 GTM 中）。

我到处搜索the documentation 和教程，但从未找到任何人描述如何管理这种依赖关系。

感谢您的建议。

Answer 1

我使用“清理标签”解决了这个问题。在我的示例代码中是针对 Hotjar 的，所讨论的函数称为 hj()。

更新：在与 Hotjar 支持联系后，我了解到以下代码行对于 Hotjar 来说已经足够了：window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};。这里不需要清理标签，但如下所述的清理标签提供了更通用的解决方案。

代码

在您的网站上运行此代码：

window.hjWrapperQueue = window.hjWrapperQueue || [];
function hjWrapper() {
  hjWrapperQueue.push(arguments);
}

不要调用hj()，而是调用hjWrapper()。

然后，在 Google 跟踪代码管理器 (GTM) 中，使用以下代码将清理代码添加到相关代码（说明如下）：

<script>
  // Re-define the wrapper function to simply call hj()
  function hjWrapper() {
    hj.apply(arguments);
  }

  // Call all the queued events
  if (window.hjWrapperQueue) {  
    window.hjWrapperQueue.forEach(function (hjArguments) {
      hj.apply(hjArguments);
    });
  }
</script>

如何为您的标签添加清理标签：

• 打开您的标签（在屏幕截图中，标签称为 Hotjar）
• 打开“高级设置”
• 打开“标签测序”
• 选中“在 Hotjar 触发后触发标签”（Hotjar 当然会被您的标签所取代）
• 在“清理标签”选择菜单中选择“选择标签”。
• 新窗格随即打开。点击右上角的“+”添加新标签。这将成为您的清理标签。
• 选择“自定义 HTML”标签并在此处添加您的自定义代码。不要添加触发器（您的标签将成为您的清理标签的触发器）
• 为您的清理标签命名。我将我的命名为“Hotjar Wrapper”。
• 保存。
• 在您的标签窗格中，选中复选框“如果 Hotjar 失败或暂停，则不要触发 Hotjar Wrapper”
• 您的标签现在应该如下所示：

Answer 2

通常你不能。标签优先级和标签排序决定了 GTM 如何将标签插入页面，但不会告诉您脚本是否已完成执行。

实现这样的唯一方法是标签在完成加载后可以执行回调。此时，您可以将自定义事件推送到触发其他标签的数据层，或者使用 tag sequencing 并调用

google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}});

（必须在内置变量中启用各个变量）在成功回调中并在序列标签中启用“不触发设置标签失败”（然后它将等待成功消息）。

但我猜你大多不走运。