I am wanting to use my own cookie consent banner in conjunction with this library.
this.$gtag.optIn() calling works correctly, however, a full page reload or a route change is required before the events are pushed from the dataLayer and cookies are added to the cookie store.
Expected behavior
I'm not sure what I expect, I am not sure if this behaviour is correct
Actual behavior
See above.
Environment
Run this command in the project folder and fill in their results:
npm ls vue-gtag: vue-gtag@1.16.1
Then, specify:
Operating system: Mac OS
Browser and version: Chrome - Version 89.0.4389.128 (Official Build) (x86_64)
Reproducible Demo
main.js
import Vue from 'vue';
import VueGtag from 'vue-gtag';
import App from './App.vue';
import router from './router/router';
import store from './store/store';
Vue.use(VueGtag, {
config: { id: 'G-xxxxxxx' },
enabled: false,
});
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
CookieConsentBanner.vue
<template>
<!-- eslint-disable max-len -->
<div v-if="allowAdvertising === null && allowAnalytics === null" class="fixed inset-x-0 bottom-0">
<div class="bg-gray-600">
<div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
<div class="flex items-center justify-between flex-wrap">
<div class="w-0 flex-1 flex items-center">
<p class="ml-3 font-small text-white">
<span class="hidden md:inline">
PDFCloud uses cookies to deliver and improve the website experience. See our cookie policy for further details on how we use cookies and how to change your cookie settings.
</span>
</p>
</div>
<div class="order-3 ml-2 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
<button v-on:click="acceptAll" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-800 bg-white hover:bg-gray-100">
Accept all
</button>
</div>
<div class="order-3 ml-2 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
<a href="#" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-800 bg-white hover:bg-gray-100">
Manage Cookies
</a>
</div>
</div>
</div>
</div>
</div>
<!-- eslint-enable max-len -->
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
import { UPDATE_CONSENT } from '@/store/actions/consent/actions';
const { mapState: mapConsentState, mapActions: mapConsentActions } = createNamespacedHelpers('consent');
export default {
name: 'CookieConsentBanner',
computed: {
...mapConsentState({
allowAdvertising: (state) => state.allowAdvertising,
allowAnalytics: (state) => state.allowAnalytics,
}),
},
methods: {
...mapConsentActions([UPDATE_CONSENT]),
acceptAll() {
this.$gtag.optIn();
this.updateConsent({ allowAdvertising: true, allowAnalytics: true });
},
},
};
</script>
Description
I am wanting to use my own cookie consent banner in conjunction with this library.
this.$gtag.optIn()
calling works correctly, however, a full page reload or a route change is required before the events are pushed from the dataLayer and cookies are added to the cookie store.Expected behavior
Actual behavior
See above.
Environment
Run this command in the project folder and fill in their results:
npm ls vue-gtag
: vue-gtag@1.16.1Then, specify:
Reproducible Demo
main.js
CookieConsentBanner.vue