Vue Google Tag Manager

*** Contributors welcome ***

Simple implementation of Google Tag Manager in Vue.js

---

This plugin will help you in your common GTM tasks.

Note: If you are looking to track all Vuex mutations, you can use Vuex GTM plugin

If you want Vue 3 compatibility, please use the package @gtm-support/vue-gtm.

Requirements

• Vue. >= 2.0.0 < 3.0.0
• Google Tag Manager account. To send data to

Optional dependencies

• Vue Router >= 3.x < 4.x - In order to use auto-tracking of screens

Configuration

npm install @gtm-support/vue2-gtm or yarn add @gtm-support/vue2-gtm if you use Yarn package manager

Here is an example configuration:

1import VueGtm from '@gtm-support/vue2-gtm';
2import VueRouter from 'vue-router';
3const router = new VueRouter({ routes, mode, linkActiveClass });
4
5Vue.use(VueGtm, {
6  id: 'GTM-xxxxxx', // Your GTM single container ID, array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryParams: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
7  queryParams: {
8    // Add URL query string when loading gtm.js with GTM ID (required when using custom environments)
9    gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
10    gtm_preview: 'env-4',
11    gtm_cookies_win: 'x',
12  },
13  defer: false, // Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible). Defaults to false, so the script is loaded `async` by default
14  compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
15  nonce: '2726c7f26c', // Will add `nonce` to the script tag
16  enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
17  debug: true, // Whether or not display console logs debugs (optional)
18  loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
19  vueRouter: router, // Pass the router instance to automatically sync with router (optional)
20  ignoredViews: ['homepage'], // Don't trigger events for specified router names (optional)
21  trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
22});

This injects the tag manager script in the page, except when enabled is set to false. In that case it will be injected when calling this.$gtm.enable(true) for the first time.

Remember to enable the History Change Trigger for router changes to be sent through GTM.

Documentation

Once the configuration is completed, you can access vue gtm instance in your components like that:

1export default {
2  name: 'MyComponent',
3  data() {
4    return {
5      someData: false,
6    };
7  },
8  methods: {
9    onClick() {
10      this.$gtm.trackEvent({
11        event: null, // Event type [default = 'interaction'] (Optional)
12        category: 'Calculator',
13        action: 'click',
14        label: 'Home page SIP calculator',
15        value: 5000,
16        noninteraction: false, // Optional
17      });
18    },
19  },
20  mounted() {
21    this.$gtm.trackView('MyScreenName', 'currentPath');
22  },
23};

The passed variables are mapped with GTM data layer as follows

1dataLayer.push({
2  event: event || 'interaction',
3  target: category,
4  action: action,
5  'target-properties': label,
6  value: value,
7  'interaction-type': noninteraction,
8  ...rest,
9});

You can also access the instance anywhere whenever you imported Vue by using Vue.gtm. It is especially useful when you are in a store module or somewhere else than a component's scope.

It's also possible to send completely custom data to GTM with just pushing something manually to dataLayer:

1if (this.$gtm.enabled()) {
2  window.dataLayer?.push({
3    event: 'myEvent',
4    // further parameters
5  });
6}

Sync gtm with your router

Thanks to vue-router guards, you can automatically dispatch new screen views on router change! To use this feature, you just need to inject the router instance on plugin initialization.

This feature will generate the view name according to a priority rule:

• If you defined a meta field for your route named gtm this will take the value of this field for the view name.
• Otherwise, if the plugin don't have a value for the meta.gtm it will fallback to the internal route name.

Most of the time the second case is enough, but sometimes you want to have more control on what is sent, this is where the first rule shine.

Example:

1const myRoute = {
2  path: 'myRoute',
3  name: 'MyRouteName',
4  component: SomeComponent,
5  meta: { gtm: 'MyCustomValue' },
6};

This will use MyCustomValue as the view name.

Passing custom properties with page view events

If your GTM setup expects custom data to be sent as part of your page views, you can add desired properties to your route definitions via the meta.gtmAdditionalEventData property.

Example:

1const myRoute = {
2  path: 'myRoute',
3  name: 'myRouteName',
4  component: SomeComponent,
5  meta: { gtmAdditionalEventData: { routeCategory: 'INFO' } },
6};

This sends the property routeCategory with the value 'INFO' as part of your page view event for that route.

Note that the properties event, content-name and content-view-name are always overridden.

Passing dynamic properties with page view events

If you need to pass dynamic properties as part of your page views, you can set a callback that derives the custom data after navigation.

Example:

1createGtm({
2  // ...other options
3  vueRouter: router,
4  vueRouterAdditionalEventData: () => ({
5    someComputedProperty: computeProperty(),
6  }),
7});

This computes and sends the property someComputedProperty as part of your page view event after every navigation.

Note that a property with the same name on route level will override this.

Using with composition API

In order to use this plugin with composition API (inside your setup method), you can just call the custom composable useGtm.

Example:

1<template>
2  <button @click="triggerEvent">Trigger event!</button>
3</template>
4
5<script>
6import { useGtm } from '@gtm-support/vue2-gtm';
7
8export default {
9  name: 'MyCustomComponent',
10
11  setup() {
12    const gtm = useGtm();
13
14    function triggerEvent() {
15      gtm.trackEvent({
16        event: 'event name',
17        category: 'category',
18        action: 'click',
19        label: 'My custom component trigger',
20        value: 5000,
21        noninteraction: false,
22      });
23    }
24
25    return {
26      triggerEvent,
27    };
28  },
29};
30</script>

Methods

Enable plugin

Check if plugin is enabled

1this.$gtm.enabled();

Enable plugin

1this.$gtm.enable(true);

Disable plugin

1this.$gtm.enable(false);

Debug plugin

Check if plugin is in debug mode

1this.$gtm.debugEnabled();

Enable debug mode

1this.$gtm.debug(true);

Disable debug mode

1this.$gtm.debug(false);

IE 11 support

If you really need to support browsers like IE 11, you need to configure transpileDependencies: ['@gtm-support/core'] in your vue.config.js.
See gtm-support/core#20 (comment)

Credits

• mib200 vue-gtm
• ScreamZ vue-analytics