如何在Nuxt/Vue网站中全局添加TradeDoubler跟踪脚本？

Nuxt 项目 #

Nuxt3 #

直接在nuxt.config.ts中全局配置脚本插入位置，自动适配所有页面：

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          // 配置插入到body起始标签之后，符合官方要求
          position: 'bodyOpen',
          innerHTML: `
            (function(i,s,o,g,r,a,m){i['TDConversionObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script', 'https://svht.tradedoubler.com/tr_sdk.js', 'tdconv');
          `
        }
      ],
      // 禁用脚本内容转义，保证代码正常执行
      __dangerouslyDisableSanitizers: ['script']
    }
  }
})

Nuxt2 #

两种实现方式二选一即可：

1. 配置nuxt.config.js全局注入：

export default {
  head: {
    script: [
      {
        body: true,
        innerHTML: `
          (function(i,s,o,g,r,a,m){i['TDConversionObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script', 'https://svht.tradedoubler.com/tr_sdk.js', 'tdconv');
        `
      }
    ],
    __dangerouslyDisableSanitizers: ['script']
  }
}

2. 在全局布局layouts/default.vue模板顶部插入：

<template>
  <div class="layout-wrapper">
    <!-- 放在布局最顶部，对应body起始标签后位置 -->
    <script>
      (function(i,s,o,g,r,a,m){i['TDConversionObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script', 'https://svht.tradedoubler.com/tr_sdk.js', 'tdconv');
    </script>
    <!-- 原有布局代码 -->
    <Nuxt />
  </div>
</template>

Vue 项目 #

直接修改项目入口HTML文件public/index.html，在body标签后第一行插入脚本即可，所有页面都会自动加载：

<body>
  <!-- Start TradeDoubler Landing Page Tag -->
  <script language="JavaScript"> 
    (function(i,s,o,g,r,a,m){i['TDConversionObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script', 'https://svht.tradedoubler.com/tr_sdk.js', 'tdconv'); 
  </script>
  <!-- End TradeDoubler tag-->
  <div id="app"></div>
  <!-- 原有其他代码 -->
</body>

• 页面加载完成后打开浏览器开发者工具控制台，输入window.tdconv，如果返回函数对象则说明脚本加载成功
• 路由切换后再次执行上述命令，确认对象未丢失即可
• 如果站点配置了内容安全策略（CSP），需要将tradedoubler.com加入允许的脚本加载源列表

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