-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: push SPA router changes to matomo analytics (when appropriate)
- Loading branch information
1 parent
049028d
commit 57e7564
Showing
4 changed files
with
183 additions
and
36 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all) | ||
// SPDX-FileCopyrightText: 2022 dv4all | ||
// | ||
// SPDX-License-Identifier: Apache-2.0 | ||
|
||
import {initMatomoCustomUrl} from './setMatomoPage' | ||
|
||
let setCustomUrl:Function | ||
|
||
// mock push fn | ||
const mockPush = jest.fn() | ||
// mock matomo object _paq | ||
Object.defineProperty(window, '_paq', { | ||
value: { | ||
push: mockPush, | ||
} | ||
}) | ||
|
||
beforeEach(() => { | ||
setCustomUrl = initMatomoCustomUrl() | ||
}) | ||
|
||
it('does not trigger action when matomo.id is null', () => { | ||
const matomo = { | ||
id: null, | ||
consent:null | ||
} | ||
setCustomUrl(matomo) | ||
expect(mockPush).not.toBeCalled() | ||
}) | ||
|
||
it('does not trigger action when matomo.consent is false', () => { | ||
const matomo = { | ||
id: 'test-id', | ||
consent: false | ||
} | ||
setCustomUrl(matomo) | ||
expect(mockPush).not.toBeCalled() | ||
}) | ||
|
||
// This test ensures that we push custom page only after inital | ||
// page load. At initial page load piwik.js script will report that | ||
// page automatically. After that we need to push customUrl change on our | ||
// because we use SPA router (next.router) for navigation | ||
it('push custom page to matomo ONLY after initial url changed', () => { | ||
const matomo = { | ||
id: 'test-id', | ||
consent: true | ||
} | ||
setCustomUrl(matomo) | ||
// this will not trigger call to _paq | ||
// because previousUrl is null unchanged | ||
expect(mockPush).not.toBeCalled() | ||
// move to another location | ||
Object.defineProperty(window, 'location', { | ||
value: { | ||
href: 'http://test.com/page1', | ||
} | ||
}) | ||
setCustomUrl(matomo) | ||
// calls push 4 times to setReferrerUrl, | ||
// setCustomUrl, setDocumentTitle, trackPageView | ||
expect(mockPush).toBeCalledTimes(4) | ||
}) |
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,57 @@ | ||
// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all) | ||
// SPDX-FileCopyrightText: 2022 dv4all | ||
// | ||
// SPDX-License-Identifier: Apache-2.0 | ||
|
||
import {Matomo} from './nodeCookies' | ||
|
||
export function initMatomoCustomUrl() { | ||
// keep previousPath in memory | ||
let previousUrl: string | null = null | ||
/** | ||
* This function is used to register SPA router changes. | ||
* These route changes are not registerd by matomo automatically. | ||
* The function should be called after navigation is completed in order | ||
* to extract correct (dynamic) page title | ||
* https://matomo.org/faq/how-to/how-do-i-set-a-custom-url-using-the-matomo-javascript-tracker/ | ||
* @param param0 | ||
*/ | ||
function setCustomUrl({id, consent}: Matomo) { | ||
// console.group('setMatomoPage') | ||
// console.log('id...', id) | ||
// console.log('consent...', consent) | ||
// console.log('previousUrl...', previousUrl) | ||
if (id && consent && | ||
typeof window != 'undefined' && | ||
typeof location != 'undefined' | ||
) { | ||
// extract push function from matomo/piwik | ||
const setValue = (window as any)?._paq?.push | ||
// console.log('typeof setValue...', typeof setValue) | ||
if (typeof setValue === 'function') { | ||
// extract current location | ||
const href = location.href | ||
// console.log('href...', href) | ||
// we use this method ONLY after initial landing | ||
// at initial landing we only save previousUrl | ||
if (previousUrl !== null && previousUrl !== href) { | ||
// set previous page/url | ||
setValue(['setReferrerUrl', previousUrl]) | ||
// console.log('setReferrerUrl...', previousUrl) | ||
// set current page/url | ||
setValue(['setCustomUrl', href]) | ||
// console.log('setCustomUrl...', href) | ||
// set page title | ||
setValue(['setDocumentTitle', document.title]) | ||
// console.log('setDocumentTitle...', document.title) | ||
// this push triggers piwik.php script to track new page | ||
setValue(['trackPageView']) | ||
} | ||
// save current url as previuos url | ||
previousUrl=href | ||
} | ||
} | ||
// console.groupEnd() | ||
} | ||
return setCustomUrl | ||
} |
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