Merge pull request #1131 from rodekruis/develop

Develop v24.10

.env.example

@@ -85,5 +85,9 @@ REGION_CONFIG=
 GOOGLE_SHEETS_API_KEY=
 GOOGLE_SHEETS_API_URL=
 
+# Monitoring/Telemetry:
+#
+# Matomo (Format: "id=<site-id-number>;api=<url+path/php-filename>;sdk=<url+path/js-filename>")
+MATOMO_CONNECTION_STRING=
 # Application Insights
 AI_CONNECTION_STRING=

.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
         'plugin:import/recommended',
         'plugin:import/typescript',
         'plugin:promise/recommended',
-        'plugin:no-unsanitized/DOM',
+        'plugin:no-unsanitized/recommended-legacy',
         'plugin:regexp/recommended',
         'plugin:prettier/recommended',
       ],

CHANGELOG.md

@@ -7,7 +7,15 @@ This project uses the [`CalVer`](https://calver.org/#scheme)-format: `YY.0M.MICR
 
 ---
 
-## [Unreleased](https://github.com/rodekruis/helpful-information/compare/v24.09.0...main)
+## [Unreleased](https://github.com/rodekruis/helpful-information/compare/v24.10.0...main)
+
+---
+
+## 2024-10-16: [v24.10.0](https://github.com/rodekruis/helpful-information/releases/tag/v24.10.0)
+
+### Added
+
+- Support for analytics via [`Matomo`](https://matomo.org/). See: [`ENV`](.env.example)
 
 ---
 

package.json

@@ -30,56 +30,56 @@
     "npm": ">=8"
   },
   "dependencies": {
-    "@angular/common": "^18.2.3",
-    "@angular/core": "^18.2.3",
-    "@angular/forms": "^18.2.3",
-    "@angular/platform-browser": "^18.2.3",
-    "@angular/platform-browser-dynamic": "^18.2.3",
-    "@angular/router": "^18.2.3",
-    "@angular/service-worker": "^18.2.3",
-    "@ionic/angular": "^8.3.0",
+    "@angular/common": "^18.2.8",
+    "@angular/core": "^18.2.8",
+    "@angular/forms": "^18.2.8",
+    "@angular/platform-browser": "^18.2.8",
+    "@angular/platform-browser-dynamic": "^18.2.8",
+    "@angular/router": "^18.2.8",
+    "@angular/service-worker": "^18.2.8",
+    "@ionic/angular": "^8.3.2",
     "@ionic/cli": "^7.2.0",
-    "@microsoft/applicationinsights-web": "^3.3.1",
+    "@microsoft/applicationinsights-web": "^3.3.3",
     "marked": "^12.0.2",
-    "ngx-markdown": "^18.0.0",
+    "ngx-markdown": "^18.1.0",
     "rxjs": "^7.5.0",
-    "tslib": "^2.7.0",
-    "zone.js": "^0.14.8"
+    "tslib": "^2.8.0",
+    "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.3",
-    "@angular-eslint/builder": "^18.3.0",
-    "@angular-eslint/eslint-plugin": "^18.3.0",
-    "@angular-eslint/eslint-plugin-template": "^18.3.0",
-    "@angular-eslint/schematics": "^18.3.0",
-    "@angular-eslint/template-parser": "^18.3.0",
-    "@angular/cli": "^18.2.3",
-    "@angular/compiler": "^18.2.3",
-    "@angular/compiler-cli": "^18.2.3",
-    "@angular/language-service": "^18.2.3",
+    "@angular-devkit/build-angular": "^18.2.8",
+    "@angular-eslint/builder": "^18.3.1",
+    "@angular-eslint/eslint-plugin": "^18.3.1",
+    "@angular-eslint/eslint-plugin-template": "^18.3.1",
+    "@angular-eslint/schematics": "^18.3.1",
+    "@angular-eslint/template-parser": "^18.3.1",
+    "@angular/cli": "^18.2.8",
+    "@angular/compiler": "^18.2.8",
+    "@angular/compiler-cli": "^18.2.8",
+    "@angular/language-service": "^18.2.8",
     "@ionic/angular-toolkit": "^12.1.1",
-    "@microsoft/applicationinsights-debugplugin-js": "^3.3.2",
+    "@microsoft/applicationinsights-debugplugin-js": "^3.3.3",
     "@types/eslint": "^8.56.12",
     "@types/jasmine": "^5.1.4",
-    "@types/node": "^20.16.5",
+    "@types/node": "^20.16.11",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "confusing-browser-globals": "^1.0.11",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jasmine": "^4.2.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jasmine": "^4.2.2",
     "eslint-plugin-no-loops": "^0.3.0",
     "eslint-plugin-no-relative-import-paths": "^1.5.5",
-    "eslint-plugin-no-unsanitized": "^4.0.2",
+    "eslint-plugin-no-unsanitized": "^4.1.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-regexp": "^2.6.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "http-server": "^14.1.0",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",

src/app/app.component.ts

@@ -25,6 +25,9 @@ export class AppComponent {
     this.setUpExternalLinkTracking();
     this.setUpPrintTracking();
 
+    // Approximation of the first page-view (Needs improvement)
+    this.loggingService.logPageView();
+
     this.handleServiceWorkerUpdates();
     this.handleServiceWorkerErrors();
   }

src/app/services/logging.service.ts

@@ -7,17 +7,68 @@ import {
 } from 'src/app/models/logging-event.enum';
 import { environment } from 'src/environments/environment';
 
+// Decraling the Matomo-based 'data-store'
+declare global {
+  interface Window {
+    _paq?: any[];
+  }
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class LoggingService {
+  matomoInitialized: boolean;
+
   appInsights: ApplicationInsights;
   appInsightsInitialized: boolean;
 
   constructor() {
+    this.setupMatomo();
     this.setupApplicationInsights();
   }
 
+  private parseMatomoInfo(connectionString: string | undefined) {
+    const properties = ['id', 'api', 'sdk'];
+    const connection: { id?: string; api?: string; sdk?: string } = {};
+    if (typeof connectionString === 'string') {
+      const allParts = connectionString.split(';');
+      allParts.forEach((part: string) => {
+        const [key, value] = part.split('=');
+        if (properties.includes(key)) {
+          connection[key as keyof typeof connection] = value;
+        }
+      });
+    }
+    return connection;
+  }
+
+  private setupMatomo() {
+    const connection = this.parseMatomoInfo(environment.matomoConnectionString);
+
+    if (!connection.id || !connection.api || !connection.sdk) {
+      return;
+    }
+
+    window._paq = window._paq || [];
+    window._paq.push(['setDoNotTrack', true]);
+    window._paq.push(['disableCookies']);
+    window._paq.push(['enableLinkTracking']);
+    window._paq.push(['enableHeartBeatTimer']);
+
+    (() => {
+      window._paq.push(['setTrackerUrl', connection.api]);
+      window._paq.push(['setSiteId', connection.id]);
+
+      const script = document.createElement('script');
+      script.async = true;
+      script.src = connection.sdk;
+      document.head.appendChild(script);
+
+      this.matomoInitialized = true;
+    })();
+  }
+
   private setupApplicationInsights() {
     if (
       !environment.appInsightsConnectionString ||
@@ -69,8 +120,12 @@ export class LoggingService {
   }
 
   public logPageView(name?: string): void {
+    if (this.matomoInitialized) {
+      window._paq.push(['setDocumentTitle', name ?? document.title]);
+      window._paq.push(['trackPageView']);
+    }
     if (this.appInsightsInitialized) {
-      this.appInsights.trackPageView({ name });
+      // Not necessary because of `enableAutoRouteTracking`-setting in `setupApplicationInsights()`
     }
     console.info(`LOG: PageView: "${name ?? ''}"`);
   }
@@ -84,6 +139,15 @@ export class LoggingService {
       [key: string]: any;
     },
   ): void {
+    if (this.matomoInitialized) {
+      window._paq.push([
+        'trackEvent',
+        category === LoggingEventCategory.ai ? 'UI' : category,
+        action,
+        properties && properties.name ? properties.name : undefined,
+        properties && properties.value ? properties.value : undefined,
+      ]);
+    }
     if (this.appInsightsInitialized) {
       this.appInsights.trackEvent(
         {

src/environments/environment.prod.ts.template.js

@@ -38,11 +38,9 @@ export const environment = {
   regionsSheetIds: '${process.env.REGIONS_SHEET_IDS || ''}',
 
   // Third-party tokens:
-  // Google Sheets API:
   google_sheets_api_key: '${process.env.GOOGLE_SHEETS_API_KEY || ''}',
   google_sheets_api_url: '${process.env.GOOGLE_SHEETS_API_URL || ''}',
-
-  // Application Insights
+  matomoConnectionString: '${process.env.MATOMO_CONNECTION_STRING || ''}',
   appInsightsConnectionString: '${process.env.AI_CONNECTION_STRING || ''}',
 };
 `;

src/environments/environment.test.ts

@@ -42,6 +42,7 @@ export const environment = {
   google_sheets_api_key: 'test-api-key',
   google_sheets_api_url: '/data',
 
-  // Application Insights
+  // Monitoring/Telemetry:
+  matomoConnectionString: '',
   appInsightsConnectionString: '',
 };

src/environments/environment.ts

@@ -106,6 +106,11 @@ This is an example of a [Helpful Information App](https://github.com/rodekruis/h
   google_sheets_api_key: '',
   google_sheets_api_url: 'http://localhost:3001',
 
+  // Monitoring/Telemetry:
+  //
+  // Matomo: (Format: "id=<site-id-number>;api=<url+path/php-filename>;sdk=<url+path/js-filename>")
+  matomoConnectionString: '',
+  //
   // Application Insights:
   appInsightsConnectionString: '',
 };