API

Plugin default state

Default plugin installation properties. All properties can be modified using the useState helper method

const state = reactive({
  property: null,
  isEnabled: true,
  disableScriptLoader: false,
  useDebugger: false,
  globalObjectName: "gtag",
  dataLayerName: "dataLayer",
  resourceURL: "https://www.googletagmanager.com/gtag/js",
  preconnectOrigin: "https://www.googletagmanager.com",
  customResource: null,
  appName: null,
  appId: null,
  appVersion: null,
});

Changes to the gtag global namespace can be done only during plugin installation

useState

Type: function

Default value: plugin state

The useState method returns the plugin default state properties as single ref . This is useful in case we want to add/edit all plugin options outside the plugin install snippet or if we simply want to retrieve its properties and render them in a template.

import { useState } from 'vue-gtag';

export default {
  setup() {
    const { property } = useState();
    const addDomain = () => {
      property.value = {
        id: "GA_MEASUREMENT_ID",
      };
    };

    return {
      addDomain,
    };
  },
};

trackRouter

Type: function

Using trackRouter, will help you connect the plugin to your VueRouter instance and start tracking page changes automatically. This method accepts the VueRouter instance as first parameter and options as second parameter.

Tracker router default options:

const routerState = reactive({
  template: null,
  useScreenview: false,
  skipSamePath: true,
});

useGtag

Type: function

The useGtag method returns all vue-gtag methods.

• config

• event

• customMap

• disable

• exception

• linker

• pageview

• screenview

• purchase

• query

• refund

• set

• time

import { useGtag } from "vue-gtag";

export default {
  setup() {
    const { event } = useGtag()
    
    const login = () => {
      event('login', { method: 'Google' })
    }

    return {
      login
    };
  },
};

If the method you are looking for is not listed here, you can use the query method which directly queries the gtag instance.

import { useGtag } from "vue-gtag";

export default {
  setup() {
    const { query } = useGtag()
    
    const login = () => {
      query('event', 'login', { method: 'Google' })
    }

    return {
      login
    };
  },
};

it is also possible to simply export the methods from the package itself

import { customMap, event } from "vue-gtag";

export default {
  setup() {
    const track = () => {
      customMap({ 'dimension2': 'age' })
      event('age_dimension', { age: 35 })
    }

    return {
      track
    };
  },
};

isTracking

Type: Boolean

Default value: false

When true the plugin is able to collect data and push the inside the dataLayer, but it doesn't mean that the gtag.js script is loaded yet.

import { isTracking } from "vue-gtag";

export default {
  setup() {
    return {
      isTracking,
    };
  },
};

isReady

Type: Boolean

Default value: false

When true the plugin is fully bootstrapped: the data is collected and pushed inside the dataLayer and the gtag.js script is fully loaded.

import { isReady } from "vue-gtag";

export default {
  setup() {
    return {
      isReady,
    };
  },
};