4

我正在使用 Google Tag Manager 以及Webpack加载的 javascript 。

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

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

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

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

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

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

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

我很欣赏你的建议。

4

2 回答 2

3

我使用“清理标签”解决了这个问题。在我的示例代码中是针对 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 ”
  • 您的标签现在应该如下所示：在此处输入图像描述
于 2018-03-06T12:13:16.343 回答
1

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

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

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

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

但我想大多数情况下你都不走运。

于 2017-06-15T14:58:34.370 回答