NuxtServerInit: Add Google-Tag-Manager scripts to head an body

问题

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

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

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

This one needs to be in the head

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

And that one at the beginning of the body

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

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.

回答1:

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

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);
}

Then load it in from nuxt.config.js:

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

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.

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.

来源：https://stackoverflow.com/questions/59253819/nuxtserverinit-add-google-tag-manager-scripts-to-head-an-body

标签

google-tag-manager

nuxt.js