谷歌标签管理器脚本注入

Question

我最近被交付清理我们的GTM标签。 我注意到许多标签使用JS将远程脚本注入DOM，例如：

var head = document.getElementsByTagName('head')[0]
var js = document.createElement('script');
js.src = 'https://cdn.somewhere.com/script.js';
head.appendChild(js);

有没有特定的原因，为什么人们要用这种方式做而不是直接使用这个？

<script type="text/javascript" src="https://cdn.somewhere.com/script.js" async></script>

第一种方法有哪些好处？有没有更好的方式来处理外部脚本？

- Marcus Horne

---

嗯...是否有必要只在用户同意使用Cookie后加载它们呢？ - undefined

Answer 1

我只找到了一个原因去这样做，但不确定那是否仍然适用于现在。正如这篇文章所说，GTM会去掉某些脚本属性，如果需要保留这些属性，最好通过编程方式添加脚本。

- Oleksandr Kovpashko

---

这实际上是一个非常好的观点，因为例如一些营销标签没有它们专有的属性就无法正常工作。 - Eike Pierstorff

Answer 2

使用GTM没有什么意义。向头部添加脚本元素的想法是为了影响加载顺序，但由于您首先需要加载GTM，然后才能在其运行之前将创建元素/附加代码注入到任意位置，因此使用GTM时，这种本来合理的方法只会创建一个不必要的额外步骤。

无论如何，这已经毫无意义了。现在不会在自定义HTML标签中使用create/append或脚本标记。现在的方法是创建一个自定义模板并使用injectScript API。

- Eike Pierstorff

---

啊，谢谢你向我展示这个。我没意识到GTM有自定义模板函数（还在学习中）。所以，你只需要将标签设置为自定义HTML，并像这样调用它：injectScript('https://cdn.somewhere.com/script.js')？成功和错误回调是可选的吗？ - Marcus Horne

你至少需要成功回调函数。如果你想在标签序列中使用它，或者只有在脚本成功加载后才想触发后续标签，那么错误回调函数是很有用的。为了使injectScript正常工作，你还需要在模板中设置权限——这是一项安全功能，允许仅限某些来源的脚本，以防止恶意脚本的加载。 - Eike Pierstorff

Answer 3

使用第二段代码，您可以将其写入不特定位置的文档中（或由GTM定义），相反地，使用appendChild将元素附加到指定元素（在本例中是head）。

- Michele Pisani

Answer 4

另一个使用这种方法的情况是当某人没有访问源代码但想运行脚本时。这有点像黑客行为，因为网站所有者可能甚至不知道这些脚本的存在。也可能是合法的用途，例如第三方托管的网站，其中网站管理员没有获得源代码的许可。

- user3285954

Answer 5

你可能这样做的原因是为了加快网站加载速度。

通过在页面加载后加载脚本，您可以显着提高PageSpeed Insights得分。

以下是一个示例，开发人员使用Google Tag Manager在页面加载后加载livechatinc.js（一个声名狼藉的缓慢脚本）：

在网页完全加载后加载livechatinc代码

不幸的是，与Universal Analytics相比，使用Google Tag Manager会使您的页面加载速度增加约300毫秒。但通常，这300毫秒远小于像Live Chat Inc这样的脚本，后者可能会增加1-2秒。

- HawaiiFi