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

Question

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

(在我页面的head标签中，我首先有GTM加载脚本，然后是manifest.js，vendor.js 和 page-specific.js 由 Webpack 编译。)

如果我通过 GTM 加载某个 javascript 库(在我的例子中，我将 Facebook Pixel 作为自定义标签)，我如何在我的 page-specific.js 等待 GTM 加载 Facebook 像素标签？

(该函数调用 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 当然会被您的标签所取代)
• 在“清理标签”选择菜单中选择“选择标签”。
• 打开一个新 Pane 。单击右上角的“+”添加新标签。这将成为您的清理标签。
• 选择“自定义 HTML”标签并在此处添加您的自定义代码。不要添加触发器(您的标签将成为您的清理标签的触发器)
• 为您的清理标签命名。我将我的命名为“Hotjar Wrapper”。
• 保存。
• 在您的标签 Pane 中，选中“如果 Hotjar 失败或暂停，则不触发 Hotjar Wrapper”复选框
• 您的标签现在应如下所示: