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 { createGtag, useConsent } from 'vue-gtag'

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

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

Remember to set "initMode" to "manual" when using this composable to avoid initializing twice.

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>