NuxtServerInit：添加Google-Tag-Manager脚本来显示正文

Question

我使用一个nuxt实例为使用不同语言的多个域提供服务。对于每个域，我使用一个不同的Google Tag Manager帐户。

在nuxtServerInit中，我将主机名以及Google-Tag-Manager ID添加到商店中。

现在，我正在寻找一种将Javascript代码片段添加到我的nuxt项目中的方法。

这个必须在脑子里

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXX);</script>
<!-- End Google Tag Manager -->

还有那个刚开始的人

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

我的第一个想法是，以编程方式将此代码添加到文档中，但我不知道如何。

有什么建议或更好的主意来做到这一点？

我已经尝试使用社区解决方案。但是它不支持不同的ID。Can anyone help implementing Nuxt.js Google Tag Manager with function based id该解决方案的主要问题是本身使用的模块。一个模块仅被调用一次，但在每次请求时都需要调用其他模块。

Answer 1

[This question是相似的，并帮助我找到了这个答案。

在plugins/gtm.js处创建一个新插件（或任何您要命名的插件）：

// plugins/gtm.js

let gtmKey;

// In this example I care about the page title but you can use other properties if you'd like
switch(document.title) {
  case 'Title 1':
    gtmKey = 'GTM-XXXXXX1';
    break;
  case 'Title 2':
    gtmKey = 'GTM-XXXXXX2';
    break;
  default:
    break;
}

export default () => {
  if (!gtmKey) { // In case I have other pages not in the switch statement above
    return;
  }
  /*
  ** Include Google Tag Manager
  */
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer', gtmKey);
}

然后从nuxt.config.js中加载：

// nuxt.config.js
export default {
  ...
  plugins: [{ src: '~/plugins/gtm.js', mode: 'client' }],
  ...
}

---

注1：我真的不喜欢将标题硬编码到此插件中的方式，因为在我的其中一个页面上标题的更新可能会在我不知情的情况下破坏它。欢迎在这里提出建议。

注2：我的eslint抱怨在核心GTM闭包之前（就在(function...之前）没有分号，所以我实际上只是使用// eslint-disable禁用了整个文件的eslint。您可以仅将其禁用。