Adding analytics and tracking code for demo-mode

src/components/CloudInstancePromo.vue

@@ -13,11 +13,12 @@
             <a
               v-for="provider in providers"
               :key="provider.name"
-              class="btn btn-light border promo-provider-btn w-75 mx-auto"
+              class="btn btn-light border promo-provider-btn w-75 mx-auto js-ads-conversion"
               :href="provider.href"
               :target="provider.target"
               :rel="provider.rel"
               :title="provider.title"
+              :data-ads-conversion="provider.conversionKey"
             >
               <img :src="provider.icon" :alt="provider.name" height="22">
             </a>
@@ -62,7 +63,8 @@ export default {
           href: "https://aws.amazon.com/marketplace/pp/B074H87FSJ/",
           target: "_blank",
           rel: "noopener",
-          title: "Launch Instance: AWS"
+          title: "Launch Instance: AWS",
+          conversionKey: "aws"
         },
         {
           name: "Azure",
@@ -70,15 +72,17 @@ export default {
           href: "https://azuremarketplace.microsoft.com/en-us/marketplace/apps/openshotstudiosllc.openshot-cloud-api",
           target: "_blank",
           rel: "noopener",
-          title: "Launch Instance: Azure"
+          title: "Launch Instance: Azure",
+          conversionKey: "azure"
         },
         {
           name: "Google Cloud",
-          icon: "//cdn.openshot.org/static/img/icons/google.svg",
+          icon: "//cdn.openshot.org/static/img/icons/google.png",
           href: "https://console.cloud.google.com/marketplace/product/openshotstudios-public/openshot-video-editing-cloud-api",
           target: "_blank",
           rel: "noopener",
-          title: "Launch Instance: Google Cloud"
+          title: "Launch Instance: Google Cloud",
+          conversionKey: "google"
         }
       ]
     }

src/main.js

@@ -5,6 +5,7 @@ import store from './store'
 import "bootstrap/dist/css/bootstrap.min.css"
 import "bootstrap"
 import { createGtag } from "vue-gtag"
+import { initAdsConversions, isDemoEnvironment } from "./utils/adsConversions"
 
 const app = createApp(App)
 
@@ -18,4 +19,9 @@ if (tagId) {
   }))
 }
 
+initAdsConversions({
+  router,
+  demoMode: isDemoEnvironment()
+})
+
 app.use(store).use(router).mount('#app')

src/utils/adsConversions.js

+const ADS_TAG_ID = process.env.VUE_APP_GOOGLE_ADS_ID || 'AW-994591350'
+
+const CONVERSIONS = {
+  demo: 'AW-994591350/fp_tCPiIj6AYEPaEodoD',
+  aws: 'AW-994591350/BoJoCJ6634IBEPaEodoD',
+  azure: 'AW-994591350/MREMCM28jqAYEPaEodoD',
+  google: 'AW-994591350/W6AWCOyvgaAYEPaEodoD'
+}
+
+export function isDemoEnvironment() {
+  const apiUrl = (process.env.VUE_APP_OPENSHOT_API_URL || '').trim()
+  if (!apiUrl) {
+    return false
+  }
+  const normalized = apiUrl.replace(/\/+$/, '').toLowerCase()
+  return normalized === 'https://cloud.openshot.org'
+}
+
+function hasGtag() {
+  return typeof window !== 'undefined' && typeof window.gtag === 'function'
+}
+
+function ensureAdsTag() {
+  if (!ADS_TAG_ID || !hasGtag()) {
+    return
+  }
+  window.gtag('config', ADS_TAG_ID)
+}
+
+function reportConversion(conversionKey) {
+  const conversionId = CONVERSIONS[conversionKey]
+  if (!conversionId || !hasGtag()) {
+    return false
+  }
+  window.gtag('event', 'conversion', {
+    send_to: conversionId,
+    event_callback: () => {}
+  })
+  return true
+}
+
+function resolveConversionKey(target) {
+  if (!target || !target.classList) {
+    return null
+  }
+  const dataKey = target.dataset.adsConversion
+  if (dataKey) {
+    return dataKey
+  }
+  if (target.classList.contains('js-ads-aws')) {
+    return 'aws'
+  }
+  if (target.classList.contains('js-ads-azure')) {
+    return 'azure'
+  }
+  if (target.classList.contains('js-ads-gcp')) {
+    return 'google'
+  }
+  if (target.classList.contains('js-ads-demo')) {
+    return 'demo'
+  }
+  return null
+}
+
+function registerClickTracking() {
+  document.addEventListener('click', (event) => {
+    const target = event.target && event.target.closest
+      ? event.target.closest('a, button')
+      : null
+    if (!target) {
+      return
+    }
+    const conversionKey = resolveConversionKey(target)
+    if (!conversionKey) {
+      return
+    }
+    reportConversion(conversionKey)
+  })
+}
+
+function registerDemoOnRoutes(router) {
+  const fireDemo = () => reportConversion('demo')
+  fireDemo()
+  if (router && typeof router.afterEach === 'function') {
+    router.afterEach(() => {
+      fireDemo()
+    })
+  }
+}
+
+export function initAdsConversions({ router, demoMode }) {
+  if (!demoMode) {
+    return
+  }
+  ensureAdsTag()
+  registerClickTracking()
+  registerDemoOnRoutes(router)
+}