NuxtServerInit:添加Google-Tag-Manager脚本来引导正文 [英] NuxtServerInit: Add Google-Tag-Manager scripts to head an body

问题描述

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

I use one nuxt instance to serve several domains with different languages. For each domain I use a different Google-Tag-Manager account.

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

Within nuxtServerInit I add to the store the hostname and also the Google-Tag-Manager ID.

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

Now I am looking for a way to add the Javascript snippets to my nuxt project.

这个应该在脑子里

<!-- 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) -->

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

My first idea is it to add this code programmatically to the document, but I don't know how.

有什么建议或更好的主意吗?

Any suggestions or better idea to accomplish this?

我已经尝试使用社区解决方案.但是它不支持不同的ID.

I already tried to use the community solution. But it does not support different ID's. Can anyone help implementing Nuxt.js Google Tag Manager with function based id The main problem of this solution is the module which is used itself. A module is only called once but it needed to be something else to be called on each request.

推荐答案

此问题与之相似，并帮助我找到了答案.

This question is similar and helped me find the answer to this one.

在plugins/gtm.js(或您要为其命名的任何名称)上创建一个新插件:

Create a new plugin at plugins/gtm.js (or whatever you want to name it):

// 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:我真的不喜欢将标题硬编码到此插件中的方式，因为在我的其中一个页面上标题的更新可能会在我不知情的情况下破坏它.欢迎在这里提出建议.

---

Note 1: I don't really like how I've hardcoded the titles into this plugin since an update of the title on one of my pages could break this without me knowing. Suggestions here are welcome.

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

Note 2: My eslint was complaining about no semicolon before the core GTM closure (just before the (function...) so I actually just disabled eslint for this whole file with // eslint-disable. You could just disable it for the line.

这篇关于NuxtServerInit:添加Google-Tag-Manager脚本来引导正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！