Get started

vue-gtag documentation page

The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform. For general gtag.js documentation, read the gtag.js developer guide.

Before starting make sure to know the basic of Google global site tag (gtag.js) already. Important parts of the plugin API have their link to the official documentation to help you out.

Whenever you don't understand something and the documentation lacks information, just create an issue on Github.

Install

Requires Vue 3 installed

$ npm add vue-gtag-next

This version will be released after vue-gtag@2 major release for Vue 3

Add plugin to your application

There are few ways to install the plugin. The easiest way is to directly pass the property object when the plugin is installed. This object accepts an id which is mandatory to bootstrap the tracking system.

import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag-next";

const app = createApp(App);

app.use(VueGtag, {
  property: {
    id: "GA_MEASUREMENT_ID"
  }
});

app.mount("#app");

All other options available are listed here and they are all modifiable via Composition Api at any moment.

Initial parameters options

During the initial configuration, anything that goes inside the params object will be attached to the initial config call.

For example you can pass the user_id, send_page_view, the linker object or anything else you need. Just check the official documentation for that.

import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag-next";

const app = createApp(App);

app.use(VueGtag, {
  property: {
    id: "GA_MEASUREMENT_ID",
    params: {
      user_id: "12345",
      send_page_view: false,
      linker: {
        domain: ['example.com']
      }
    }
  }
});

app.mount("#app");

Since most of the time this plugin is used for Single Page Applications, the initial configuration will pass send_page_view as false by default to manual track pageviews but it can be overwritten.

click here for the official manual pageview documentation