在Google Tag Manager自定义HTML标签中添加Link Rel标签仅生效第一个的问题

你当前的写法存在核心错误：你创建了一个<script>元素，然后把多个link标签的字符串塞进它的innerHTML里。但浏览器会把script元素的内容当成JavaScript代码处理，而非HTML内容——这就导致只有第一个link标签被异常解析出来，剩下的都被浏览器忽略了。

方案1：逐个创建link元素（直观易维护） #

直接通过DOM API逐个生成每个link标签，再添加到页面head中，这是最稳妥的实现方式：

<script>  
(function() {
  // 把所有需要添加的link配置存入数组
  const linkConfigs = [
    { rel: 'preconnect', href: 'https://cdn.abc.com/', crossorigin: true },
    { rel: 'dns-prefetch', href: 'https://cdn.def.com/' },
    { rel: 'preconnect', href: 'https://sdk-02.fhi.com/', crossorigin: true },
    { rel: 'dns-prefetch', href: 'https://sdk-02.ret.com/' }
  ];

  linkConfigs.forEach(config => {
    const linkTag = document.createElement('link');
    linkTag.rel = config.rel;
    linkTag.href = config.href;
    // 处理crossorigin属性
    if (config.crossorigin) {
      linkTag.crossorigin = '';
    }
    document.head.appendChild(linkTag);
  });
})();
</script>

方案2：用文档片段批量添加（适合批量场景） #

如果不想逐个创建标签，可以把HTML字符串转换成DOM片段，一次性插入head：

<script>  
(function() {
  const linkHtml = `
    <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/" />
  `;
  // 将HTML字符串转为DOM片段
  const fragment = document.createRange().createContextualFragment(linkHtml);
  document.head.appendChild(fragment);
})();
</script>

在Google Tag Manager中设置这个自定义HTML标签时，触发条件建议选择DOM Ready或Page View（优先选DOM Ready，确保head元素已加载完成，避免代码执行报错）。

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