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()
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
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