-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: replace old matomo tracking HP-2500
- Loading branch information
Showing
22 changed files
with
380 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| REACT_APP_PROFILE_GRAPHQL="https://helsinkiprofile.test.kuva.hel.ninja/graphql/" | ||
| REACT_APP_HELSINKI_ACCOUNT_AMR="helsinki_tunnus" | ||
| REACT_APP_KEYCLOAK_AUTHORITY="https://tunnistus.test.hel.ninja/auth/realms/helsinki-tunnistus/" | ||
| REACT_APP_MATOMO_URL_BASE="test" | ||
| REACT_APP_MATOMO_SITE_ID="test123" | ||
| REACT_APP_MATOMO_ENABLED=false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| /* eslint-disable no-underscore-dangle */ | ||
| import { TRACK_TYPES } from './constants'; | ||
|
|
||
| export type MatomoTrackerOptions = { | ||
| urlBase: string; | ||
| siteId: string; | ||
| srcUrl: string; | ||
| trackerUrl?: string; | ||
| enabled: boolean; | ||
| linkTracking?: boolean; | ||
| configurations?: { | ||
| [key: string]: string | string[] | boolean | undefined; | ||
| }; | ||
| }; | ||
|
|
||
| export type CustomDimension = { | ||
| id: number; | ||
| value: string; | ||
| }; | ||
|
|
||
| export type TrackPageViewParams = { | ||
| documentTitle?: string; | ||
| href?: string | Location; | ||
| customDimensions?: boolean | CustomDimension[]; | ||
| }; | ||
|
|
||
| export interface TrackEventParams extends TrackPageViewParams { | ||
| category: string; | ||
| action: string; | ||
| name?: string; | ||
| value?: number; | ||
| } | ||
|
|
||
| export type TrackParams = { | ||
| data: unknown[]; | ||
| } & TrackPageViewParams; | ||
|
|
||
| class MatomoTracker { | ||
| constructor(userOptions: MatomoTrackerOptions) { | ||
| if (!userOptions.urlBase) { | ||
| throw new Error('Matomo urlBase is required'); | ||
| } | ||
|
|
||
| if (!userOptions.siteId) { | ||
| throw new Error('Matomo siteId is required.'); | ||
| } | ||
|
|
||
| this.initialize(userOptions); | ||
| } | ||
|
|
||
| enableLinkTracking(active: boolean): void { | ||
| this.pushInstruction('enableLinkTracking', active); | ||
| } | ||
|
|
||
| pushInstruction(name: string, ...args: unknown[]): this { | ||
| if (typeof window !== 'undefined') { | ||
| window._paq.push([name, ...args]); | ||
| } | ||
|
|
||
| return this; | ||
| } | ||
|
|
||
| trackPageView(params?: TrackPageViewParams): void { | ||
| this.track({ data: [TRACK_TYPES.TRACK_VIEW], ...params }); | ||
| } | ||
|
|
||
| // Tracks events | ||
| // https://matomo.org/docs/event-tracking/#tracking-events | ||
| trackEvent({ | ||
| category, | ||
| action, | ||
| name, | ||
| value, | ||
| ...otherParams | ||
| }: TrackEventParams): void { | ||
| if (category && action) { | ||
| this.track({ | ||
| data: [TRACK_TYPES.TRACK_EVENT, category, action, name, value], | ||
| ...otherParams, | ||
| }); | ||
| } else { | ||
| throw new Error(`Error: category and action are required.`); | ||
| } | ||
| } | ||
|
|
||
| track({ | ||
| data = [], | ||
| documentTitle = document.title, | ||
| href, | ||
| }: TrackParams): void { | ||
| if (data.length) { | ||
| this.pushInstruction('setCustomUrl', href ?? window.location.href); | ||
| this.pushInstruction('setDocumentTitle', documentTitle); | ||
|
|
||
| this.pushInstruction(...(data as [string, ...unknown[]])); | ||
| } | ||
| } | ||
|
|
||
| private initialize({ | ||
| urlBase, | ||
| siteId, | ||
| srcUrl, | ||
| trackerUrl = 'matomo.php', | ||
| enabled = true, | ||
| linkTracking = true, | ||
| configurations = {}, | ||
| }: MatomoTrackerOptions) { | ||
| if (typeof window === 'undefined') { | ||
| return; | ||
| } | ||
|
|
||
| window._paq = window._paq || []; | ||
|
|
||
| if (window._paq.length !== 0) { | ||
| return; | ||
| } | ||
|
|
||
| if (!enabled) { | ||
| return; | ||
| } | ||
|
|
||
| this.pushInstruction('setTrackerUrl', `${urlBase}${trackerUrl}`); | ||
| this.pushInstruction('setSiteId', siteId); | ||
|
|
||
| Object.entries(configurations).forEach(([name, instructions]) => { | ||
| if (instructions instanceof Array) { | ||
| this.pushInstruction(name, ...instructions); | ||
| } else if (instructions === undefined) { | ||
| this.pushInstruction(name); | ||
| } else { | ||
| this.pushInstruction(name, instructions); | ||
| } | ||
| }); | ||
|
|
||
| this.enableLinkTracking(linkTracking); | ||
|
|
||
| const doc = document; | ||
| const scriptElement = doc.createElement('script'); | ||
| const scripts = doc.getElementsByTagName('script')[0]; | ||
|
|
||
| scriptElement.type = 'text/javascript'; | ||
| scriptElement.async = true; | ||
| scriptElement.defer = true; | ||
| scriptElement.src = `${urlBase}${srcUrl}`; | ||
|
|
||
| if (scripts?.parentNode) { | ||
| scripts?.parentNode.insertBefore(scriptElement, scripts); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default MatomoTracker; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /* eslint-disable no-underscore-dangle */ | ||
| import MatomoTracker, { MatomoTrackerOptions } from '../MatomoTracker'; | ||
|
|
||
| describe('MatomoTracker', () => { | ||
| it('should initialise window._paq', () => { | ||
| window._paq = []; | ||
|
|
||
| const intance = new MatomoTracker({ | ||
| urlBase: 'https://www.test.fi/', | ||
| siteId: 'test123', | ||
| srcUrl: 'test.js', | ||
| enabled: true, | ||
| configurations: { | ||
| foo: 'bar', | ||
| testArray: ['testArrayItem1', 'testArrayItem2'], | ||
| testNoValue: undefined, | ||
| }, | ||
| }); | ||
|
|
||
| expect(intance).toBeTruthy(); | ||
| expect(window._paq).toEqual([ | ||
| ['setTrackerUrl', 'https://www.test.fi/matomo.php'], | ||
| ['setSiteId', 'test123'], | ||
| ['foo', 'bar'], | ||
| ['testArray', 'testArrayItem1', 'testArrayItem2'], | ||
| ['testNoValue'], | ||
| ['enableLinkTracking', true], | ||
| ]); | ||
| }); | ||
|
|
||
| it('should throw error if urlBase missing', () => { | ||
| expect( | ||
| () => new MatomoTracker({ siteId: 'test123' } as MatomoTrackerOptions) | ||
| ).toThrowError(); | ||
| }); | ||
|
|
||
| it('should throw error if siteId missing', () => { | ||
| expect( | ||
| () => | ||
| new MatomoTracker({ | ||
| urlBase: 'https://www.test.fi', | ||
| } as MatomoTrackerOptions) | ||
| ).toThrowError(); | ||
| }); | ||
| }); |
Oops, something went wrong.