Tag Manager in Nuxt Application?

Tag Manager
#1

Hello,

does anybody know how to integrate matomo tag manager into a nuxt project/application?

The module nuxt-matomo (https://github.com/pimlie/nuxt-matomo) is just for tracking code and not for tag manager.

Has anyone experience with this?

Best regards,

Timo

#2

Hello,

No, sorry, but it seems very similar to Angular and React no? So I guess it will be all about tweaking the template to add a datalayer event when a new page is generated no?
So it is more about discussing with a Nuxt developed to make her/him add the line of code when the new page is loaded and finished, no?

#3

The question is about how to integrate the tag manager code the right way and how to handle route changes (and also dynamic page titles) to get the right data to the tag manager.

I work on a solution but it’s very hard because I have no experience with this. So my question if heres somebody with some experiences to share.

#4

@iparker I am looking into the same task. Did you come up with a solution?

#5

Not in production for now, but it works pretty well so far: in my Matomo container I have a tag (e.g. Matomo Analytics) with two triggers: ‘Pageview’ - for the initial page request on the server (SSR/static site) and ‘History change’ for all further requests when nuxt switches to SPA mode.

In nuxt I have a plugin (plugins/matomo.client.js):

/* eslint-disable */

export default () => {
  // manually add the script to the DOM
  const script = document.createElement('script')

  script.innerHTML = `
    <!-- Your Matomo Tag Manager Code -->
  `

  document.head.appendChild(script)
}

Then add the plugin to nuxt.config.js.

I think a better and more elegant way would be to write something that triggers _mtm.push({‘event’: ‘mtm.PageView’}); everytime a route changes, but for now I’m happy to have something.

1 Like
#6

I have a version here that you can use with Matomo tag manager. The container tag fires both on page load and on virtual navigation via nuxt’s routing.

npm i @agency-undone/nuxt-module-matomo --save

1 Like
#7

Nuxt 3 very recently added an option to append scripts to the body with UseHead. There’s an example in the official Nuxt 3 documentation at https://v3.nuxtjs.org/guide/features/head-management/

I added this to my AppLayout.vue component

<script setup>
useHead({
  script: [
    {
      src: '/scripts/your-filename.js',
      body: true
    }
  ]
})
</script>

Then I placed the tagmanager code in a .js file in the public folder (I know, that’s not great, but it works).

#8

I was able to add Matomo Tag Manager to my Nuxt Web App and combine it with nuxt-cookie-control by using vue-matomo. I’ve tried it only on development mode. I hope it can help somebody.

First I installed vue-matomo and created a plugin:

import Vue from 'vue'
import VueMatomo from 'vue-matomo'

export default ({ app }) => {
  Vue.use(VueMatomo, {
    router: app.router,
    host: 'http://localhost/matomo',
    siteId: 1,
    trackInitialView: true,
    requireConsent: true,
    requireCookieConsent: true,
  })
}

I added it into plugins in the nuxt.config.js file:

plugins: [
  // ... ,
  { src: "~/plugins/vue-matomo.js", ssr: false }
],

In the nuxt.config.js file I already had nuxt-cookie-control installed in my modules:

modules: [
  // ... ,
  "nuxt-cookie-control"
],

Then I configured the nuxt-cooke-control options:

cookies: {
  // ... ,
  necessary: [
    // ...
  ],
  optional: [
    {
        name: "Matomo",
        identifier: "matomo",
        description: "Matomo Analytics",
        initialState: false,
        async: true,
        src: "http://localhost/matomo/js/container_XXXXX.js", // the address to your container js-file, you can find it in Matomo under 'MyContainer > install code'
        accepted: () => {
          window._mtm = window._mtm || [];
          window._paq = window._paq || [];
          window._mtm.push({
            "mtm.startTime": new Date().getTime(),
            event: "mtm.Start",
          });
          window._paq.push(["rememberConsentGiven"]);
          window._paq.push(["rememberCookieConsentGiven"]);
        },
        declined: () => {
          window._paq = window._paq || [];
          window._paq.push(["forgetConsentGiven"]);
          window._paq.push(["forgetCookieConsentGiven"]);
          window.$nuxt.$cookies.remove("matomo");
        },
      },
  ]
}