如何在纯JavaScript中实现Google Tag Manager脚本的引入与初始化（替代HTML引入方式）

我有一行用于引入脚本的HTML代码：

<script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script>

但我希望完全不使用HTML来实现该功能，所有业务逻辑都在JavaScript中完成。请问能否将上述HTML代码的功能整合到JavaScript中？如果可行，具体的实现方式是什么？

另外，我已经编写了以下Google Tag Manager初始化代码：

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'ID');

当然可以！浏览器允许我们用JavaScript动态创建DOM元素，包括script标签，完全能替代你原来的HTML引入方式，实现一模一样的功能。

具体实现步骤 #

核心思路就是手动创建一个script元素，设置好和原HTML标签一致的属性，再把它插入到页面的DOM结构中：

1. 创建script元素：用document.createElement('script')生成一个空的script标签
2. 配置属性：设置async为true（和原HTML的async属性对应），指定正确的src地址
3. 插入到DOM：把创建好的script元素添加到页面的<head>或者<body>中
4. （可选但推荐）监听加载完成事件：确保你的初始化代码在GTM脚本加载完成后再执行，避免潜在的报错

完整代码示例 #

// 1. 动态创建并配置GTM脚本标签
const gtagScript = document.createElement('script');
gtagScript.async = true;
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=你的实际ID'; // 替换成你的GTM ID

// 2. 可选：监听脚本加载完成事件，确保初始化代码在脚本就绪后执行
gtagScript.addEventListener('load', function() {
  // 你的GTM初始化代码
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '你的实际ID'); // 替换成你的GTM ID
});

// 3. 将脚本标签插入到页面head中（也可以插入到body末尾）
document.head.appendChild(gtagScript);

为什么这样有效？ #

这段JavaScript代码和你原来的HTML标签功能完全等价：

• 设置async = true保证脚本异步加载，不会阻塞页面渲染，和原HTML的async属性行为一致
• 动态插入的script标签会被浏览器自动加载并执行，和直接写在HTML里的效果没有区别

如果觉得监听load事件太麻烦，你也可以直接把初始化代码放在创建脚本的代码后面（就像原HTML中初始化代码放在script标签之后一样），不过加监听能避免脚本加载失败时初始化代码报错的情况，更严谨一些。

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