🔧 consent cookies

components/CookieBanner.vue

@@ -7,65 +7,39 @@
           <nuxt-link to="/cookie-notice" target="_blank" class="is-underlined"
             >Cookie Policy</nuxt-link
           >
-          for details. <span class="mx-2">|</span>
+          for details. <span class="hidden md:visible mx-2">|</span>
         </h2>
       </template>
     </CookieControl>
-    <!-- <div v-if="!hasDisplayedCookieBanner" class="cookie-banner">
-      <div
-        class="notices flex overflow-hidden pointer-events-none fixed p-[2em] inset-0 is-bottom items-center w-full z-[1000]">
-        <div
-          role="alertdialog"
-          class="snackbar is-success is-bottom-left py-2 px-4 mb-3">
-          <div>
-            {{ $t('cookies.notice') }}, see
-            <nuxt-link to="/cookie-notice" target="_blank" class="is-underlined"
-              >Cookie Policy</nuxt-link
-            >
-            for details.
-          </div>
-          <div class="bar ml-4 mr-4" />
-          <div class="action is-success">
-            <NeoButton variant="text" no-shadow @click="declineCookies">
-              {{ $t('cookies.decline') }}
-            </NeoButton>
-            <NeoButton
-              variant="text"
-              no-shadow
-              class="font-bold ml-3"
-              data-testid="cookie-banner-button-accept"
-              @click="acceptCookies">
-              {{ $t('cookies.accept') }}
-            </NeoButton>
-          </div>
-        </div>
-      </div>
-    </div> -->
   </transition>
 </template>
 
 <script lang="ts" setup>
-// import { NeoButton } from '@kodadot1/brick'
+const cookieControl = useCookieControl()
+const { grantConsent, revokeConsent } = useGtag()
 
-// const cookieControl = useCookieControl()
+const cookieConsentGiven = () =>
+  cookieControl.cookiesEnabledIds.value?.includes('ga') ? true : false
 
-// import { useState } from 'vue-gtag-next'
+watch(
+  () => cookieControl.cookiesEnabledIds.value,
+  (current, previous) => {
+    if (!previous?.includes('ga') && current?.includes('ga')) {
+      window.location.reload()
+    } else {
+      window.location.reload()
+    }
+  },
+  { deep: true },
+)
 
-// const { isEnabled } = useState()
-// const hasDisplayedCookieBanner = ref(
-//   localStorage.getItem('cookies_enabled') !== null || false,
-// )
-// const acceptCookies = () => {
-//   // if (isEnabled) {
-//   //   isEnabled.value = true
-//   // }
-//   localStorage.setItem('cookies_enabled', '1')
-//   hasDisplayedCookieBanner.value = true
-// }
-// const declineCookies = () => {
-//   localStorage.setItem('cookies_enabled', '0')
-//   hasDisplayedCookieBanner.value = true
-// }
+onMounted(() => {
+  if (cookieConsentGiven()) {
+    grantConsent()
+  } else {
+    revokeConsent()
+  }
+})
 </script>
 
 <style lang="scss">
@@ -82,17 +56,18 @@
 
 /* Custom Cookie #Modal */
 .cookieControl__ModalContent {
-  @apply text-text-color bg-background-color border border-border-color shadow-primary items-center;
+  @apply text-text-color bg-background-color border border-border-color shadow-primary items-center overflow-y-clip;
 }
 .cookieControl__ModalContent :not(button) {
   @apply text-text-color;
 }
 button.cookieControl__ModalClose {
+  font-family: 'Font Awesome 6 Sharp';
   @apply invisible absolute top-3 right-0 h-0 w-0;
 }
 button.cookieControl__ModalClose:after {
-  @apply absolute top-1 right-5 text-xs text-gray-800 font-medium bg-white hover:bg-gray-100 hover:text-gray-800 rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none visible;
-  content: 'X';
+  @apply absolute top-1 right-5 text-xs text-text-color font-medium bg-background-color hover:bg-gray-100 hover:text-gray-800 rounded-lg px-4 py-2.5 duration-300 transition-colors focus:outline-none visible;
+  content: '\f00d';
 }
 .cookieControl__ModalButtons {
   @apply grid grid-cols-3 gap-4 mt-4 shrink-0 w-full;
@@ -103,6 +78,9 @@ button.cookieControl__ModalClose:after {
 .cookieControl__ModalContent .cookieControl__ModalInputWrapper input + button {
   @apply bg-gray-400;
 }
+.cookieControl__ModalContent input:checked + button::before {
+  @apply bg-text-color;
+}
 .cookieControl__ModalContent
   .cookieControl__ModalInputWrapper
   input:checked
@@ -115,33 +93,4 @@ button.cookieControl__ModalClose:after {
   + button {
   @apply bg-gray-300;
 }
-
-.cookie-banner {
-  .snackbar {
-    align-self: flex-start;
-    height: 2.188rem;
-    max-width: 720px;
-
-    @media screen and (max-width: 768px) {
-      height: auto;
-      width: 11.875rem;
-      flex-direction: column;
-      display: flex;
-      align-self: auto !important;
-
-      .action {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        width: 100%;
-      }
-
-      .bar {
-        height: 1px;
-        width: 100%;
-        margin-top: 11px;
-      }
-    }
-  }
-}
 </style>

nuxt.config.ts

@@ -273,6 +273,7 @@ export default defineNuxtConfig({
     '@nuxtjs/google-fonts',
     '@nuxtjs/device',
     '@dargmuesli/nuxt-cookie-control',
+    'nuxt-gtag',
   ],
 
   image: {
@@ -335,35 +336,6 @@ export default defineNuxtConfig({
       },
     },
 
-    colors: {
-      // barTextColor: '#1D1E1C',
-      // modalOverlay: '#000',
-      // barBackground: '#fff',
-      // barButtonColor: '#fff',
-      // modalTextColor: '#1D1E1C',
-      // modalBackground: '#fff',
-      // modalOverlayOpacity: 0.8,
-      // modalButtonColor: '#fff',
-      // modalUnsavedColor: '#fff',
-      // barButtonHoverColor: '#000000',
-      // barButtonBackground: '#1D1E1C',
-      // modalButtonHoverColor: '#000000',
-      // modalButtonBackground: '#1D1E1C',
-      // controlButtonIconColor: '#000',
-      // controlButtonBackground: '#fff',
-      // barButtonHoverBackground: '#C5DFAB',
-      // checkboxActiveBackground: '#C5DFAB',
-      // checkboxInactiveBackground: '#1D1E1C',
-      // modalButtonHoverBackground: '#C5DFAB',
-      // checkboxDisabledBackground: '#F3F3F3',
-      checkboxActiveBackground: '#04af00',
-      // controlButtonIconHoverColor: '#fff',
-      // controlButtonHoverBackground: '#000',
-      // checkboxActiveCircleBackground: '#000',
-      // checkboxInactiveCircleBackground: '#fff',
-      // checkboxDisabledCircleBackground: '#fff',
-    },
-
     cookies: {
       necessary: [
         {
@@ -377,33 +349,22 @@ export default defineNuxtConfig({
       optional: [
         {
           id: 'ga',
-          identifier: 'ga',
           name: 'Google Analytics',
           description:
             'Analytics cookies help us understand how visitors interact with websites by collecting and reporting information anonymously.',
-          initialState: true,
           src: `https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_ID}`,
           async: true,
           targetCookieIds: ['_ga', '_gat', '_gid', 'ga-cookie-consent'],
-          accepted: () => {
-            // window.dataLayer = window.dataLayer || [];
-            // function gtag(){dataLayer.push(arguments);}
-            // gtag('js', new Date());
-            // gtag('config', '${process.env.GOOGLE_ANALYTICS_ID}');
-
-            window.dataLayer = window.dataLayer || []
-            window.dataLayer.push({
-              'gtm.start': new Date().getTime(),
-              event: 'gtm.js',
-              config: process.env.GOOGLE_ANALYTICS_ID,
-            })
-          },
-          declined: () => {},
         },
       ],
     },
   },
 
+  gtag: {
+    id: process.env.GOOGLE_ANALYTICS_ID,
+    initialConsent: false,
+  },
+
   site: {
     url: process.env.BASE_URL || 'http://localhost:9090',
     strictNuxtContentPaths: true,

package.json

@@ -148,13 +148,13 @@
     "jsdom": "^19.0.0",
     "lint-staged": "^12.5.0",
     "nuxt": "^3.10.1",
+    "nuxt-gtag": "^1.2.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "sass": "^1.70.0",
     "tailwindcss": "^3.4.1",
     "vitest": "^0.34.6",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-gtag": "^2.0.1"
+    "vue-eslint-parser": "^9.4.2"
   },
   "resolutions": {
     "@apollo/federation": "0.38.1",