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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://matteo-gabriele.gitbook.io/vue-gtag/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.