How to add gtm datalayer to nuxt.js component?

1

npm install vue-gtm

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import Vue from 'vue';
import VueGtm from 'vue-gtm';

export default ({app}) => {
  Vue.use(VueGtm, {
    id: '<YOUR_GTM_ID>',
    enabled: true,
    debug: false,
    loadScript: true,
    vueRouter: app.router,
  });
};

1
2
3
4
5
6
7
8

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<template>
  <!-- Your component HTML code -->
</template>

<script>
export default {
  // Data or Methods for your component
  
  mounted() {
    this.$gtm.push({
      event: 'pageview',
      pageType: 'example', // Optional - custom data
      // Add more custom data as needed
    });
  },
};
</script>