web: Migrate to GA4 custom dimensions

schneefux · Mar 20, 2024 · 885f022 · 885f022
1 parent 620ac2f
commit 885f022
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 41 deletions.
diff --git a/web/components/adblock-bait.vue b/web/components/adblock-bait.vue
@@ -9,24 +9,17 @@
 
 <script lang="ts">
 import { ref, defineComponent, onMounted } from 'vue'
-import { event } from 'vue-gtag'
+import { set as gtagSet } from 'vue-gtag'
 
 export default defineComponent({
   setup() {
     const adblockBait = ref<HTMLElement>()
 
     onMounted(() => {
-      const adsBlocked = adblockBait.value!.clientHeight === 0
-      event('ads_blocked_dimension', {
-        'ads_blocked': adsBlocked,
-        'non_interaction': true,
-      })
+      const adsBlocked = adblockBait.value!.clientHeight === 0;
 
-      event('blocked', {
-        'event_category': 'ads',
-        'event_label': adsBlocked.toString(),
-        'value': adsBlocked ? 1 : 0,
-        'non_interaction': true,
+      (gtagSet as any)('user_properties', {
+        'ads_blocked': adsBlocked.toString(),
       })
     })
 

diff --git a/web/components/experiment.vue b/web/components/experiment.vue
@@ -5,7 +5,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue'
 import Cookies from 'js-cookie'
-import { event } from 'vue-gtag'
+import { set as gtagSet } from 'vue-gtag'
 
 export default defineComponent({
   props: {
@@ -32,11 +32,10 @@ export default defineComponent({
         console.log('selected variant ' + selectedVariant + ' for experiment ' + props.experimentId)
       }
 
-      activeVariant.value = selectedVariant
+      activeVariant.value = selectedVariant;
 
-      event('test_group_dimension', {
+      (gtagSet as any)('user_properties', {
         'test_group': `${props.experimentId}-${activeVariant.value}`,
-        'non_interaction': true,
       })
 
       console.log('enabled variant ' + activeVariant.value + ' for experiment ' + props.experimentId)

diff --git a/web/composables/app.ts b/web/composables/app.ts
@@ -1,5 +1,5 @@
 import { computed, onMounted, ref } from 'vue'
-import { event } from 'vue-gtag'
+import { set as gtagSet, event } from 'vue-gtag'
 import { useRouter } from 'vue-router'
 import { useLocalePath } from './compat'
 import { usePreferencesStore } from '~/stores/preferences'
@@ -14,19 +14,11 @@ export function useIsApp() {
     // track some meta data
     // play store allows only 1 ad/page - TWA is detected via referrer
     isPwa.value = window.matchMedia('(display-mode: standalone)').matches
-    isTwa.value = document.referrer.startsWith('android-app')
+    isTwa.value = document.referrer.startsWith('android-app');
 
-    event('branch_dimension', {
-      'branch': import.meta.env.VITE_BRANCH || '',
-      'non_interaction': true,
-    })
-    event('is_pwa_dimension', {
-      'is_pwa': isPwa,
-      'non_interaction': true,
-    })
-    event('is_twa_dimension', {
-      'is_twa': isTwa,
-      'non_interaction': true,
+    (gtagSet as any)('user_properties', {
+      'is_pwa': isPwa.toString(),
+      'is_twa': isTwa.toString(),
     })
   })
 

diff --git a/web/config.ts b/web/config.ts
@@ -3,7 +3,6 @@ export interface Config {
   cubeUrl: string
   managerUrl: string
   renderUrl: string
-  optimizeId: string
   ga4Id: string
   adsensePubid: string
   sentryDsn: string
@@ -23,7 +22,6 @@ export const config: Config = {
   cubeUrl: process.env.CUBE_URL ?? '',
   managerUrl: process.env.MANAGER_URL ?? '',
   renderUrl: process.env.RENDER_URL ?? '',
-  optimizeId: process.env.OPTIMIZE_ID ?? '',
   ga4Id: process.env.GA4_ID ?? '',
   adsensePubid: process.env.ADSENSE_PUBID ?? '',
   playwireRampPublisherId: process.env.PLAYWIRE_RAMP_PUBLISHER_ID ?? '',

diff --git a/web/renderer/app.ts b/web/renderer/app.ts
@@ -150,20 +150,9 @@ function createApp(pageContext: PageContext) {
 
   app.config.globalProperties.localePath = (path: string) => localePath(path, i18n.global)
 
-  const gtagParams = {
-    optimize_id: pageContext.envConfig.optimizeId,
-    custom_map: {
-      'dimension1': 'branch',
-      'dimension2': 'ads_blocked',
-      'dimension3': 'is_pwa',
-      'dimension4': 'is_twa',
-      'dimension5': 'test_group',
-    },
-  }
   app.use(VueGtagPlugin, {
     config: {
       id: pageContext.envConfig.ga4Id,
-      params: gtagParams,
     },
     includes: [ {
       id: pageContext.envConfig.playwireRampGa4Id,