DON-950: Add new Matomo library to donation start form component

thebiggive · Mar 26, 2024 · 187a568 · 187a568
1 parent 5da15c4
commit 187a568
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 21 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,28 +1,33 @@
 import {APP_BASE_HREF, AsyncPipe, DatePipe} from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
-import { MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule, RouterOutlet } from '@angular/router';
-import { ComponentsModule } from '@biggive/components-angular';
-import { TransferHttpCacheModule } from '@nguniversal/common';
+import {HttpClientModule} from '@angular/common/http';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
+import {MAT_RADIO_DEFAULT_OPTIONS} from '@angular/material/radio';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule, RouterOutlet} from '@angular/router';
+import {ComponentsModule} from '@biggive/components-angular';
+import {TransferHttpCacheModule} from '@nguniversal/common';
 import {RECAPTCHA_BASE_URL, RECAPTCHA_NONCE} from 'ng-recaptcha';
-import { MatomoModule } from 'ngx-matomo';
-import { LOCAL_STORAGE } from 'ngx-webstorage-service';
+import {MatomoModule} from 'ngx-matomo';
+import {LOCAL_STORAGE} from 'ngx-webstorage-service';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
-import { routes } from './app-routing';
-import { CampaignListResolver } from './campaign-list.resolver';
-import { CampaignResolver } from './campaign.resolver';
-import { CharityCampaignsResolver } from './charity-campaigns.resolver';
-import { TBG_DONATE_STORAGE } from './donation.service';
-import { environment } from '../environments/environment';
-import { TBG_DONATE_ID_STORAGE } from './identity.service';
-import { provideMatomo } from 'ngx-matomo-client';
-import { withRouter } from 'ngx-matomo-client';
+import {routes} from './app-routing';
+import {CampaignListResolver} from './campaign-list.resolver';
+import {CampaignResolver} from './campaign.resolver';
+import {CharityCampaignsResolver} from './charity-campaigns.resolver';
+import {TBG_DONATE_STORAGE} from './donation.service';
+import {environment} from '../environments/environment';
+import {TBG_DONATE_ID_STORAGE} from './identity.service';
+import {
+  MatomoInitializationMode,
+  NgxMatomoModule,
+  NgxMatomoRouterModule,
+  provideMatomo,
+  withRouter
+} from 'ngx-matomo-client';
 
 const matomoBaseUri = 'https://biggive.matomo.cloud';
 const matomoTrackers = environment.matomoSiteId ? [
@@ -51,6 +56,12 @@ const matomoTrackers = environment.matomoSiteId ? [
       },
       requireCookieConsent: true,
     }),
+    NgxMatomoModule.forRoot({
+      siteId: environment.matomoSiteId,
+      trackerUrl: `${matomoBaseUri}/matomo.js`,
+      mode: MatomoInitializationMode.AUTO,
+    }),
+    NgxMatomoRouterModule.forRoot({}),
     RouterModule.forRoot(routes, {
       bindToComponentInputs: true,
       initialNavigation: 'enabledBlocking', // "This value is required for server-side rendering to work." https://angular.io/api/router/InitialNavigation

diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.spec.ts b/src/app/donation-start/donation-start-form/donation-start-form.component.spec.ts
@@ -16,6 +16,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
 import {RecaptchaModule} from 'ng-recaptcha';
 import {MatomoModule, MatomoTracker} from 'ngx-matomo';
+import {MatomoTracker as MatomoClientTracker, NgxMatomoModule} from 'ngx-matomo-client';
 import {InMemoryStorageService} from 'ngx-webstorage-service';
 import {of} from 'rxjs';
 
@@ -53,6 +54,10 @@ function makeDonationStartFormComponent(donationService: DonationService,) {
       trackEvent: () => {
       }
     } as unknown as MatomoTracker,
+    {
+      trackEvent: () => {
+      }
+    } as unknown as MatomoClientTracker,
     undefined as unknown as PageMetaService,
     undefined as unknown as PostcodeService,
     {},
@@ -108,6 +113,10 @@ describe('DonationStartNewPrimaryComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
+        NgxMatomoModule.forRoot({
+          siteId: '',
+          trackerUrl: '',
+        }),
       ],
       providers: [
         TimeLeftPipe,

diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.ts b/src/app/donation-start/donation-start-form/donation-start-form.component.ts
@@ -23,6 +23,7 @@ import {MatStepper} from '@angular/material/stepper';
 import {ActivatedRoute, Router} from '@angular/router';
 import {RecaptchaComponent} from 'ng-recaptcha';
 import {MatomoTracker} from 'ngx-matomo';
+import {MatomoTracker as MatomoClientTracker} from 'ngx-matomo-client';
 import {debounceTime, distinctUntilChanged, retryWhen, startWith, switchMap, tap} from 'rxjs/operators';
 import {
   PaymentIntent,
@@ -249,6 +250,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
     private formBuilder: FormBuilder,
     private identityService: IdentityService,
     private matomoTracker: MatomoTracker,
+    private matomoClientTracker: MatomoClientTracker,
     private pageMeta: PageMetaService,
     private postcodeService: PostcodeService,
     @Inject(PLATFORM_ID) private platformId: Object,