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

import { createGtag } from "vue-gtag";

createGtag({
  tagId: "GA_MEASUREMENT_ID"
})

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 { createGtag } from "vue-gtag";

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

Manual mode

The plugin initializes automatically by default; however, it can be delayed if necessary.

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

createGtag({
  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>