gtm-vue

(Currently in Beta until testing is added. Use with care.)

An easy way of using Google Tag Manager with Vue.

Heavily inspired by the package vue-gtm by mib200. This package merely adds some extra things like a useful tracking directive (v-track), and types. It will also feature testing soon.

Installation

yarn add gtm-vue

import GTMVue from 'gtm-vue';
 
// Passing in your instance of vue-router here will setup automatic view tracking
Vue.use(GTMVue, {...GTMVueOptions})

Possible options are defined by the GTMVueOptions interface

interface GTMVueOptions {
  id: string;
  enabled?: boolean;
  debug?: boolean;
  router?: VueRouter;
  ignoredViews?: string[];
  trackOnNextTick?: boolean;
  disableDirective?: boolean;
  directiveName?: string;
}

The v-track directive

<template>
  <a v-track="{category: 'internal-link', label: 'my-url', value: 100}" href="/my-url/">
    Click me!
  </a>
</template>

Options are

interface TrackEventOptions {
  event?: string;
  category: string;
  action: string;
  label: string;
  value: string | number;
  noninteraction?: boolean;
  [key: string]: any;
}