本文旨在指导如何在google tag manager (gtm) 中通过自定义html标签动态且高效地向网页头部添加多个`` rel标签，如`preconnect`和`dns-prefetch`。文章将详细解析常见的实现误区，并提供两种javascript解决方案，重点推荐使用`document.createelement`方法进行语义化且健壮的元素创建，以确保所有链接都能正确加载并提升页面性能。
在现代Web开发中，为了优化页面加载性能，我们经常需要预加载（preconnect）或预解析DNS（dns-prefetch）关键资源。这些操作通常通过在HTML文档的<head>部分添加<link>标签来实现。当需要通过Google Tag Manager (GTM) 动态管理这些标签时，开发者可能会遇到一些挑战，特别是当尝试一次性添加多个链接时。本文将探讨如何在GTM中正确地实现这一目标。
理解常见的实现误区
最初尝试通过JavaScript在自定义HTML标签中添加多个<link>标签时，开发者可能会倾向于将所有链接的HTML字符串直接拼接到一个脚本元素的innerHTML中：
<script>
(function() {
var s = document.createElement('script');
s.innerHTML =
'<link rel="preconnect" href="https://cdn.abc.com/" crossorigin />' +
'<link rel="dns-prefetch" href="https://cdn.def.com/" />' +
'<link rel="preconnect" href="https://sdk-02.fhi.com/" crossorigin />' +
'<link rel="dns-prefetch" href="https://sdk-02.ret.com/" />';
document.head.appendChild(s);
})();
</script>这种方法的问题在于，它尝试将<link>标签作为文本内容放入一个<script>标签内部，而不是直接作为独立的HTML元素添加到DOM的<head>中。浏览器在解析<script>标签内部的内容时，通常不会将其视为可渲染的HTML元素，而是作为JavaScript代码或纯文本处理。因此，这种做法往往只会导致第一个（或根本没有）链接被正确识别和渲染。
解决方案一：通过字符串拼接在脚本中注入（不推荐）
尽管不是最佳实践，但可以通过将多个链接的HTML字符串拼接起来，然后赋值给一个元素的innerHTML，再将该元素添加到document.head来尝试实现。这种方法本质上是利用浏览器对innerHTML赋值时的解析能力。
(function() {
var linkHtmlStrings = [
'<link rel="preconnect" href="https://cdn.abc.com/" crossorigin />',
'<link rel="dns-prefetch" href="https://cdn.def.com/" />',
'<link rel="preconnect" href="https://sdk-02.fhi.com/" crossorigin />',
'<link rel="dns-prefetch" href="https://sdk-02.ret.com/" />',
];
// 创建一个临时的div元素，将所有link字符串作为其innerHTML
// 这种方式虽然能让浏览器解析HTML，但不是直接创建link元素
var tempDiv = document.createElement('div');
for(var i = 0; i < linkHtmlStrings.length; i++){
tempDiv.innerHTML += linkHtmlStrings[i];
}
// 将tempDiv的所有子元素（即解析后的link标签）移动到head中
while (tempDiv.firstChild) {
document.head.appendChild(tempDiv.firstChild);
}
})();注意事项：
- 这种方法虽然可能奏效，但它依赖于浏览器对innerHTML的解析行为，语义上不够清晰，且可能在某些环境下导致不可预测的行为或性能开销。
- 将非脚本内容注入到<script>标签内部本身就是一种误用。
- 更推荐直接创建DOM元素。
解决方案二：程序化创建Link元素（推荐）
最健壮和推荐的方法是使用JavaScript的DOM API来程序化地创建<link>元素，并设置其属性，然后将其直接追加到document.head。这种方法符合Web标准，语义清晰，且具有更好的兼容性和可维护性。
(function() {
var linkConfigurations = [
{"url": "https://cdn.abc.com/", "rel": "preconnect", "crossorigin": true},
{"url": "https://cdn.def.com/", "rel": "dns-prefetch", "crossorigin": false},
{"url": "https://sdk-02.fhi.com/", "rel": "preconnect", "crossorigin": true},
{"url": "https://sdk-02.ret.com/", "rel": "dns-prefetch", "crossorigin": false},
];
for (var i = 0; i < linkConfigurations.length; i++) {
var config = linkConfigurations[i];
var link = document.createElement('link');
link.rel = config.rel;
link.href = config.url;
// 根据配置设置 crossorigin 属性
if (config.crossorigin === true) {
link.crossOrigin = 'anonymous'; // 通常设置为 'anonymous'
} else if (config.crossorigin === false) {
// 如果明确设置为false，则不设置crossOrigin属性
// 或者根据需要显式删除 link.removeAttribute('crossorigin');
}
document.head.appendChild(link);
}
})();此方法的优势：
- 语义正确性： 直接创建<link>元素并将其添加到<head>中，符合HTML规范。
- 健壮性： 避免了字符串解析的潜在问题，确保了浏览器能够正确识别和处理这些链接。
- 可维护性： 配置清晰，易于添加、修改或删除链接。
- 性能： 直接操作DOM通常比复杂的字符串解析更高效。
在Google Tag Manager中部署
要将上述JavaScript代码部署到GTM中，请遵循以下步骤：
创建新的自定义HTML标签： 在GTM容器中，导航到“标签” -> “新建” -> “自定义HTML”。
-
粘贴代码： 将上述推荐的JavaScript代码（解决方案二）粘贴到自定义HTML标签的内容区域。请确保代码被包裹在<script>标签内。
<script> (function() { var linkConfigurations = [ {"url": "https://cdn.abc.com/", "rel": "preconnect", "crossorigin": true}, {"url": "https://cdn.def.com/", "rel": "dns-prefetch", "crossorigin": false}, {"url": "https://sdk-02.fhi.com/", "rel": "preconnect", "crossorigin": true}, {"url": "https://sdk-02.ret.com/", "rel": "dns-prefetch", "crossorigin": false}, ]; for (var i = 0; i < linkConfigurations.length; i++) { var config = linkConfigurations[i]; var link = document.createElement('link'); link.rel = config.rel; link.href = config.url; if (config.crossorigin === true) { link.crossOrigin = 'anonymous'; } document.head.appendChild(link); } })(); </script> 配置触发器： 选择一个合适的触发器，例如“All Pages”（页面浏览 - All Pages）以确保这些链接在所有页面加载时都被添加。如果只需要在特定页面添加，则创建相应的页面视图触发器。
标签排序（可选但推荐）： 对于preconnect和dns-prefetch这类性能优化标签，它们应该尽可能早地加载。在GTM中，自定义HTML标签通常在页面加载的早期执行。如果需要确保其优先级，可以考虑在标签排序中设置。
保存并发布： 保存标签，并在预览模式下测试其功能，确认链接已正确添加到页面<head>中。
验证与调试
部署后，您可以通过浏览器的开发者工具来验证链接是否已成功添加：
- 打开您的网站。
- 右键点击页面，选择“检查”（或“Inspect Element”）。
- 切换到“元素”（Elements）选项卡。
- 展开<head>标签，查找您通过GTM添加的<link>元素。
总结
通过Google Tag Manager动态添加<link> rel标签是优化Web性能的有效手段。为了确保所有链接都能正确、高效地加载，强烈建议采用程序化创建DOM元素的方法（即使用document.createElement('link')）。这种方法不仅符合Web标准，而且在兼容性和可维护性方面都表现出色。避免直接将HTML字符串注入到脚本的innerHTML中，以防止潜在的解析问题。通过GTM的自定义HTML标签配合适当的触发器，您可以轻松地管理这些性能关键的资源预加载指令。
