#125 - initialize GTM consent, handle load from localStorage, handle …

…update prefs
literakl · Dec 7, 2021 · c2844eb · c2844eb
1 parent 18f5cd3
commit c2844eb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 31 deletions.
diff --git a/spa/public/index.html b/spa/public/index.html
@@ -1,13 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-      <script src="<%= BASE_URL %>runtimeConfig.js"></script>
+      <script src="/runtimeConfig.js"></script>
       <!-- Google Tag Manager -->
-      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { window.dataLayer.push(arguments); }
+        gtag('consent', 'default', {
+          ad_storage: 'denied',
+          analytics_storage: 'denied',
+          personalization_storage: 'denied',
+          functionality_storage: 'granted',
+          security_storage: 'granted',
+          wait_for_update: 400,
+        });
+        gtag('set', 'url_passthrough', true);
+        let gtm = (window.location.hostname !== 'www.mezinamiridici.cz') ? 'GTM-W86T93B' : 'GTM-WDMT8Q8';
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        j=d.createElement(s),dl=l!=='dataLayer'?'&l='+l:'';j.async=true;j.src=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','GTM-W86T93B');</script>
+      })(window,document,'script','dataLayer', gtm);</script>
       <!-- End Google Tag Manager -->
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -17,13 +30,11 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap">
-    <!--<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">-->
-    <!--<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">-->
   </head>
   <body>
     <noscript>
         <!-- Google Tag Manager (noscript) -->
-        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W86T93B" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WDMT8Q8" height="0" width="0" style="display:none;visibility:hidden"></iframe>
         <!-- End Google Tag Manager (noscript) -->
       <strong>Je nám líto, ale jako auto nepojede bez motoru, tak tahle stránka nepofrčí bez Javascriptu. Povolte jej pro jízdu vašeho života.</strong>
     </noscript>

diff --git a/spa/src/App.vue b/spa/src/App.vue
@@ -104,8 +104,12 @@ export default {
       }
     },
     handleCookies(preferences) {
-      // TODO: Do something with cookie preferences
-      console.log(preferences);
+      gtag('consent', 'update', {
+        ad_storage: preferences.ad,
+        analytics_storage: preferences.analytics,
+        personalization_storage: preferences.personalization,
+      });
+      console.log(window.dataLayer);
     },
   },
 };

diff --git a/spa/src/components/molecules/CookiesBox.vue b/spa/src/components/molecules/CookiesBox.vue
@@ -29,12 +29,17 @@
           <h5>Manage Consent Preference</h5>
           <div class="inner-header my-3">
             <h6>Statistical</h6>
-            <b-form-checkbox switch size="lg" v-model="statistical"></b-form-checkbox>
+            <b-form-checkbox switch size="lg" v-model="analytics"></b-form-checkbox>
+          </div>
+          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took</p>
+          <div class="inner-header my-3">
+            <h6>Personalization</h6>
+            <b-form-checkbox switch size="lg" v-model="personalization"></b-form-checkbox>
           </div>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took</p>
           <div class="inner-header my-3">
             <h6>Marketing</h6>
-            <b-form-checkbox switch size="lg" v-model="marketing"></b-form-checkbox>
+            <b-form-checkbox switch size="lg" v-model="ad"></b-form-checkbox>
           </div>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took</p>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took</p>
@@ -70,33 +75,34 @@ export default {
   },
   data() {
     return {
-      statistical: false,
-      marketing: false,
+      ad: false,
+      analytics: false,
+      personalization: false,
       preferencesChosen: false,
     };
   },
   methods: {
     confirmAll() {
-      this.statistical = true;
-      this.marketing = true;
+      this.ad = true;
+      this.analytics = true;
+      this.personalization = true;
       this.savePreferences();
     },
     savePreferences() {
-      const options = { statistical: this.statistical, marketing: this.marketing, confirmDate: new Date() };
+      const options = { ad: this.ad, analytics: this.analytics, personalization: this.personalization, confirmDate: new Date() };
       this.$store.dispatch('SAVE_COOKIE_PREFERENCES', { options, component: this });
       this.preferencesChosen = true;
     },
-    loadPreferences() {
-      const options = this.$store.dispatch('LOAD_COOKIE_PREFERENCES');
-      if (options) {
-        this.statistical = options.statistical;
-        this.marketing = options.marketing;
-        this.preferencesChosen = true;
-      }
-    },
   },
-  mounted() {
-    this.loadPreferences();
+  async mounted() {
+    const options = await this.$store.dispatch('LOAD_COOKIE_PREFERENCES');
+    if (options) {
+      this.ad = options.ad;
+      this.analytics = options.analytics;
+      this.personalization = options.personalization;
+      this.preferencesChosen = true;
+      this.$emit('cookiePreferenceChange', options);
+    }
   },
 };
 </script>

diff --git a/spa/src/modules/vuex/users.js b/spa/src/modules/vuex/users.js
@@ -10,7 +10,6 @@ export default {
     userNickname: null,
     userRoles: [],
     userEmail: null,
-    cookieSettings: { statistical: false, marketing: false, confirmDate: null },
   }),
   getters: {
     IS_AUTHORIZED: state => state.authorized,
@@ -42,9 +41,6 @@ export default {
     SET_USER_EMAIL: (state, payload) => {
       state.userEmail = payload;
     },
-    SET_COOKIE_SETTINGS: (state, payload) => {
-      state.cookieSettings = payload;
-    },
   },
   actions: {
     CHANGE_PASSWORD: async (context, payload) => {
@@ -210,7 +206,6 @@ export default {
           localStorage.removeItem('cookieSettings');
           return undefined;
         }
-        context.commit('SET_COOKIE_SETTINGS', options);
         return options;
       } catch (err) {
         this.$log.error('Failed to load cookies settings', err);