From f39d54715f57f06ab11c2ffb216221923406921f Mon Sep 17 00:00:00 2001 From: MartijnDijkgraaf Date: Tue, 14 Apr 2020 09:36:23 +0200 Subject: [PATCH] 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 <> --- .../Areas/Api/Controllers/UI/MyUIOptions.cs | 7 +++ backend/src/Squidex/appsettings.json | 11 +++- frontend/app/app.module.ts | 6 -- frontend/app/framework/configurations.ts | 4 -- .../framework/services/analytics.service.ts | 55 ++++++++++++------- 5 files changed, 52 insertions(+), 31 deletions(-) diff --git a/backend/src/Squidex/Areas/Api/Controllers/UI/MyUIOptions.cs b/backend/src/Squidex/Areas/Api/Controllers/UI/MyUIOptions.cs index df04500be..13eca6150 100644 --- a/backend/src/Squidex/Areas/Api/Controllers/UI/MyUIOptions.cs +++ b/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; } + } } } diff --git a/backend/src/Squidex/appsettings.json b/backend/src/Squidex/appsettings.json index 7979eaa4a..8ae206792 100644 --- a/backend/src/Squidex/appsettings.json +++ b/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" } -} +} \ No newline at end of file diff --git a/frontend/app/app.module.ts b/frontend/app/app.module.ts index 802ede6c6..151503f02 100644 --- a/frontend/app/app.module.ts +++ b/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 }, diff --git a/frontend/app/framework/configurations.ts b/frontend/app/framework/configurations.ts index 55772c1ae..2ad33cdb3 100644 --- a/frontend/app/framework/configurations.ts +++ b/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) {} } diff --git a/frontend/app/framework/services/analytics.service.ts b/frontend/app/framework/services/analytics.service.ts index 227898c06..3c7079361 100644 --- a/frontend/app/framework/services/analytics.service.ts +++ b/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'); + } + } } \ No newline at end of file