feat(web): add google analytics

resolve valueadd-poland#269

.env-sample

@@ -18,6 +18,8 @@ GITLAB_CLIENT_ID=
 GITLAB_CLIENT_SECRET=
 GITLAB_REDIRECT_URI=
 
+GOOGLE_ANALYTICS_ID=
+
 #DB_HOST=db for production
 DB_HOST=localhost
 DB_NAME=pmp

angular.json

@@ -2127,6 +2127,70 @@
           "styleext": "scss"
         }
       }
+    },
+    "pmp-web-shared-util-google-analytics": {
+      "projectType": "library",
+      "root": "libs/pmp-web/shared/util-google-analytics",
+      "sourceRoot": "libs/pmp-web/shared/util-google-analytics/src",
+      "prefix": "pimp-my-pr",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/pmp-web/shared/util-google-analytics/tsconfig.lib.json",
+              "libs/pmp-web/shared/util-google-analytics/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/pmp-web/shared/util-google-analytics/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/pmp-web/shared/util-google-analytics/jest.config.js",
+            "tsConfig": "libs/pmp-web/shared/util-google-analytics/tsconfig.spec.json",
+            "passWithNoTests": true,
+            "setupFile": "libs/pmp-web/shared/util-google-analytics/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "style": "scss"
+        }
+      }
+    },
+    "pmp-web-shell": {
+      "projectType": "library",
+      "root": "libs/pmp-web/shell",
+      "sourceRoot": "libs/pmp-web/shell/src",
+      "prefix": "pimp-my-pr",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/pmp-web/shell/tsconfig.lib.json",
+              "libs/pmp-web/shell/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/pmp-web/shell/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/pmp-web/shell/jest.config.js",
+            "tsConfig": "libs/pmp-web/shell/tsconfig.spec.json",
+            "passWithNoTests": true,
+            "setupFile": "libs/pmp-web/shell/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "style": "scss"
+        }
+      }
     }
   },
   "cli": {

apps/pmp-web/docker/entrypoint.sh

@@ -4,13 +4,15 @@ GITHUB_CLIENT_ID="${GITHUB_CLIENT_ID}"
 BITBUCKET_CLIENT_ID="${BITBUCKET_CLIENT_ID}"
 GITLAB_CLIENT_ID="${GITLAB_CLIENT_ID}"
 GITLAB_REDIRECT_URI="${GITLAB_REDIRECT_URI}"
+GOOGLE_ANALYTICS_ID="${GOOGLE_ANALYTICS_ID}"
 
 for f in /usr/share/nginx/html/assets/env/*.sample; do
     cp -- "$f" "${f%.sample}"
     sed -i -- "s/{{githubClientId}}/${GITHUB_CLIENT_ID}/g" "${f%.sample}"
     sed -i -- "s/{{bitbucketClientId}}/${BITBUCKET_CLIENT_ID}/g" "${f%.sample}"
     sed -i -- "s/{{gitlabClientId}}/${GITLAB_CLIENT_ID}/g" "${f%.sample}"
     sed -i -- "s/{{gitlabRedirectUri}}/${GITLAB_REDIRECT_URI}/g" "${f%.sample}"
+    sed -i -- "s/{{googleAnalyticsId}}/${GOOGLE_ANALYTICS_ID}/g" "${f%.sample}"
     echo "${f%.sample}"
 done
 

apps/pmp-web/src/app/app.module.ts

@@ -5,14 +5,16 @@ import { PmpWebRepositoryShellModule } from '@pimp-my-pr/pmp-web/repository/shel
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
+import { PmpWebShellModule } from '@pimp-my-pr/pmp-web/shell';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     AppRoutingModule,
     PmpWebSharedCoreModule,
     PmpWebRepositoryShellModule,
-    PmpWebAuthShellModule
+    PmpWebAuthShellModule,
+    PmpWebShellModule
   ],
   bootstrap: [AppComponent]
 })

apps/pmp-web/src/assets/env/env.json.sample

@@ -2,5 +2,6 @@
   "bitbucketClientId": "{{bitbucketClientId}}",
   "githubClientId": "{{githubClientId}}",
   "gitlabClientId": "{{gitlabClientId}}",
-  "gitlabRedirectUri": "{{gitlabRedirectUri}}"
+  "gitlabRedirectUri": "{{gitlabRedirectUri}}",
+  "googleAnalyticsId": "{{googleAnalyticsId}}"
 }

apps/pmp-web/src/assets/scripts/google-analytics-script.js

@@ -0,0 +1,5 @@
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag('js', new Date());

docker-compose.yml

@@ -13,6 +13,7 @@ services:
       - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
       - GITLAB_CLIENT_ID=${GITLAB_CLIENT_ID}
       - GITLAB_REDIRECT_URI=${GITLAB_REDIRECT_URI}
+      - GOOGLE_ANALYTICS_ID=${GOOGLE_ANALYTICS_ID}
     networks:
       - default
   api:

libs/pmp-web/shared/config/src/lib/environment/environment.interface.ts

@@ -3,5 +3,6 @@ export class Environment {
   githubClientId: string;
   gitlabClientId: string;
   gitlabRedirectUri: string;
+  googleAnalyticsId: string;
   production: boolean;
 }

libs/pmp-web/shared/util-google-analytics/README.md

@@ -0,0 +1,7 @@
+# pmp-web-shared-util-google-analytics
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test pmp-web-shared-util-google-analytics` to execute the unit tests.

libs/pmp-web/shared/util-google-analytics/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  name: 'pmp-web-shared-util-google-analytics',
+  preset: '../../../../jest.config.js',
+  coverageDirectory: '../../../../coverage/libs/pmp-web/shared/util-google-analytics',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js'
+  ]
+};

libs/pmp-web/shared/util-google-analytics/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/pmp-web-shared-util-google-analytics.module';
+export * from './lib/google-analytics.service';

libs/pmp-web/shared/util-google-analytics/src/lib/google-analytics.service.spec.ts

@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GoogleAnalyticsService } from './google-analytics.service';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('GoogleAnalyticsService', () => {
+  let service: GoogleAnalyticsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      providers: [GoogleAnalyticsService]
+    });
+    service = TestBed.inject(GoogleAnalyticsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

libs/pmp-web/shared/util-google-analytics/src/lib/google-analytics.service.ts

@@ -0,0 +1,74 @@
+import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { NavigationEnd, Router, RouterEvent } from '@angular/router';
+import { environment } from '@pimp-my-pr/pmp-web/shared/config';
+import { Observable } from 'rxjs';
+import { filter, share, tap } from 'rxjs/operators';
+
+declare let gtag: Function;
+
+@Injectable()
+export class GoogleAnalyticsService {
+  private readonly renderer: Renderer2;
+  private readonly googleId: string;
+  private loaded = false;
+  private loadingInProgress = false;
+
+  constructor(
+    private rendererFactory: RendererFactory2,
+    @Inject(DOCUMENT) private document: Document,
+    private router: Router
+  ) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+    this.googleId = environment.googleAnalyticsId;
+  }
+
+  async init(): Promise<void> {
+    if (this.loaded || this.loadingInProgress) return;
+    try {
+      await this.insertGoogleScript(this.googleId);
+      await this.insertLocalScript();
+      this.loaded = true;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.loadingInProgress = false;
+    }
+  }
+
+  trackPageViews(): Observable<NavigationEnd> {
+    return this.router.events.pipe(
+      filter(() => this.loaded),
+      filter((evt: RouterEvent) => evt instanceof NavigationEnd),
+      tap((event: NavigationEnd) => {
+        this.trackSinglePageView(event);
+      }),
+      share()
+    );
+  }
+
+  private trackSinglePageView(event: NavigationEnd): void {
+    gtag('config', this.googleId, { page_path: event.urlAfterRedirects });
+  }
+
+  private async insertGoogleScript(googleId: string): Promise<void> {
+    if (!googleId) throw new Error('googleId not set');
+    await this.insertScript(`https://www.googletagmanager.com/gtag/js?id=${googleId}`);
+  }
+
+  private async insertLocalScript(): Promise<void> {
+    await this.insertScript('/assets/scripts/google-analytics-script.js');
+  }
+
+  private insertScript(path: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const script = this.renderer.createElement('script') as HTMLScriptElement;
+      script.type = 'text/javascript';
+      script.onload = () => resolve();
+      script.onerror = () => reject();
+      script.src = path;
+      script.text = path;
+      this.renderer.appendChild(this.document.body, script);
+    });
+  }
+}

libs/pmp-web/shared/util-google-analytics/src/lib/pmp-web-shared-util-google-analytics.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GoogleAnalyticsService } from './google-analytics.service';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [GoogleAnalyticsService]
+})
+export class PmpWebSharedUtilGoogleAnalyticsModule {}

libs/pmp-web/shared/util-google-analytics/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

libs/pmp-web/shared/util-google-analytics/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/pmp-web/shared/util-google-analytics/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+}

libs/pmp-web/shared/util-google-analytics/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

libs/pmp-web/shared/util-google-analytics/tslint.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "pimpMyPr", "camelCase"],
+    "component-selector": [true, "element", "pimp-my-pr", "kebab-case"]
+  },
+  "linterOptions": {
+    "exclude": ["!**/*"]
+  }
+}

libs/pmp-web/shell/README.md

@@ -0,0 +1,7 @@
+# pmp-web-shared-util-google-analytics
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test pmp-web-shared-util-google-analytics` to execute the unit tests.

libs/pmp-web/shell/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  name: 'pmp-web-shell',
+  preset: '../../../jest.config.js',
+  coverageDirectory: '../../../coverage/libs/pmp-web/shell',
+  snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js'
+  ]
+};

libs/pmp-web/shell/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/pmp-web-shell.module';

libs/pmp-web/shell/src/lib/pmp-web-shell.module.ts

@@ -0,0 +1,18 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import {
+  GoogleAnalyticsService,
+  PmpWebSharedUtilGoogleAnalyticsModule
+} from '@pimp-my-pr/pmp-web/shared/util-google-analytics';
+
+@NgModule({
+  imports: [PmpWebSharedUtilGoogleAnalyticsModule],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (googleService: GoogleAnalyticsService) => () => googleService.init(),
+      deps: [GoogleAnalyticsService],
+      multi: true
+    }
+  ]
+})
+export class PmpWebShellModule {}

libs/pmp-web/shell/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular';

libs/pmp-web/shell/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/pmp-web/shell/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+}

libs/pmp-web/shell/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}