代码

Question

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

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

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

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

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

我正在以笨重的方式处理它（通过在我的page-specific.js中添加4秒超时，以便GTM中的Facebook Pixel有可能在那时完成加载。

要明确：我已经知道如何在 GTM中设置多个标签以等待加载GTM标签，但这不是我在这里要做的事情（因为我的{{1不在GTM内部。）

我到处搜索the documentation和教程，我从来没有找到任何描述如何管理这种依赖的人。

感谢您的建议。

Answer 1

我使用＆＃34;清理标记＆＃34;解决了这个问题。在我的示例中，代码用于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）
打开＆＃34;高级设置＆＃34;
打开＆＃34;标记排序＆＃34;
检查＆＃34;在 Hotjar 触发＆＃34;之后触发标记（Hotjar当然会被你的标签所取代）
选择＆＃34;选择标签＆＃34;在＆＃34;清理标签＆＃34;选择菜单。
将打开一个新窗格。点击＆＃34; +＆＃34;在右上角添加新标签。这将成为您的清理标记。
选择＆＃34;自定义HTML＆＃34;在此处标记并添加自定义代码。不要添加触发器（您的标记将成为清理标记的触发器）
命名您的清理标记。我将我的名字命名为Hotjar Wrapper＆＃34;。
保存。
在“代码”面板中，选中复选框＆＃34;如果 Hotjar 失败或暂停＆＃34;

Hotjar Wrapper

您的代码现在应该如下所示：

Answer 2

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

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

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

在成功回调中

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

但大多数情况下，我猜运气不好。

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

2 个答案:

代码

如何在标记中添加清理标记：