diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dfa6d5b9a..eace7f096 100644 --- 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 index f22b79fcb..9efdbc26b 100644 --- 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 index 7e895dd4a..8e383bf83 100644 --- 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,