我正在使用 Google 跟踪代码管理器以及由 加载的 javascriptWebpack https://webpack.js.org/.

(In the head我的页面标签，我首先有 GTM 加载脚本，然后我有manifest.js, vendor.js, and page-specific.js由Webpack编译。）

如果我通过 GTM 加载某个 javascript 库（在我的例子中，我将 Facebook Pixel 作为自定义标签），我如何指示我的函数中的函数page-specific.js等待 GTM 加载 Facebook Pixel 标签？

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

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

我正在以一种笨拙的方式处理它（通过在我的page-specific.js因此 GTM 中的 Facebook Pixel 很可能已经完成加载）。

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

我已经搜索过文档 https://developers.google.com/tag-manager/quickstart和教程无处不在，但我从未找到任何人描述如何管理这种依赖关系。

我很欣赏你的建议。

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

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

The code

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

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

而不是打电话hj(), call 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）
• 打开“高级设置”
• 打开“标签排序”
• 选中“在之后触发标签Hotjarfires”（Hotjar 当然会替换为您的标签名称）
• 在“清理标签”选择菜单中选择“选择标签”。
• A new pane opens. Click the "+" in the top right corner to add a new Tag. This will become your Cleanup Tag.
• Choose a "Custom HTML" Tag and add your custom code here. Don't add a trigger (your Tag will be the trigger for your Cleanup Tag)
• 命名您的清理标签。我将我的命名为“Hotjar Wrapper”。
• Save.
• 在“标签”窗格中，选中“不触发”复选框热罐包装纸 if Hotjar失败或暂停”
• Your Tag should now look something like this: