Change ads provider, and add consent system for advertising (#155)

* Add GAM integration & base for GPDR consent

* Moved consent to a specific page.

* Added functionality to the privacy page, and desactivate tracking if consent is not given.

* Added GeoEdge support, and fixed auth issues

* Fix actions issue

* Fix actions issue, attempt 2

* Added a module for analytics with consent support.

* Remove unnecessary function

* Add support for runtime config

components/ads/Advertisement.vue

@@ -1,25 +1,23 @@
 <template>
   <div class="ad-wrapper">
-    <adsbygoogle
-      ad-slot="7510690716"
-      :ad-format="format"
-      :page-url="pageUrl ? pageUrl : undefined"
-    />
+    <div class="ad">
+      <GptAd :ad-unit="adUnit" :size="size" />
+    </div>
   </div>
 </template>
 
 <script>
+/* eslint-disable no-undef */
 export default {
   name: 'Advertisement',
   props: {
-    format: {
+    size: {
       type: String,
-      default: 'horizontal',
+      required: true,
     },
-    pageUrl: {
+    adUnit: {
       type: String,
-      required: false,
-      default: '',
+      required: true,
     },
   },
 }
@@ -29,6 +27,9 @@ export default {
 .ad-wrapper {
   width: 100%;
   @extend %card;
+  display: flex;
+  flex-direction: row;
   margin-bottom: var(--spacing-card-md);
+  justify-content: center;
 }
 </style>

components/ads/CookieConsent.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <ReviewPopup ref="popup" />
+    <div
+      ref="container"
+      class="container"
+      :style="{ visibility: shown ? 'visible' : 'hidden' }"
+    >
+      <div class="banner">
+        <span>
+          Modrinth uses cookies for various purposes, including advertising.<br />
+          We encourage you to review your privacy settings by clicking on the
+          button below:
+        </span>
+        <div class="actions">
+          <button class="btn button" @click="hide">Accept all</button>
+          <button class="btn brand-button" @click="review">Review</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CookieConsent',
+  data() {
+    return {
+      shown: false,
+    }
+  },
+  mounted() {
+    // Get informations in the store
+    this.$store.dispatch('consent/loadFromCookies', this.$cookies)
+    if (
+      !this.$store.state.consent.is_consent_given &&
+      this.$route.path !== '/dashboard/privacy'
+    ) {
+      this.shown = true
+    }
+  },
+  methods: {
+    hide() {
+      this.shown = false
+    },
+    review() {
+      this.hide()
+      this.$router.push('/dashboard/privacy')
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  z-index: 20;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  .banner {
+    @extend %card;
+    margin: 0 2rem 2rem 0;
+    padding: 1rem;
+    max-width: 18vw;
+    border-left: solid 5px var(--color-brand);
+    font-size: 1.05rem;
+  }
+  .actions {
+    display: flex;
+    flex-direction: row;
+    margin-top: 1rem;
+    .btn {
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

components/ads/ReviewPopup.vue

@@ -0,0 +1,24 @@
+<template>
+  <Popup :show-popup="shown"> </Popup>
+</template>
+
+<script>
+export default {
+  name: 'ReviewPopup',
+  data() {
+    return {
+      shown: false,
+    }
+  },
+  methods: {
+    show() {
+      this.shown = true
+    },
+    hide() {
+      this.shown = false
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss"></style>

components/layout/MFooter.vue

@@ -26,6 +26,11 @@
         <a target="_blank" href="https://twitter.com/modrinth">Twitter</a>
       </li>
     </ul>
+    <ul>
+      <li>
+        <nuxt-link to="/dashboard/privacy">Set privacy preferences</nuxt-link>
+      </li>
+    </ul>
     <span> © Guavy LLC </span><br />
     <span v-if="version !== 'unknown'">Version: {{ version }}</span>
   </footer>

components/layout/ModPage.vue

@@ -65,9 +65,8 @@
         </div>
         <Advertisement
           v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-          :page-url="
-            'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
-          "
+          ad-unit="banner"
+          size="728x90,468x60"
         />
         <div class="mod-navigation">
           <div class="tabs">
@@ -133,9 +132,8 @@
           <slot />
           <Advertisement
             v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-            :page-url="
-              'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
-            "
+            ad-unit="banner"
+            size="728x90,468x60"
           />
         </div>
       </div>
@@ -333,10 +331,8 @@
         </div>
         <Advertisement
           v-if="mod.status === 'approved' || mod.status === 'unlisted'"
-          format="rectangle"
-          :page-url="
-            'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
-          "
+          ad-unit="square"
+          size="250x250,200x200"
         />
         <m-footer class="footer" />
       </section>
@@ -364,7 +360,7 @@ import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
-import Advertisement from '~/components/Advertisement'
+import Advertisement from '~/components/ads/Advertisement'
 
 export default {
   name: 'ModPage',

components/ui/Popup.vue

@@ -23,7 +23,7 @@ export default {
 .popup-overlay {
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 10;
   position: fixed;
   width: 100%;
   height: 100%;
@@ -38,11 +38,11 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 2;
+  z-index: 11;
   box-shadow: 0 2px 3px 1px var(--color-button-bg);
   border-radius: 10px;
   max-height: 80%;
   overflow-y: auto;
-  background-color: var(--color-bg);
+  background-color: var(--color-raised-bg);
 }
 </style>