Page refresh required after optIn is executed to get cookies

[markabruce]

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

• 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: [email protected]

Then, specify:

1. Operating system: Mac OS
2. 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>

[bsiegrist]

is there already a solution for this? would be nice if the cookies are set as soon as the optIn() is called...

[vesper8]

I noticed the same thing and found the solution in the documentation.

Instead of setting your plugin with enabled:false set it with bootstrap:false and after you get your consent you can call the bootstrap and the cookies will be immediately available

https://matteo-gabriele.gitbook.io/vue-gtag/custom-installation