> For the complete documentation index, see [llms.txt](https://matteo-gabriele.gitbook.io/vue-gtag/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matteo-gabriele.gitbook.io/vue-gtag/gtag.js-consent-management.md).

# gtag.js consent management

This composable utilizes the createGtag method and manages cookie detection, automatic page reloads, and plugin instantiation.

### Usage

```typescript
import { configure, useConsent } from 'vue-gtag'

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

const { hasConsent, acceptAll, rejectAll, acceptCustom } = useConsent()
```

{% hint style="warning" %}
Remember to set "initMode" to "manual" when using this composable to avoid initializing twice.
{% endhint %}

### Features

* Automatic consent detection based on GA cookie presence
* Methods to accept/reject all tracking features
* Custom consent management for granular control
* Automatic page reload after consent changes to ensure proper tracking state

### API

#### Return Values

| Name           | Type                                  | Description                                                        |
| -------------- | ------------------------------------- | ------------------------------------------------------------------ |
| `hasConsent`   | `Ref<boolean>`                        | Reactive reference indicating if user has previously given consent |
| `acceptAll`    | `() => void`                          | Grants consent for all tracking features                           |
| `rejectAll`    | `() => void`                          | Denies consent for all tracking features                           |
| `acceptCustom` | `(params: GtagConsentParams) => void` | Updates consent for specific tracking features                     |

#### Example

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

createGtag({
  tagId: 'GA_MEASUREMENT_ID',
  initMode: 'manual'
})
```

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

const { acceptAll, rejectAll, hasConsent } = useConsent();
</script>

<template>
  <div v-if="hasConsent">I have consent</div>
  <div v-else>
    <button @click="rejectAll">Reject all</button>
    <button @click="acceptAll">Accept All</button>
  </div>
</template>
```