Variabilize the matomo id and url servers inside the docker integration

.gitlab-ci.yml

@@ -28,6 +28,8 @@ deploy_development:
     - sandbox
   script:
     - export NGINX_PORT=8081
+    - export MATOMO_SITE_ID=1
+    - export MATOMO_SERVER_URL=https://matomo-intothesky.alpha.grandlyon.com
     - docker-compose --project-name data-reloaded-dev up -d
   environment:
     name: development
@@ -47,6 +49,8 @@ deploy_staging:
     - staging
   script:
     - export NGINX_PORT=8080
+    - export MATOMO_SITE_ID=3
+    - export MATOMO_SERVER_URL=https://matomo-intothesky.alpha.grandlyon.com
     - docker-compose --project-name data-reloaded-rec up -d
   environment:
     name: staging

docker-compose.yml

@@ -5,7 +5,12 @@ services:
     build:
       context: ./
     volumes: 
-      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+      - ./nginx.conf.template:/etc/nginx/nginx.conf.template
     ports: 
       - ${NGINX_PORT}:8080
+    command: >
+      /bin/sh -c
+      'echo $MATOMO_SITE_ID && sed "s#<MATOMO_SITE_ID>#$MATOMO_SITE_ID#g; s#<MATOMO_SERVER_URL>#$MATOMO_SERVER_URL#g" /etc/nginx/nginx.conf.template
+      > /etc/nginx/conf.d/default.conf
+      && nginx -g "daemon off;"'
   
\ No newline at end of file

nginx.conf → nginx.conf.template

@@ -4,6 +4,25 @@ server {
     server_name _;
     root /usr/share/nginx/html/;
 
+    set $matomo_script
+        "<script type='text/javascript'>
+        var _paq = _paq || [];
+        var siteId = <MATOMO_SITE_ID>;
+        window['siteId'] = siteId;
+
+        _paq.push(['enableLinkTracking']);
+        (function() {
+        var u='<MATOMO_SERVER_URL>/';
+
+        _paq.push(['setTrackerUrl', u+'piwik.php']);
+        _paq.push(['setSiteId', siteId]);
+        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>";
+
+    sub_filter '</head>' '$matomo_script</head>'; 
+
     # rule redirecting to fr or en regarding the browser preferences
     location = / {
         rewrite_by_lua '

src/app/app.component.spec.ts

@@ -2,6 +2,8 @@ import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { MockComponent } from 'ng2-mock-component';
 import { RouterTestingModule } from '../../node_modules/@angular/router/testing';
+import { Angulartics2Module } from 'angulartics2';
+import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -15,6 +17,7 @@ describe('AppComponent', () => {
       ],
       imports: [
         RouterTestingModule,
+        Angulartics2Module.forRoot([Angulartics2Piwik]),
       ],
     }).compileComponents();
   }));

src/app/core/models/index.ts

 import { Notification, INotification } from './notification.model';
+import { IMatomoResponse } from './matomo.model';
 
 export { Notification, INotification };
+export { IMatomoResponse };

src/app/core/models/matomo.model.ts

+export interface IMatomoResponse {
+  nb_visits: number;
+}

src/app/core/services/index.ts

 import { ErrorService } from './error.service';
 import { NotificationService } from './notification.service';
+import { MatomoService } from './matomo.service';
 
 export { ErrorService };
 export { NotificationService };
+export { MatomoService };
 
 // tslint:disable-next-line:variable-name
 export const CoreServices = [
   ErrorService,
   NotificationService,
+  MatomoService,
 ];

src/app/core/services/matomo.service.ts

+import { Injectable } from '@angular/core';
+import { IMatomoResponse } from '../models/matomo.model';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { environment } from '../../../environments/environment';
+import { ErrorService } from './error.service';
+import { errors } from '../../../i18n/error-messages/error-messages';
+
+@Injectable()
+export class MatomoService {
+
+  constructor(
+    private http: HttpClient,
+    private _errorService: ErrorService,
+  ) { }
+
+  getPageMetadataPageMetrics(metadataId: string): Observable<number> {
+    const dateNowString = new Date().toISOString().slice(0, 10);
+    const dateOneMonthAgo = new Date();
+    dateOneMonthAgo.setMonth(new Date().getMonth() - 1);
+    const dateOneMonthAgoString = dateOneMonthAgo.toISOString().slice(0, 10);
+
+    const url = environment.matomo.url + '/?module=API&method=Actions.getPageUrls' +
+      '&idSite=' + window['siteId'] + '&format=json&period=range&date=' + dateOneMonthAgoString
+      + ',' + dateNowString +
+      '&segment=pageUrl=@' + metadataId + '/info';
+    return this.http.get<IMatomoResponse[]>(url).pipe(
+      map((results) => {
+        return results.length > 0 ? results.reduce((a, b) => a + b.nb_visits, 0) : 0;
+      }),
+      catchError(
+        (err) => {
+          throw this._errorService.handleError(err, { message: errors.matomo.getViews });
+        },
+      ));
+  }
+}

src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.spec.ts

@@ -56,6 +56,7 @@ const metadata = {
   max_north: 4,
   updateFrequency: '',
   max_west: 4,
+  nbViews: 10,
   crs: '',
   image: {
     url: '',

src/app/geosource/components/dataset-list/dataset-list.component.html

@@ -78,11 +78,11 @@
               </span>
               {{ formatDate(dataset.metadata.geonet.changeDate,'dd MMMM yyyy')}}
             </p>
-            <p>
+            <p *ngIf="dataset.metadata.nbViews">
               <span class="icon">
                 <i class="far fa-eye"></i>
               </span>
-              {{ dataset.metadata.popularity || '-' }}
+              {{ dataset.metadata.nbViews || '-' }}
             </p>
           </div>
         </div>

src/app/geosource/components/dataset-list/dataset-list.component.ts

@@ -10,6 +10,7 @@ import { Notification } from '../../../core/models';
 import { DatePipe } from '../../../../../node_modules/@angular/common';
 import { Angulartics2 } from 'angulartics2';
 import { HttpClient } from '@angular/common/http';
+import { MatomoService } from '../../../core/services/matomo.service';
 
 @Component({
   selector: 'app-dataset-list',
@@ -34,7 +35,7 @@ export class DatasetListComponent implements OnInit, OnDestroy {
     private _router: Router,
     private _notificationService: NotificationService,
     private _datePipe: DatePipe,
-    private _http: HttpClient,
+    private _matomoService: MatomoService,
   ) { }
 
   ngOnInit() {
@@ -73,11 +74,16 @@ export class DatasetListComponent implements OnInit, OnDestroy {
         this.loading = false;
         window.scrollTo(0, yPageOffset);
 
-        // const url = 'http://localhost:8181/piwik.php?search='
-        // + this._datasetResearchService.searchString
-        // + '&idsite=1&rec=1';
-        // console.log(url);
-        // this._http.get(url).subscribe();
+        // Get the page views for each dataset
+        this.datasetList.forEach((dataset) => {
+          this._matomoService.getPageMetadataPageMetrics(dataset.metadata.geonet.uuid).subscribe(
+            (views) => {
+              dataset.metadata.nbViews = views;
+            },
+            (err) => {
+            });
+        });
+
       },
       (err) => {
         this._notificationService.notify(new Notification({

src/app/geosource/models/metadata.model.ts

@@ -131,6 +131,7 @@ export class Metadata {
     url: string;
     type: string;
   };
+  'nbViews': number;
 
   constructor(data?: IMetadata) {
     if (data) {

src/environments/environment.prod.ts

@@ -15,6 +15,10 @@ export const environment = {
     meta: servicesProxyUrl + '/elasticsearch/*.meta',
   },
 
+  matomo: {
+    url: 'https://matomo-intothesky.alpha.grandlyon.com',
+  },
+
   // Path to the built app in a particular language
   angularAppHost: {
     fr: '/fr',

src/environments/environment.ts

@@ -15,6 +15,10 @@ export const environment = {
     meta: servicesProxyUrl + '/elasticsearch/*.meta',
   },
 
+  matomo: {
+    url: 'https://matomo-intothesky.alpha.grandlyon.com',
+  },
+
   // Path to the built app in a particular language
   angularAppHost: {
     fr: '/fr',

src/i18n/error-messages/error-messages.fr.ts

@@ -18,4 +18,7 @@ export const errors = {
     getDatasetChildren: 'Impossible de récupérer les enfants du jeu de données',
     getDatasetTitle: 'Impossible de récupérer le titre du jeu de données',
   },
+  matomo: {
+    getViews: 'Impossible de récupérer le nombre de vues',
+  },
 };

src/i18n/error-messages/error-messages.ts

@@ -18,4 +18,7 @@ export const errors = {
     getDatasetChildren: 'Failed to get the dataset children',
     getDatasetTitle: 'Failed to get the datatset title',
   },
+  matomo: {
+    getViews: 'Cannot get the views count',
+  },
 };

src/index.html

@@ -20,19 +20,6 @@
 
     </section>
   </app-root>
-  <script type="text/javascript">
-    var _paq = _paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    // _paq.push(['trackPageView']); // DELETE THIS LINE
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="//localhost:8181/";
-      _paq.push(['setTrackerUrl', u+'piwik.php']);
-      _paq.push(['setSiteId', '1']);
-      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>
 </body>
 
 </html>