Merge pull request #3479 from FlowFuse/google-analytics

Add Google analytics support
FlowFuse · Feb 13, 2024 · 005e863 · 005e863
2 parents 7ce995a + d61ede7
commit 005e863
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 0 deletions.
diff --git a/docs/install/configuration.md b/docs/install/configuration.md
@@ -151,6 +151,8 @@ Option        | Description
 `telemetry.frontend.posthog.apiurl` | The API URL for PostHog, either 'https://app.posthog.com' or 'https://eu.posthog.com'. Default: `https://app.posthog.com`
 `telemetry.frontend.posthog.apikey` | The API key provided to you from your own PostHog account. Default: `null`
 `telemetry.frontend.posthog.capture_pageview` | FlowFuse is designed as to provide custom posthog `$pageview` events that provide more detail on navigation than the default, and suit a single page application better. As such, we recommend setting this to false in order to prevent duplicate `pageleave`/`pageview` events firing. Default: `true`
+`telemetry.frontend.google.tag` | A Google Tag Manager ID. Default: `null`
+`telemetry.frontend.google.events` | An object with keys matching the names of tag events to be enabled and any payload values. Default `null`
 
 
 ## Rate Limiting configuration

diff --git a/forge/forge.js b/forge/forge.js
@@ -287,6 +287,47 @@ module.exports = async (options = {}) => {
                     contentSecurityPolicy.directives['connect-src'] = ['*.ingest.sentry.io']
                 }
             }
+            if (runtimeConfig.telemetry?.frontend?.google) {
+                const googleDomains = [
+                    'www.googletagmanager.com',
+                    'www.google.com',
+                    'www.google.co.uk',
+                    'google.com',
+                    'googleads.g.doubleclick.net',
+                    'www.googleservices.com'
+                ]
+                if (contentSecurityPolicy.directives['script-src'] && Array.isArray(contentSecurityPolicy.directives['script-src'])) {
+                    contentSecurityPolicy.directives['script-src'].push(...googleDomains)
+                } else {
+                    contentSecurityPolicy.directives['script-src'] = googleDomains
+                }
+                const googleImageDomains = [
+                    'www.google.com',
+                    'www.google.co.uk',
+                    'googleads.g.doubleclick.net'
+                ]
+                if (contentSecurityPolicy.directives['img-src'] && Array.isArray(contentSecurityPolicy.directives['img-src'])) {
+                    contentSecurityPolicy.directives['img-src'].push(...googleImageDomains)
+                } else {
+                    contentSecurityPolicy.directives['img-src'] = googleImageDomains
+                }
+                const googleConnectDomains = [
+                    'google.com'
+                ]
+                if (contentSecurityPolicy.directives['connect-src'] && Array.isArray(contentSecurityPolicy.directives['connect-src'])) {
+                    contentSecurityPolicy.directives['connect-src'].push(...googleConnectDomains)
+                } else {
+                    contentSecurityPolicy.directives['connect-src'] = googleConnectDomains
+                }
+                const googleFrameDomains = [
+                    'td.doubleclick.net'
+                ]
+                if (contentSecurityPolicy.directives['frame-src'] && Array.isArray(contentSecurityPolicy.directives['frame-src'])) {
+                    contentSecurityPolicy.directives['frame-src'].push(...googleFrameDomains)
+                } else {
+                    contentSecurityPolicy.directives['frame-src'] = googleFrameDomains
+                }
+            }
             if (runtimeConfig.support?.enabled && runtimeConfig.support.frontend?.hubspot?.trackingcode) {
                 const hubspotDomains = [
                     'js-eu1.hs-analytics.com',

diff --git a/forge/routes/api/settings.js b/forge/routes/api/settings.js
@@ -106,6 +106,15 @@ module.exports = async function (app) {
                     publicSettings[prop] = value
                 }
             })
+
+            if (app.config.telemetry?.frontend?.google?.tag) {
+                const adwords = {
+                    tag: app.config.telemetry.frontend.google.tag,
+                    events: app.config.telemetry?.frontend?.google?.events
+                }
+                publicSettings.adwords = adwords
+            }
+
             reply.send(publicSettings)
         }
     })

diff --git a/forge/routes/ui/index.js b/forge/routes/ui/index.js
@@ -58,6 +58,12 @@ module.exports = async function (app) {
             </script>`
             }
 
+            if (telemetry.frontend.google?.tag) {
+                const tag = telemetry.frontend.google.tag
+                injection += `<script async src="https://www.googletagmanager.com/gtag/js?id=${tag}"></script>`
+                injection += `<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${tag}'); </script>`
+            }
+
             if (support?.enabled && support.frontend?.hubspot?.trackingcode) {
                 const trackingCode = support.frontend.hubspot.trackingcode
                 injection += `<!-- Start of HubSpot Embed Code -->

diff --git a/frontend/src/pages/account/Create.vue b/frontend/src/pages/account/Create.vue
@@ -194,6 +194,9 @@ export default {
                     this.emailSent = true
                 }
                 this.busy = false
+                if (gtag && this.settings.adwords?.events?.conversion) { // eslint-disable-line no-undef
+                    gtag('event', 'conversion', this.settings.adwords.events.conversion) // eslint-disable-line no-undef
+                }
             }).catch(err => {
                 console.error(err.response.data)
                 this.busy = false