google-tag-manager - 在 GTM 标记中包含外部脚本文件的后果

Question

在 GTM 中，假设我有一个“自定义 HTML”标签，其中包含一个外部脚本文件，例如

<script type="text/javascript" src="http://externalsite.com/file.js"></script>

这个文件是怎么加载的？它会影响页面的加载时间吗？

我知道 GTM 脚本是与标签一起异步加载的，但我无法想象在这种情况下会发生什么。

Answer 1

在您的 GTM 自定义 HTML 标记中，您甚至可以使用 async 或 defer 属性：

<script async type="text/javascript" src="/path/to/file.js"></script>

进一步阅读：http ://davidwalsh.name/html5-async

如果您使用的是 HTML5，请键入默认值为text/javascript，因此您可以将其关闭。

或者，您可以使用匿名自调用函数异步加载：

<script>
(function(d,s){
var e = d.createElement(s),
m = d.getElementsByTagName(s)[0];
e.async = 1;
e.src = '//externalsite.com/file.js';
m.parentNode.insertBefore(e,m);
})(document,'script');
</script>

Answer 2

这个文件是怎么加载的？

异步，保持脚本顺序。
尽管您将其编写为 html<script>标记，但 GTM 会加载它并创建一个 DOM 脚本元素。
这大致是使用的代码（不是直接取自 GTM 的缩小版）：

var script = document.createElement('script');
script.src = '/path/to/file.js';
script.async = false;

它会影响页面的加载时间吗？

是的。虽然 GTM 加载脚本的方式对页面加载速度的影响尽可能小，但脚本仍然具有重大影响。
有一些方法可以减轻影响，尽管第三方通常更难优化。

Answer 3

放置在 GTM 自定义 HTML 标记中的任何外部脚本都将以与加载其他标记类似的方式加载。由于 GTM 标签是异步加载的，因此不会影响页面的加载时间。