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 you start, ensure you have a basic understanding of the Google Global Site Tag (gtag.js). Key parts of the plugin API include links to official documentation for further assistance.

If you encounter difficulties understanding something and the documentation is insufficient, create an issue on GitHub.

Requires Vue 3 installed

Install

npm install vue-gtag

Installation

I suggest using the `configure` method to install vue-gtag, as it has a smaller initial bundle size and won't add all methods to the Vue instance. While you won't be able to use $gtag in your templates, you can still import each method individually as needed.

import { configure } from "vue-gtag";

configure({
  tagId: "GA_MEASUREMENT_ID"
})

Use the `createGtag` method if you wish to install global properties. This will increase the bundle size because all methods will be bundled together when injected into the Vue instance. You will be able to use $gtag in your template.

import { createApp } from 'vue'
import { createGtag } from "vue-gtag";

const gtag = createGtag({
  tagId: "GA_MEASUREMENT_ID"
})

const app = createApp({ ... })
app.use(gtag)

Refer to the gtag documentation for detailed guidance on selecting the appropriate tracking code.

Initial config parameters

Use the config property to add additional parameters to your initial config call

import { configure } from "vue-gtag";

configure({
  tagId: "GA_MEASUREMENT_ID",
  config: {
    'campaign_id': "ABCD"
  }
})

Manual mode

The plugin initializes automatically by default but can be delayed if necessary.

// main.ts
import { configure } from "vue-gtag";

configure({
  tagId: "GA_MEASUREMENT_ID",
  initMode: "manual"
})

// component.vue
<script lang="ts" setup>
import { addGtag } from "vue-gtag";

function handleClick() {
   addGtag()
}
</script>

<template>
   <div>
     <button @click="handleClick">Start tracking</button>
   </div>
</template>