Analtyics (#510)

* prepared the appsettings and the window options for the Google Analtyics Id setting

* removed white spaces

* refactored the analytics.service, also made use of the settings from the appsettings.json. The analtycsid from the appsettings will now be used.

* setting back the localhost statements for the gtag config

* Refactored the analytics.service again

* Made the uiOptions options, for the sake of testing...

* fixed a spelling mistake

* Removed the empty line after the if statement.

* Removed the analyticsIdConfig class. Fixed the hostname check for localhost

Co-authored-by: Martijn Dijkgraaf <>

backend/src/Squidex/Areas/Api/Controllers/UI/MyUIOptions.cs

@@ -17,6 +17,8 @@ namespace Squidex.Areas.Api.Controllers.UI
 
         public MapOptions Map { get; set; }
 
+        public GoogleOptions Google { get; set; }
+
         public int ReferencesDropdownItemCount { get; set; } = 100;
 
         public bool ShowInfo { get; set; }
@@ -44,5 +46,10 @@ namespace Squidex.Areas.Api.Controllers.UI
         {
             public string Key { get; set; }
         }
+
+        public sealed class GoogleOptions
+        {
+            public string AnalyticsId { get; set; }
+        }
     }
 }

backend/src/Squidex/appsettings.json

@@ -118,7 +118,14 @@
     /*
      * The number of content items for dropdown selector.
      */
-    "referencesDropdownItemCount": 100
+    "referencesDropdownItemCount": 100,
+
+    "google": {
+      /*
+       * The Google analtyics id
+       */
+      "analyticsId": "UA-99989790-2"
+    }
   },
 
   "email": {
@@ -622,4 +629,4 @@
     "clientId": "QZhb3HQcGCvE6G8yNNP9ksNet",
     "clientSecret": "Pdu9wdN72T33KJRFdFy1w4urBKDRzIyuKpc0OItQC2E616DuZD"
   }
-}
+}

frontend/app/app.module.ts

@@ -16,7 +16,6 @@ import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 
 import {
-    AnalyticsIdConfig,
     ApiUrlConfig,
     CurrencyConfig,
     DecimalSeparatorConfig,
@@ -58,10 +57,6 @@ export function configTitles() {
     return new TitlesConfig(undefined, 'Squidex Headless CMS');
 }
 
-export function configAnalyticsId() {
-    return new AnalyticsIdConfig('UA-99989790-2');
-}
-
 export function configDecimalSeparator() {
     return new DecimalSeparatorConfig('.');
 }
@@ -88,7 +83,6 @@ export function configCurrency() {
         AppComponent
     ],
     providers: [
-        { provide: AnalyticsIdConfig, useFactory: configAnalyticsId },
         { provide: ApiUrlConfig, useFactory: configApiUrl },
         { provide: CurrencyConfig, useFactory: configCurrency },
         { provide: DecimalSeparatorConfig, useFactory: configDecimalSeparator },

frontend/app/framework/configurations.ts

@@ -63,10 +63,6 @@ export class CurrencyConfig {
     }
 }
 
-export class AnalyticsIdConfig {
-    constructor(public value: string) {}
-}
-
 export class DecimalSeparatorConfig {
     constructor(public readonly value: string) {}
 }

frontend/app/framework/services/analytics.service.ts

@@ -11,38 +11,29 @@ import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
 
-import { AnalyticsIdConfig } from './../configurations';
+import { UIOptions } from './../configurations';
 import { Types } from './../utils/types';
 import { ResourceLoaderService } from './resource-loader.service';
 
-export const AnalyticsServiceFactory = (analyticsId: AnalyticsIdConfig, router: Router, resourceLoader: ResourceLoaderService) => {
-    return new AnalyticsService(analyticsId, router, resourceLoader);
+export const AnalyticsServiceFactory = (uiOptions: UIOptions, router: Router, resourceLoader: ResourceLoaderService) => {
+    return new AnalyticsService(uiOptions, router, resourceLoader);
 };
 
 @Injectable()
 export class AnalyticsService {
     private readonly gtag: any;
+    private analyticsId: string;
 
-    constructor(analyticsId?: AnalyticsIdConfig, router?: Router, resourceLoader?: ResourceLoaderService) {
+    constructor(private readonly uiOptions?: UIOptions,
+        private readonly router?: Router,
+        private readonly resourceLoader?: ResourceLoaderService
+    ) {
         window['dataLayer'] = window['dataLayer'] || [];
-
+        this.setAnalyticsId();
         this.gtag = function () {
             window['dataLayer'].push(arguments);
         };
-
-        if (analyticsId && router && resourceLoader && window.location.hostname !== 'localhost') {
-            this.gtag('config', analyticsId.value, { anonymize_ip: true });
-
-            router.events.pipe(
-                    filter(e => Types.is(e, NavigationEnd)))
-                .subscribe(() => {
-                    this.gtag('config', analyticsId.value, { page_path: window.location.pathname, anonymize_ip: true });
-                });
-
-            if (document.cookie.indexOf('ga-disable') < 0) {
-                resourceLoader.loadScript(`https://www.googletagmanager.com/gtag/js?id=${analyticsId.value}`);
-            }
-        }
+         this.configureGtag();
     }
 
     public trackEvent(category: string, action: string, label?: string, value?: number) {
@@ -53,4 +44,30 @@ export class AnalyticsService {
             value: value
         });
     }
+
+    private configureGtag() {
+        if (this.analyticsId && this.router && this.resourceLoader && window.location.hostname !== 'localhost') {
+            this.gtag('config', this.analyticsId, { anonymize_ip: true });
+
+            this.router.events.pipe(
+                    filter(e => Types.is(e, NavigationEnd)))
+                .subscribe(() => {
+                    this.gtag('config', this.analyticsId, { page_path: window.location.pathname, anonymize_ip: true });
+                });
+
+            this.loadGoogletagmanagerScript();
+        }
+    }
+
+    private loadGoogletagmanagerScript() {
+        if (document.cookie.indexOf('ga-disable') < 0 && this.resourceLoader) {
+            this.resourceLoader.loadScript(`https://www.googletagmanager.com/gtag/js?id=${this.analyticsId}`);
+        }
+    }
+
+    private setAnalyticsId() {
+        if (this.uiOptions) {
+            this.analyticsId = this.uiOptions.get('google.analyticsId');
+        }
+    }
 }