feat: add matomo tracking for differents buttons (#369)

* feat: add matomo tracking for differents buttons * feat: add new tracker matomo buttons * fix: test * fix: add id to ouverture fiche
anct-cartographie-nationale · Oct 12, 2023 · 968d5f5 · 968d5f5
1 parent ee43201
commit 968d5f5
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 10 deletions.
diff --git a/...atures/cartographie/components/affiner-recherche-form/affiner-recherche-form.component.ts b/...atures/cartographie/components/affiner-recherche-form/affiner-recherche-form.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ConditionAcces, LabelNational } from '@gouvfr-anct/lieux-de-mediation-numerique';
@@ -9,6 +9,7 @@ import {
   toFilterFormPresentationFromQuery
 } from '../../../core/presenters';
 import { labelsAutresFrom, labelNationauxFrom, strategiesTerritorialesFrom } from './affiner-recherche-form.presenter';
+import { MatomoTracker } from 'ngx-matomo';
 
 type AffinerRechercheFields = {
   prise_rdv: FormControl<boolean>;
@@ -60,7 +61,11 @@ export class AffinerRechercheFormComponent {
     ['ZRR', 'ZRR (zones de revitalisation rurale)']
   ]);
 
-  public constructor(public route: ActivatedRoute, public readonly router: Router) {}
+  public constructor(
+    public route: ActivatedRoute,
+    public readonly router: Router,
+    @Optional() private readonly _matomoTracker?: MatomoTracker
+  ) {}
 
   public affinerRechercheForm: FormGroup<AffinerRechercheFields> = AFFINER_RECHERCHE_FORM(
     toFilterFormPresentationFromQuery(this.route.snapshot.queryParams)
@@ -71,6 +76,7 @@ export class AffinerRechercheFormComponent {
   public labelNationauxFrom = labelNationauxFrom;
 
   public setFilterToQueryString(field: string): void {
+    this._matomoTracker?.trackEvent('Cartographie', 'Affiner recherche', field);
     this.router.navigate([], {
       queryParams: {
         ...this.route.snapshot.queryParams,

diff --git a/...list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html b/...list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.html
@@ -2,6 +2,7 @@
   <a
     class="text-decoration-none link-dark link-lieu"
     [routerLink]="[lieuMediationNumerique.id, 'details']"
+    (click)="matomoTracking(lieuMediationNumerique.id)"
     [relativeTo]="route.parent"
     queryParamsHandling="preserve"
     (mouseover)="enableHover.emit(lieuMediationNumerique.id)"

diff --git a/...e-list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.ts b/...e-list/lieu-mediation-numerique-list-item/lieu-mediation-numerique-list-item.component.ts
@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ConditionAcces, LabelNational } from '@gouvfr-anct/lieux-de-mediation-numerique';
 import { ASSETS_TOKEN, AssetsConfiguration } from '../../../../../root';
 import { LieuMediationNumeriqueListItemPresentation } from '../../../presenters';
+import { MatomoTracker } from 'ngx-matomo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,10 +25,15 @@ export class LieuMediationNumeriqueListItemComponent {
 
   public constructor(
     @Inject(ASSETS_TOKEN) public assetsConfiguration: AssetsConfiguration,
-    public readonly route: ActivatedRoute
+    public readonly route: ActivatedRoute,
+    @Optional() private readonly _matomoTracker?: MatomoTracker
   ) {}
 
   public dateIsValide(dateMaj: Date): boolean {
     return dateMaj > new Date('1970-01-01');
   }
+
+  public matomoTracking(lieuID: string): void {
+    this._matomoTracker?.trackEvent('Fiches', 'Début', `Ouverture de fiches - ${lieuID}`);
+  }
 }
diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.html b/src/features/cartographie/layouts/cartographie/cartographie.layout.html
@@ -73,7 +73,7 @@ <h3 class="card-title text-primary">
         class="navbar-btn pb-1 pt-0 mt-1"
         [attr.aria-controls]="aideOffcanvas.id"
         [class.active]="aideOffcanvas.expanded$ | async"
-        (click)="aideOffcanvas.toggle($event); affinerRechercheOffcanvas.close()">
+        (click)="aideOffcanvas.toggle($event); affinerRechercheOffcanvas.close(); matomoAideButtonTracking()">
         <i
           class="ri-2x"
           [ngClass]="(aideOffcanvas.expanded$ | async) ? 'ri-close-circle-line text-primary' : 'ri-question-line'"></i>

diff --git a/src/features/cartographie/layouts/cartographie/cartographie.layout.ts b/src/features/cartographie/layouts/cartographie/cartographie.layout.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Optional, ViewChild } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router, RouterOutlet } from '@angular/router';
 import { BehaviorSubject, Observable, of, Subject, tap, withLatestFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -33,6 +33,7 @@ import {
   shouldNavigateToListPage
 } from '../../presenters';
 import { cartographieLayoutProviders } from './cartographie.layout.providers';
+import { MatomoTracker } from 'ngx-matomo';
 
 const filteredByDepartementIfExist = (
   departement: DepartementPresentation | undefined,
@@ -161,7 +162,8 @@ export class CartographieLayout {
     public readonly markersPresenter: MarkersPresenter,
     @Inject(ASSETS_TOKEN) public readonly assetsConfiguration: AssetsConfiguration,
     @Inject(ZOOM_LEVEL_TOKEN)
-    private readonly _zoomLevel: ZoomLevelConfiguration
+    private readonly _zoomLevel: ZoomLevelConfiguration,
+    @Optional() private readonly _matomoTracker?: MatomoTracker
   ) {}
 
   public onShowLieuxInDepartement(departement: TerritoirePresentation): void {
@@ -251,4 +253,8 @@ export class CartographieLayout {
   public toggleMapForSmallDevices(): void {
     this._showMapForSmallDevices$.next(!this._showMapForSmallDevices$.value);
   }
+
+  public matomoAideButtonTracking(): void {
+    this._matomoTracker?.trackEvent('Cartograhie', 'Sidebar', 'Bouton aide');
+  }
 }
diff --git a/src/features/orientation/components/display-on-map-link/display-on-map-link.component.html b/src/features/orientation/components/display-on-map-link/display-on-map-link.component.html
@@ -9,7 +9,8 @@
     [ngClass]="'btn-' + buttonStyle"
     [class.disabled]="lieuxMediationNumeriqueCount === 0"
     [routerLink]="['/', 'cartographie']"
-    queryParamsHandling="preserve">
+    queryParamsHandling="preserve"
+    (click)="matomoTracking()">
     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
   </a>
   <a

diff --git a/...features/orientation/components/display-on-map-link/display-on-map-link.component.spec.ts b/...features/orientation/components/display-on-map-link/display-on-map-link.component.spec.ts
@@ -1,10 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DisplayOnMapLinkComponent } from './display-on-map-link.component';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
 
 describe('DisplayOnMapLinkComponent', (): void => {
   beforeEach(async (): Promise<void> => {
     await TestBed.configureTestingModule({
-      declarations: [DisplayOnMapLinkComponent]
+      declarations: [DisplayOnMapLinkComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParams: of([])
+          }
+        }
+      ]
     })
       .compileComponents()
       .catch((): void => {

diff --git a/src/features/orientation/components/display-on-map-link/display-on-map-link.component.ts b/src/features/orientation/components/display-on-map-link/display-on-map-link.component.ts
@@ -1,6 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core';
 import { ActivatedFeatureConfiguration } from '../../../../root';
 import { HttpParams } from '@angular/common/http';
+import { MatomoTracker } from 'ngx-matomo';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -16,7 +18,20 @@ export class DisplayOnMapLinkComponent {
 
   @Input() public buttonStyle: 'primary' | 'secondary' = 'secondary';
 
+  public constructor(private route: ActivatedRoute, @Optional() private readonly _matomoTracker?: MatomoTracker) {}
+
   public toQueryString(fromObject: {} = {}): string {
     return new HttpParams({ fromObject }).toString();
   }
+
+  public matomoTracking(): void {
+    const filtersKeys = this.route.snapshot.queryParams;
+    Object.keys(filtersKeys).map((key) =>
+      this._matomoTracker?.trackEvent(
+        'Parcours orientation',
+        'filtres',
+        `${key} - ${Array.isArray(filtersKeys[key]) ? filtersKeys[key].join(', ') : filtersKeys[key]}`
+      )
+    );
+  }
 }