UFAL/Matomo statistics using angulartics2 (#748)

* Modified matomo tracking in footer component * Do not use routerless Matomo because we want to track view on every page redirect * The Matomo statistics are tracked properly. * Prettyfied the code * Fix linting error * Fixed unit tests following the matomo statistics update * Fixed linting error * Added a document title in the footer * Added category to the eventTrack because it is required for the Matomo. * Refactored using matomo statistics - added into browser init service, because the Matomo statistics wasn't rendered on production * Changed matomo-settings location --------- Co-authored-by: Matus Kasak <[email protected]>
dataquest-dev · Nov 29, 2024 · e7e1577 · e7e1577
1 parent 6ffc7e5
commit e7e1577
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 32 deletions.
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
@@ -88,29 +88,7 @@ <h4><a href="https://lindat.cz/services">Services</a></h4>
         ga('create', 'UA-27008245-2', 'cuni.cz');
         ga('send', 'pageview');
         //]]>
-      </script>
-      <!-- Piwik LINDAT/CLARIAH-CZ tracker -->
-      <script type="text/javascript">
-        //<![CDATA[
-        var _paq = _paq || [];
-        _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-        _paq.push(["setCookieDomain", "*.mff.cuni.cz"]);
-        _paq.push(["setDomains", ["*.mff.cuni.cz"]]);
-        _paq.push(['setCustomVariable', 1, "source", "common-theme", "page"]);
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function() {
-          var u='//lindat.mff.cuni.cz/piwik/';
-          _paq.push(['setTrackerUrl', u+'piwik.php']);
-          _paq.push(['setSiteId', 2]);
-          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-          g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-        })();
-        //]]>
-      </script>
-      <noscript><p><img src="//lindat.mff.cuni.cz/piwik/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
-      <!-- End Piwik Code -->
-      <!-- End TRACKING CODE -->
+       </script>
     </footer>
   </div>
 </footer>
diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts
@@ -5,8 +5,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 
-import { By } from '@angular/platform-browser';
-
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { StoreModule } from '@ngrx/store';
 
@@ -62,10 +60,6 @@ describe('Footer component', () => {
     fixture = TestBed.createComponent(FooterComponent);
 
     comp = fixture.componentInstance; // component test instance
-
-    // query for the title <p> by CSS element selector
-    de = fixture.debugElement.query(By.css('p'));
-    el = de.nativeElement;
   });
 
   it('should create footer', inject([FooterComponent], (app: FooterComponent) => {

diff --git a/src/app/statistics/angulartics/dspace/view-tracker.component.ts b/src/app/statistics/angulartics/dspace/view-tracker.component.ts
@@ -40,7 +40,8 @@ export class ViewTrackerComponent implements OnInit, OnDestroy {
           action: 'page_view',
           properties: {
             object: this.object,
-            referrer
+            referrer,
+            category: 'page_view',
           },
         });
       });

diff --git a/src/main.browser.ts b/src/main.browser.ts
@@ -10,6 +10,7 @@ import { environment } from './environments/environment';
 import { AppConfig } from './config/app-config.interface';
 import { extendEnvironmentWithAppConfig } from './config/config.util';
 import { enableProdMode } from '@angular/core';
+import { matomoSettings } from './matomo/matomo-settings';
 
 const bootstrap = () => platformBrowserDynamic()
   .bootstrapModule(BrowserAppModule, {});
@@ -26,6 +27,7 @@ const main = () => {
   if (environment.production) {
     enableProdMode();
   }
+  addMatomoStatistics();
 
   if (hasTransferState) {
     // Configuration will be taken from transfer state during initialization
@@ -42,6 +44,22 @@ const main = () => {
   }
 };
 
+function addMatomoStatistics() {
+  (window as any)._paq = (window as any)._paq || [];
+
+  // Push all configuration commands first
+  (window as any)._paq.push(['setTrackerUrl', matomoSettings.hostUrl + 'matomo.php']);
+  (window as any)._paq.push(['setSiteId', matomoSettings.siteId]);
+  (window as any)._paq.push(['enableLinkTracking']);
+
+  const g = document.createElement('script');
+  g.type = 'text/javascript';
+  g.async = true;
+  g.defer = true;
+  g.src = matomoSettings.hostUrl + 'matomo.js';
+  document.getElementsByTagName('head')[0].appendChild(g);
+}
+
 // support async tag or hmr
 if (document.readyState === 'complete' && !hasTransferState) {
   main();

diff --git a/src/matomo/matomo-settings.ts b/src/matomo/matomo-settings.ts
@@ -0,0 +1,7 @@
+/**
+ * Matomo settings for tracking statistics. This file could be mounted in the docker container.
+ */
+export const matomoSettings = {
+  hostUrl: 'http://localhost:8135/',
+  siteId: '1'
+};
diff --git a/src/modules/app/browser-app.module.ts b/src/modules/app/browser-app.module.ts
@@ -15,7 +15,9 @@ import { AppModule } from '../../app/app.module';
 import { ClientCookieService } from '../../app/core/services/client-cookie.service';
 import { CookieService } from '../../app/core/services/cookie.service';
 import { AuthService } from '../../app/core/auth/auth.service';
-import { Angulartics2GoogleTagManager, Angulartics2RouterlessModule } from 'angulartics2';
+import {
+  Angulartics2GoogleTagManager, Angulartics2Module,
+} from 'angulartics2';
 import { SubmissionService } from '../../app/submission/submission.service';
 import { StatisticsModule } from '../../app/statistics/statistics.module';
 import { BrowserKlaroService } from '../../app/shared/cookies/browser-klaro.service';
@@ -54,7 +56,7 @@ export function getRequest(transferState: TransferState): any {
     // forRoot ensures the providers are only created once
     IdlePreloadModule.forRoot(),
     StatisticsModule.forRoot(),
-    Angulartics2RouterlessModule.forRoot(),
+    Angulartics2Module.forRoot(),
     BrowserAnimationsModule,
     BrowserTransferStateModule,
     TranslateModule.forRoot({

diff --git a/src/modules/app/browser-init.service.ts b/src/modules/app/browser-init.service.ts
@@ -33,6 +33,7 @@ import { MenuService } from '../../app/shared/menu/menu.service';
 import { RootDataService } from '../../app/core/data/root-data.service';
 import { firstValueFrom, Subscription } from 'rxjs';
 import { ServerCheckGuard } from '../../app/core/server-check/server-check.guard';
+import { Angulartics2Matomo } from 'angulartics2';
 
 /**
  * Performs client-side initialization.
@@ -59,6 +60,7 @@ export class BrowserInitService extends InitService {
     protected menuService: MenuService,
     private rootDataService: RootDataService,
     protected serverCheckGuard: ServerCheckGuard,
+    private angulartics2Matomo: Angulartics2Matomo
   ) {
     super(
       store,
@@ -100,6 +102,7 @@ export class BrowserInitService extends InitService {
       this.initRouteListeners();
       this.themeService.listenForThemeChanges(true);
       this.trackAuthTokenExpiration();
+      this.angulartics2Matomo.startTracking();
 
       this.initKlaro();