gtag.js consent management

Built-in GDPR-complaint composable

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

Usage

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

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

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

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

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

createGtag({
  tagId: 'GA_MEASUREMENT_ID',
  initMode: 'manual'
})
<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>

Last updated