TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Vue Google Tag Manager

    *** Maintainers & Contributors welcome ***

    Simple implementation of Google Tag Manager in Vue.js

    Standard - JavaScript Style Guide

    This plugin will helps you in your common GTM tasks.

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


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

    Optionnals dependencies

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


    npm install vue-gtm -S or yarn add vue-gtm if you use Yarn package manager

    Here is an example of configuration, compose with it on your own :

    import VueGtm from 'vue-gtm';
    import VueRouter from 'vue-router';
    const router = new VueRouter({ routes, mode, linkActiveClass });
    Vue.use(VueGtm, {
      id: 'GTM-xxxxxxx' or ['GTM-xxxxxxx', 'GTM-xxxxxxx'], // Your GTM single container ID or array of container ids ['GTM-xxxxxxx', 'GTM-yyyyyyy']
      queryParams: { // Add url query string when load gtm.js with GTM ID (optional)
      defer: false, // defaults to false. Script can be set to `defer` to increase page-load-time at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible)
      enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
      debug: true, // Whether or not display console logs debugs (optional)
      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) 
      vueRouter: router, // Pass the router instance to automatically sync with router (optional)
      ignoredViews: ['homepage'], // If router, you can exclude some routes name (case insensitive) (optional)
      trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
      baseUrl: '', // defaults to ''. Allows the base url modification from to a custom domain. Necessary for GTM Server-side usage

    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.


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

    export default {
      name: 'MyComponent',
      data() {
        return {
          someData: false
      methods: {
        onClick: function() {
            event: null, // Event type [default = 'interaction'] (Optional)
            category: 'Calculator',
            action: 'click',
            label: 'Home page SIP calculator',
            value: 5000,
            noninteraction: false // Optional
      mounted() {
        this.$gtm.trackView('MyScreenName', 'currentpath');

    The passed variables are mapped with GTM data layer as follows

    	'event': event || 'interaction',
    	'target': category,
    	'action': action,
    	'target-properties': label,
    	'value': value,
    	'interaction-type': noninteraction,

    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.

    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 you 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 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 :

    const myRoute = {
      path: 'myRoute',
      name: 'MyRouteName',
      component: SomeComponent,
      meta: { gtm: 'MyCustomValue' }

    This will use MyCustomValue as the view name.


    Enable plugin

    Check if plugin is enabled


    Enable plugin


    Disable plugin


    Debug plugin

    Check if plugin is in debug mode


    Enable debug mode


    Disable plugin



    ScreamZ vue-analytics


    npm i vue-gtm-custom

    DownloadsWeekly Downloads






    Unpacked Size

    36.6 kB

    Total Files


    Last publish


    • jonascsantos
    • butopea