javascript - 远程脚本之前或之后的数据层 : Google Analytics and TagManager difference

Question

Google Analytics documentation建议 window.dataLayer 应填充在远程代码脚本标记之后/下方。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

但是，Google Tag Manager documentation建议采用另一种方式，其中 window.dataLayer 填充在远程代码脚本标记之前/之上

<script>
  dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];
</script>
<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

为什么会有差异？

Google Analytics 代码似乎特别奇怪，其逻辑似乎是处理远程脚本上的 async 属性，这意味着它可以在 dataLayer< 填充之前或之后运行。为什么不以与跟踪代码管理器相同的方式填充dataLayer？

Answer 1

第二个示例展示了如何在 GTM 加载之前填充 dataLayer。

第一个示例假设您将从一个空的 dataLayer 数组开始。这一行window.dataLayer = window.dataLayer || []; 正在检查您是否已填充 dataLayer 并使用它(如果已填充)。

加载 GTM 后，您可以使用 dataLayer.push({...}) 添加更多事件