implemented dynamic matomo loading

backend/src/main/java/ee/ria/riha/conf/ApplicationProperties.java

 package ee.ria.riha.conf;
 
-import java.util.List;
+import lombok.*;
+import org.hibernate.validator.constraints.*;
+import org.springframework.boot.context.properties.*;
+import org.springframework.context.annotation.*;
 
-import lombok.Getter;
-import lombok.Setter;
-import org.hibernate.validator.constraints.NotEmpty;
-import org.springframework.boot.context.properties.ConfigurationProperties;
-import org.springframework.context.annotation.Configuration;
+import java.util.*;
 
 /**
  * @author Valentin Suhnjov
@@ -120,6 +119,14 @@ public class ApplicationProperties {
     public static class TrackingProperties {
         private final GoogleAnalyticsProperties googleAnalytics = new GoogleAnalyticsProperties();
         private final HotjarProperties hotjar = new HotjarProperties();
+        private final MatomoProperties matomo = new MatomoProperties();
+    }
+
+    @Getter
+    @Setter
+    public static class MatomoProperties {
+        private String url;
+        private String properties;
     }
 
     @Getter

backend/src/main/resources/application.properties

@@ -106,6 +106,11 @@ browser.cors.allowedOrigins=http://riha.ee,http://ria.ee,http://abi.riha.ee,http
 
 
 ## Tracking code
+### Matomo
+browser.tracking.matomo.url=https://matomo.ria.ee/matomo.js
+# :: separates key and value; ;; - separates key-value pairs
+browser.tracking.matomo.properties=setTrackerUrl::https://matomo.ria.ee/matomo.php;;setSiteId::18;;trackPageView;;enableLinkTracking
+
 ### Google analytics
 browser.tracking.googleAnalytics.id=
 

frontend/src/app/models/environment.ts

-import { User } from './user';
+import {User} from './user';
 
 export class Environment {
   private userDetails: User;
@@ -33,6 +33,10 @@ export class Environment {
     return ret;
   }
 
+  public getMatomoProperties() {
+    return this.tracking.matomo;
+  }
+
   public getUserDetails(): User {
     return this.userDetails;
   }
@@ -55,6 +59,10 @@ export class Environment {
       hotjar: {
         hjid: null,
         hjsv: null
+      },
+      matomo: {
+        url: null,
+        properties: null,
       }
     }
   }

frontend/src/app/services/environment.service.ts

@@ -72,7 +72,7 @@ export class EnvironmentService {
     });
   }
 
-  private runTrackingScripts(env){
+  private runTrackingScripts(env: Environment){
     const googleAnalyticsId = env.getGoogleAnalyticsId();
     if (googleAnalyticsId){
       (function (i, s, o, g, r, a, m) {
@@ -103,6 +103,26 @@ export class EnvironmentService {
         a.appendChild(r);
       })(<any>window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
     }
+
+    const matomoProperties = env.getMatomoProperties();
+    if (matomoProperties && matomoProperties.url && matomoProperties.properties) {
+        ((h, props) => {
+          h._paq = h._paq || (() => {
+            const r = [];
+            props.split(";;").forEach(prop => r.push(prop.split("::")))
+            return r;
+          })();
+
+        })(<any>window, matomoProperties.properties);
+
+        const head = document.getElementsByTagName('head')[0];
+        const matomoScriptTag = document.createElement('script');
+
+        matomoScriptTag.async = true;
+        matomoScriptTag.defer = true;
+        matomoScriptTag.src = matomoProperties.url;
+        head.appendChild(matomoScriptTag);
+      }
   }
 
   public onAppStart(): Promise<any> {

frontend/src/assets/tracking.js

-var idSite = 16;
-var matomoTrackingApiUrl = 'https://matomo.ria.ee/matomo.php';
-
-var _paq = window._paq || [];
-_paq.push(['setTrackerUrl', matomoTrackingApiUrl]);
-_paq.push(['setSiteId', idSite]);
-_paq.push(['trackPageView']);
-_paq.push(['enableLinkTracking']);

frontend/src/index.html

@@ -9,8 +9,6 @@
   <script src="https://plumbr.ria.ee/pa.js" data-plumbr='{"accountId":"3abpe9idtkv5qogsv111qrcl8c","appName":"www_riha_ee", "serverUrl":"https://plumbr.ria.ee"}'></script>
   <link rel="icon" type="image/png" href="assets/coat-of-arms-favicon.png">
   <link rel="apple-touch-icon" href="assets/apple-touch-coat-of-arms-favicon.png"/>
-  <script src="assets/tracking.js"></script>
-  <script src="https://matomo.ria.ee/matomo.js" async defer></script>
 </head>
 <body>
   <app-root></app-root>