Switch ads provider, and switch the analytics system to Ariadne (#214)

* Switch ads provider, and switch the analytics system to Ariadne

* Fix CI error

* Remove debug messages and errors

* Updated nuxtjs

components/ads/Advertisement.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="ad-wrapper">
+  <div v-if="displayed && !hidden" class="ad-wrapper">
-    <div v-if="displayed" class="ad">
+    <div class="ad">
       <GptAd
         :key="format.adUnit"
         ref="ad_slot"
@@ -10,6 +10,25 @@
       />
     </div>
   </div>
+  <div v-else-if="ethical_ads_on">
+    <div v-if="ethical_ad_display && ethicalAdType === 'text'">
+      <div
+        :class="ethical_ad_style"
+        data-ea-publisher="modrinth-com"
+        :data-ea-type="ethicalAdType"
+        data-ea-manual="true"
+      ></div>
+    </div>
+    <div v-else-if="ethical_ad_display" class="ethical-wrapper">
+      <div
+        :class="ethical_ad_style"
+        data-ea-publisher="modrinth-com"
+        :data-ea-type="ethicalAdType"
+        data-ea-manual="true"
+      ></div>
+    </div>
+  </div>
+  <div v-else></div>
 </template>
 
 <script>
@@ -36,20 +55,59 @@ export default {
       type: String,
       required: true,
     },
+    ethicalAdsBig: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    ethicalAdsSmall: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    ethicalAdType: {
+      type: String,
+      required: false,
+      default: 'text',
+    },
   },
   data() {
     return {
+      isDark: false,
       format: null,
       displayed: false,
       onSmallScreen: false,
       windowResizeListenerDebounce: null,
     }
   },
+  computed: {
+    ethical_ads_on() {
+      return (
+        this.$store.app.$config.ads.ethicalAds === 'true' &&
+        (this.ethicalAdsSmall || this.ethicalAdsBig)
+      )
+    },
+    hidden() {
+      return this.$store.app.$config.ads.ethicalAds === 'true'
+    },
+    ethical_ad_display() {
+      return (
+        (this.onSmallScreen && this.ethicalAdsSmall) ||
+        (!this.onSmallScreen && this.ethicalAdsBig)
+      )
+    },
+    ethical_ad_style() {
+      return {
+        dark: this.isDark,
+        raised: true,
+      }
+    },
+  },
 
   mounted() {
     // Register hook on resize
     window.addEventListener('resize', this.handleWindowResize)
-
+    this.isDark = this.$colorMode.value !== 'light'
     // Find ad
     if (!(this.type in sizes)) {
       console.error('Ad type not recognized.')
@@ -60,6 +118,7 @@ export default {
     this.displayed = true
     if (process.browser) {
       this.handleWindowResize()
+      this.refresh_ad()
     }
   },
   methods: {
@@ -72,9 +131,16 @@ export default {
             this.onSmallScreen = false
             this.format = sizes[this.type]
             this.displayed = true
+            // Refresh ad
+            this.refresh_ad()
           }
           return
         }
+        if (this.onSmallScreen === false) {
+          // Reload ad
+          this.onSmallScreen = true
+          this.refresh_ad()
+        }
         this.onSmallScreen = true
         if (this.smallScreen === 'destroy') {
           this.displayed = false
@@ -84,6 +150,23 @@ export default {
         }
       }, 300)
     },
+    refresh_ad() {
+      if (this.ethical_ads_on && typeof window.ethicalads !== 'undefined') {
+        ethicalads.load()
+      }
+    },
+  },
+  head: {
+    script: [
+      {
+        hid: 'ethical_ads_script',
+        type: 'text/javascript',
+        src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
+        async: true,
+        body: true,
+        defer: true,
+      }, // Insert in body
+    ],
   },
 }
 </script>
@@ -97,4 +180,11 @@ export default {
   margin-bottom: var(--spacing-card-md);
   justify-content: center;
 }
+.ethical-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: var(--spacing-card-md);
+  justify-content: center;
+}
 </style>

components/ui/search/SearchFilter.vue

@@ -63,7 +63,7 @@ export default {
 }
 
 .filter-active {
-  @extend %transparent-clickable.selected;
+  @extend %transparent-clickable, .selected;
   svg {
     color: var(--color-brand-light);
   }

middleware/ads_tracking.js

@@ -1,8 +0,0 @@
-/* eslint-disable no-undef */
-export default function ({ route }) {
-  if (process.client) {
-    googletag.cmd.push(function () {
-      googletag.pubads().setTargeting('path', route.path)
-    })
-  }
-}

middleware/analytics.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+export default async function (context) {
+  let domain = ''
+  if (process.server) {
+    domain = context.req.headers.host
+  } else {
+    domain = location.host
+  }
+  const url = context.$config.analytics.base_url + '/register/visit'
+  const path = context.route.path.split('?')[0]
+  try {
+    return await axios.post(url, {
+      path,
+      domain,
+      consent: false,
+    })
+  } catch (e) {
+    // Simply silence the issue.
+  }
+}

modules/gpt-ads/lib/templates/plugin.js

@@ -30,6 +30,7 @@ export default async function (ctx, inject) {
   const collapseEmptyDivs =
     config.collapseEmptyDivs ??
     '<%= options.collapseEmptyDivs || false %>' === 'true'
+  const ethicalAds = config.ethicalAds === 'true'
   const GeoEdgeId = config.GeoEdgeId ?? '<%= options.geoEdgeId %>'
   const networkCode = config.networkCode ?? '<%= options.networkCode %>'
   const GPT_LIB_SCRIPT_ID = '<%= options.GPT_LIB_SCRIPT_ID %>'
@@ -53,6 +54,12 @@ export default async function (ctx, inject) {
       ctx.app.head.script.push(script)
     }
   }
+  Vue.component('GptAd', {})
+
+  if (ethicalAds) {
+    return
+  }
+
   const noConsent = !isPersonalizedAdsOn(ctx)
 
   // GeoEdge support

nuxt.config.js

@@ -71,7 +71,7 @@ export default {
     },
   },
   router: {
-    middleware: ['auth', 'ads_tracking'],
+    middleware: ['auth', 'analytics'],
   },
   /*
    ** Global CSS
@@ -114,18 +114,14 @@ export default {
     '@nuxtjs/style-resources',
     'cookie-universal-nuxt',
     '~/modules/gpt-ads',
-    '~/modules/analytics',
+    // The analytics module is disabled, as we are using our own solution embedded in the middleware.
+    // '~/modules/analytics',
   ],
   ads: {
     // Module options
     ghostMode: true,
     geoEdgeId: '',
   },
-  analytics: {
-    enabled: false,
-    script_url: '',
-    tracking_code: '',
-  },
   robots: {
     Sitemap: 'https://modrinth.com/sitemap.xml',
   },
@@ -176,11 +172,10 @@ export default {
       ghostMode: process.env.ENABLE_ADS == null,
       GeoEdgeId: process.env.GEOEDGE_ID,
       networkCode: process.env.GAM_ID,
+      ethicalAds: process.env.ETHICAL_ADS,
     },
     analytics: {
-      enabled: process.env.ENABLE_ANALYTICS,
+      base_url: process.env.ARIADNE_URL,
-      script_url: process.env.ANALYTICS_URL,
-      token: process.env.ANALYTICS_ID,
     },
   },
 }

package.json

@@ -19,10 +19,12 @@
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/style-resources": "^1.0.0",
+    "axios": "^0.21.1",
     "cookie-universal-nuxt": "^2.1.4",
     "highlight.js": "^10.3.2",
     "marked": "^2.0.0",
-    "nuxt": "^2.15.5",
+    "nuxt": "^2.15.6",
+    "sass": "^1.32.12",
     "v-tooltip": "^2.0.3",
     "vue-click-outside": "^1.1.0",
     "vue-highlightjs": "^1.3.3",
@@ -41,8 +43,10 @@
     "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-nuxt": "^1.0.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "node-sass": "^4.14.1",
     "prettier": "^2.1.2",
     "sass-loader": "^10.1.1"
+  },
+  "optionalDependencies": {
+    "fsevents": "^2.3.2"
   }
 }

pages/mod/_id.vue

@@ -67,6 +67,8 @@
           v-if="mod.status === 'approved' || mod.status === 'unlisted'"
           type="banner"
           small-screen="square"
+          ethical-ads-small
+          ethical-ads-big
         />
         <div class="mod-navigation">
           <div class="tabs">

pages/mods.vue

@@ -64,7 +64,12 @@
           ></pagination>
         </section>
         <div class="results column-grow-4">
-          <Advertisement type="banner" small-screen="square" />
+          <Advertisement
+            type="banner"
+            small-screen="square"
+            ethical-ads-small
+            ethical-ads-big
+          />
           <div v-if="results === null" class="no-results">
             <p>Loading...</p>
           </div>

pages/user/_id.vue

@@ -55,7 +55,13 @@
             </div>
           </div>
         </div>
-        <Advertisement type="square" small-screen="square" />
+        <Advertisement
+          type="square"
+          small-screen="square"
+          ethical-ads-big
+          ethical-ads-small
+          ethical-ad-type="image"
+        />
         <m-footer class="footer" hide-small />
       </div>
       <div class="content">

privacy-toggles.js

@@ -7,12 +7,13 @@ export default {
        based on the information stored in this cookie.`,
       default: true,
     },
-    /* analytics: {
+    analytics: {
       title: 'Analytics',
       description: `Modrinth uses in-house tools that allows us to get insights on how
        each user is using the platform, to improve the experience for
-       everyone.`,
+       everyone.\n By enabling this toggle, you allow us to get information across requests,
+       disabling it will just remove all PII from now on.`,
       default: true,
-    }, */
+    },
   },
 }