如何为所有Docusaurus页面添加Tealium JavaScript跟踪代码？

一、添加中的同步脚本 #

你可以通过docusaurus.config.js的themeConfig.scripts配置项实现，指定脚本插入到<head>中，确保符合Tealium要求的靠前位置：

module.exports = {
  // 其他配置项...
  themeConfig: {
    // 其他主题配置...
    scripts: [
      {
        src: '//tagdelivery.website.com/utag.sync.js',
        type: 'text/javascript',
        position: 'head', // 强制插入到<head>标签内
      },
    ],
  },
};

二、添加起始处的异步加载脚本 #

要在<body>标签紧后方插入脚本，需要自定义Docusaurus的HTML模板，步骤如下：

1. 复制默认模板到项目本地：

cp node_modules/@docusaurus/core/lib/templates/index.html src/templates/

2. 编辑src/templates/index.html，在<body>标签的第一行插入Tealium的异步脚本：

<body>
  <!-- Tealium Universal Tag -->
  <script type="text/javascript">
    (function(a,b,c,d) {
        a='//tagdelivery.website.com/utag.js ';
        b=document;c='script';d=b.createElement(c);d.src=a;
        d.type='text/java'+c;d.async=true;
        a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})();
  </script>
  <!-- 保留原有的Docusaurus内容容器 -->
  <div id="__docusaurus">
    <%= content %>
  </div>
  <!-- 原有的其他脚本内容... -->
</body>

3. 在docusaurus.config.js中指定自定义模板路径：

module.exports = {
  // 其他配置项...
  template: './src/templates/index.html',
};

Tealium官方实施指引 #

实施 – Tealium标签管理系统（TMS）
说明：标签管理系统的安装分为两步。将下方第一个脚本复制并粘贴到每个页面的尽可能靠前的位置；再将第二个脚本复制并粘贴到每个页面起始标签的紧后方。通常若使用母版页，可将其配置在母版页上，实现所有页面继承。

内容的提问来源于stack exchange，提问作者lj-tt