同时引入GTM与gtag脚本的正确方法及dataLayer变量使用问题

一、dataLayer变量的正确写法 #

必须使用window.dataLayer = window.dataLayer || [];的写法，绝对不能直接写dataLayer = [];。
原因很简单：直接赋值空数组会直接覆盖之前已经写入dataLayer的所有数据，比如其他脚本提前推送的事件、自定义变量都会直接丢失。而先判断再初始化的写法，会优先复用已经存在的dataLayer实例，不存在才会新建，完全适配多工具共用数据层的场景。

二、你提供的代码是否正确 #

你的代码整体可以正常运行，不存在错误，唯一可以优化的点是不需要单独写GTM上方的那一行dataLayer初始化代码：GTM的官方安装脚本已经内置了w[l]=w[l]||[]的判断逻辑，本身就会自动做存在性检查，额外加一行不会出错，但是属于冗余代码。
另外你当前先放GTM脚本、再放gtag脚本的顺序是完全正确的，gtag的底层逻辑就是往dataLayer中推送事件，只要保证gtag执行时dataLayer已经完成初始化即可，当前的加载顺序完全满足要求。

额外提示：如果你后续打算用GTM统一管理所有GA（Google Analytics）相关的配置，完全可以删掉单独的gtag引入代码，直接在GTM后台配置GA标签即可，还能减少页面的冗余请求。如果确实需要分开维护两套配置，当前写法没有问题。

三、最优引入示例（可选优化） #

如果要简化冗余代码，推荐调整为如下写法：

<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');
</script>
<!-- End Google Tag Manager -->

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

注意事项 #

• 所有相关脚本建议放在页面<head>标签的最顶部，尽可能保证数据采集的完整性
• 所有对dataLayer的写入操作都要使用dataLayer.push()方法，禁止直接对dataLayer变量做赋值操作
• 如果你需要在GTM加载前就传入自定义数据到数据层，才需要在GTM脚本之前添加window.dataLayer = window.dataLayer || [];，再执行对应的push操作

内容的提问来源于stack exchange，提问作者imleaving