implement new consentment policy

components/Common/CookiesConsent.vue

@@ -14,7 +14,7 @@
       <v-row justify="center">
         <v-col cols="12">
           <img
-            src="/images/logos/cookies/A_cute_and_beautiful_illustration_of_a_cookie_list-removebg-preview.png"
+            src="/images/components/cookie-consent/A_cute_and_beautiful_illustration_of_a_cookie_list-removebg-preview.png"
             alt="Cookie"
             class="cookie-image"
           />
@@ -219,12 +219,16 @@ const { cookies } = useCookies()
 const showCustomizationOptions = ref(false)
 const showNotification = ref(false)
 
-const { gtag } = useGtag()
+const {
+  gtag,
+  initialize: initializeGTag
+} = useGtag()
 
 /**
  * Cookies options
  */
 const cookiesPreferences: Ref<CookiesPreferences> = ref({
+  consent: COOKIE_CONSENT_CHOICE.NONE,
   analyticsConsent: true,
   advertisingConsent: true,
   adUserDataConsent: true,
@@ -260,6 +264,8 @@ const setupCookies = (
 ) => {
   cookies.set('cookie_consent', choice, duration + 'd')
 
+  initializeGTag()
+
   cookiesPreferences.value.analyticsConsent = analyticsConsent
   cookies.set('analytics_consent', analyticsConsent.toString(), duration + 'd')
 
@@ -286,11 +292,15 @@ const setupCookies = (
 
   gtag('consent', 'update', {
     analytics_storage: analyticsConsent ? 'granted' : 'denied',
-    ad_storage: analyticsConsent ? 'granted' : 'denied',
+    ad_storage: advertisingConsent ? 'granted' : 'denied',
     ad_user_data: adUserDataConsent ? 'granted' : 'denied',
     ad_personalization: adPersonalizationConsent ? 'granted' : 'denied',
   })
 
+  if (!analyticsConsent) {
+    purgeAnalyticsCookies()
+  }
+
   // Store consent date and status
   localStorage.setItem(
     'cookie_consent',
@@ -306,6 +316,17 @@ const setupCookies = (
   )
 }
 
+const purgeAnalyticsCookies = () => {
+  cookies.remove('_ga')
+  cookies.remove('_gat')
+  cookies.remove('_gid')
+  cookies.keys().forEach((name) => {
+    if (/_ga_\w{10}/.test(name)) {
+      cookies.remove(name)
+    }
+  })
+}
+
 /**
  * Accept and setup all the cookies and close the popup
  */
@@ -345,6 +366,13 @@ const continueWithoutAccepting = () => {
 }
 
 const loadActivePreferences = () => {
+  const cookieConsent = cookies.get(
+    'cookie_consent'
+  ) as COOKIE_CONSENT_CHOICE | null
+
+  cookiesPreferences.value.consent =
+    cookieConsent !== null ? cookieConsent : COOKIE_CONSENT_CHOICE.NONE
+
   cookiesPreferences.value.analyticsConsent =
     cookies.get('analytics_consent') !== 'false'
   cookiesPreferences.value.advertisingConsent =
@@ -359,11 +387,10 @@ const loadActivePreferences = () => {
  * Check if the user has already accepted the cookies when page is mounted
  */
 onMounted(() => {
-  const cookieConsent = cookies.get('cookie_consent')
-  if (!cookieConsent) {
+  loadActivePreferences()
+  if (cookiesPreferences.value.consent === COOKIE_CONSENT_CHOICE.NONE) {
     showPopup()
   }
-  loadActivePreferences()
 })
 </script>
 

nuxt.config.ts

@@ -173,5 +173,6 @@ export default defineNuxtConfig({
   },
   gtag: {
     id: 'G-L8PZ9TEFNX',
+    enabled: false,
   },
 })

types/enum/enums.ts

@@ -33,4 +33,5 @@ export const enum COOKIE_CONSENT_CHOICE {
   ACCEPTED = 'accepted',
   DECLINED = 'declined',
   CUSTOMIZED = 'customized',
+  NONE = 'none',
 }

types/interface.d.ts

@@ -1,4 +1,5 @@
 import { ActionMenuItemType } from "~/types/enum/layout";
+import { COOKIE_CONSENT_CHOICE } from '~/types/enum/enums'
 
 interface ActionMenuItem {
   type: ActionMenuItemType
@@ -166,6 +167,7 @@ interface ContactFormData {
 }
 
 interface CookiesPreferences {
+  consent: COOKIE_CONSENT_CHOICE,
   analyticsConsent: boolean,
   advertisingConsent: boolean,
   adUserDataConsent: boolean,