# Get started

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](https://developers.google.com/analytics/devguides/collection/gtagjs), read the gtag.js developer guide.

{% hint style="success" %}
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. 
{% endhint %}

{% hint style="info" %}
Requires Vue 3 installed
{% endhint %}

## 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.

```javascript
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.

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

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

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

```

{% hint style="info" %}
Refer to the gtag documentation for detailed guidance on selecting the appropriate tracking code.
{% endhint %}

## Initial config parameters

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

```javascript
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.

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

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

```html
// 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>
```