chore: ga to gtm migration

Author: hanabi1224

.github/workflows/site.yml

@@ -5,6 +5,7 @@ on:
  # branches: [main]
  pull_request:
  branches: [main]
+ workflow_dispatch:
 jobs:
  build:
  runs-on: ${{ matrix.os }}

website/components/LangMetaPage.vue

@@ -59,11 +59,11 @@
  </div>
 
  <!-- <div class="mt-5">
- <span>OS</span>
- <select v-model="osSelected" class="px-2 py-2 rounded bg-purple-200">
- <option v-for="i in osOptions" :key="i" :value="i">{{ i }}</option>
- </select>
- </div> -->
+  <span>OS</span>
+  <select v-model="osSelected" class="px-2 py-2 rounded bg-purple-200">
+  <option v-for="i in osOptions" :key="i" :value="i">{{ i }}</option>
+  </select>
+  </div> -->
 
  <div v-if="cpuInfo" class="mt-5 text-xs">
  <label class="font-bold">CPU INFO:</label
@@ -171,11 +171,9 @@
  v-show="other || problem"
  :class="['text-left', 'pl-4', mdHide]"
  >
- <a
- :href="`/${i.lang}`"
- class="underline text-blue-500"
- >{{ i.lang }}</a
- >
+ <a :href="`/${i.lang}`" class="underline text-blue-500">{{
+ i.lang
+ }}</a>
  </td>
  <td class="text-right">
  <a
@@ -259,8 +257,10 @@
 <script lang="ts">
 import { Component, Watch, Vue } from 'nuxt-property-decorator'
 import _ from 'lodash'
+import { MetaInfo } from 'vue-meta'
 import MenuButton from './MenuButton.vue'
 import { getFullCompilerVersion, mergeLangBenchResults } from '~/contentUtils'
+import { importGoogleTagIfNeeded } from '~/gtmUtils'
 
 function requireAll(requireContext: any) {
  const r = requireContext.keys().map(requireContext)
@@ -489,7 +489,7 @@ export default class LangMetaPage extends Vue {
  langsStrs.push(`${this.lang!.langDisplay} lang`)
  }
 
- return {
+ const metaInfo: MetaInfo = {
  title,
  meta: [
  {
@@ -499,6 +499,8 @@ export default class LangMetaPage extends Vue {
  },
  ],
  }
+ importGoogleTagIfNeeded(metaInfo)
+ return metaInfo
  }
 
  created() {

website/gtmUtils.ts

@@ -0,0 +1,28 @@
+import { MetaInfo } from 'vue-meta'
+
+export function importGoogleTagIfNeeded(metaInfo: MetaInfo) {
+ const tag = googleTagId()
+ if (tag) {
+ metaInfo.script = [
+ {
+ src: `//www.googletagmanager.com/gtag/js?id=${tag}`,
+ async: true,
+ },
+ {
+ innerHTML: `
+ window.dataLayer = window.dataLayer || [];
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+ gtag("js", new Date());
+ gtag("config", "${tag}");
+ `,
+ },
+ ]
+ metaInfo.__dangerouslyDisableSanitizers = ['script']
+ }
+}
+
+function googleTagId() {
+ return process.env.GOOGLE_TAG_ID
+}

website/nuxt.config.ts

@@ -153,16 +153,4 @@ if (process.env.APP_HOST_NAME) {
  }
 }
 
-// ga
-// https://google-analytics.nuxtjs.org/
-if (process.env.GOOGLE_ANALYTICS_ID) {
- // eslint-disable-next-line no-console
- console.log(`Turning on google analytics`)
- config.buildModules?.push('@nuxtjs/google-analytics')
- config.googleAnalytics = {
- id: process.env.GOOGLE_ANALYTICS_ID,
- checkDuplicatedScript: true,
- }
-}
-
 export default config

website/package.json

@@ -52,7 +52,6 @@
  "@nuxt/typescript-build": "^2.1.0",
  "@nuxtjs/eslint-config-typescript": "^10.0.0",
  "@nuxtjs/eslint-module": "^3.1.0",
- "@nuxtjs/google-analytics": "^2.4.0",
  "@nuxtjs/stylelint-module": "^4.1.0",
  "@nuxtjs/tailwindcss": "5.1.3",
  "@types/lodash": "^4.14.182",

website/pages/index.vue

@@ -135,8 +135,10 @@
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
 import _ from 'lodash'
+import { MetaInfo } from 'vue-meta'
 import MenuButton from './../components/MenuButton.vue'
 import { mergeLangBenchResults } from '~/contentUtils'
+import { importGoogleTagIfNeeded } from '~/gtmUtils'
 
 function requireAll(requireContext: any) {
  const r = requireContext.keys().map(requireContext)
@@ -185,7 +187,8 @@ export default class IndexPage extends Vue {
  .map((i) => i.langDisplay)
  .uniq()
  .value()
- return {
+
+ const metaInfo: MetaInfo = {
  title:
  'Benchmarks for programming languages and compilers, Which programming language or compiler is faster',
  meta: [
@@ -198,6 +201,8 @@ export default class IndexPage extends Vue {
  },
  ],
  }
+ importGoogleTagIfNeeded(metaInfo)
+ return metaInfo
  }
 
  getLinkClass() {