检测Google Tag Manager何时完成标签加载

Question

我正在使用Google Tag Manager和由Webpack加载的javascript。

（在页面的标签中，我首先有GTM loading script，然后是由Webpack编译的manifest.js、vendor.js和page-specific.js。）

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

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

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

而且我正在以笨拙的方式处理它（通过在我的page-specific.js中添加4秒的超时，以便Facebook Pixel在GTM内完成加载的可能性很大）。

请明确：我已经知道如何在GTM中设置多个标记以等待GTM标记加载，但这不是我在这里尝试做的事情（因为我的page-specific.js不在GTM内）。

我已经搜索了文档和教程（链接），但我从来没有找到任何人描述如何管理这种依赖关系。

感谢您的建议。

- Ryan

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 Tag Manager (GTM)中，添加一个Cleanup Tag到相关的Tag(如下所示的指令)，使用以下代码:

<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”
• 现在您的标记应该看起来像这样：

- Josef Engelfrost

Answer 2

通常情况下你是做不到的。标签优先级和标签顺序决定了GTM如何将标签插入页面，但它们并不能告诉你脚本是否已经执行完成。

唯一可以实现类似功能的方法是如果标签能够在加载完成后执行回调函数。此时，您可以将自定义事件推送到数据层以触发其他标签，或者使用标签顺序并调用。

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

在成功回调中启用相应的变量，并在顺序标签中启用“如果设置标签失败，则不触发”（然后它将等待成功消息），请注意保留HTML标记。

但我想你大多数情况下都没那么幸运。

- Eike Pierstorff

---

在这种情况下，我认为回调函数是一个非常合适的解决方案。 - J Brazier

@JBrazier，回调的问题在于它需要由相关的营销标签执行。我不知道Facebook标签是否允许这样做，大多数营销标签都不允许。 - Eike Pierstorff

好观点，我没有想到过。https://dev59.com/o10b5IYBdhLWcg3wMuxw#38582257似乎提供了一个解决方法。 - J Brazier