Skip to content

Commit

Permalink
feat(routeChangeComplete events): set referrerUrl and customUrl on ro…
Browse files Browse the repository at this point in the history 
…uteChangeStart so it can matomo events can be used early on page load (e.g. in a react useEffect) with the correct values (#72)

* feat(routeChangeComplete events): set referrerUrl & customUrl on routeChangeStart so it can matomo events can be used early on page load (e.g. in a react useEffect) with the correct values

* Trigger notification
  • Loading branch information
@carolineBda
carolineBda authored Mar 10, 2022
1 parent 92b6060 commit 52f2bbc
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 78 deletions.
56 changes: 4 additions & 52 deletions src/__tests__/__snapshots__/matomo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@ Array [
"setCustomUrl",
"/path/to/page.php",
],
Array [
"setDocumentTitle",
"some page",
],
Array [
"deleteCustomVariables",
"page",
],
Array [
"setDocumentTitle",
"some page",
],
Array [
"trackPageView",
],
Expand Down Expand Up @@ -106,22 +106,10 @@ Array [

exports[`router.routeChangeComplete event should track route as search in /recherche 1`] = `
Array [
Array [
"setReferrerUrl",
"/path/to/hello2",
],
Array [
"setCustomUrl",
"/recherche",
],
Array [
"setDocumentTitle",
"search results",
],
Array [
"deleteCustomVariables",
"page",
],
Array [
"trackSiteSearch",
"some+query",
Expand All @@ -131,22 +119,10 @@ Array [

exports[`router.routeChangeComplete event should track route as search in /search 1`] = `
Array [
Array [
"setReferrerUrl",
"/recherche",
],
Array [
"setCustomUrl",
"/search",
],
Array [
"setDocumentTitle",
"search results",
],
Array [
"deleteCustomVariables",
"page",
],
Array [
"trackSiteSearch",
"some+query",
Expand All @@ -156,22 +132,10 @@ Array [

exports[`router.routeChangeComplete event should trackPageView with correct title on route change 1`] = `
Array [
Array [
"setReferrerUrl",
"/",
],
Array [
"setCustomUrl",
"/path/to/hello",
],
Array [
"setDocumentTitle",
"test page",
],
Array [
"deleteCustomVariables",
"page",
],
Array [
"trackPageView",
],
Expand All @@ -180,22 +144,10 @@ Array [

exports[`router.routeChangeComplete event should use previousPath as referer on consecutive route change 1`] = `
Array [
Array [
"setReferrerUrl",
"/path/to/hello",
],
Array [
"setCustomUrl",
"/path/to/hello2",
],
Array [
"setDocumentTitle",
"test page 2",
],
Array [
"deleteCustomVariables",
"page",
],
Array [
"trackPageView",
],
Expand Down
72 changes: 61 additions & 11 deletions src/__tests__/matomo.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import { init, push } from "..";
type RouteChangeFunction = (route: string) => void;
// eslint-disable-next-line @typescript-eslint/init-declarations
let mockRouteChangeComplete: RouteChangeFunction;
// eslint-disable-next-line @typescript-eslint/init-declarations
let mockRouteChangeStart: RouteChangeFunction;

type AnyObject = Record<string, string>;

jest.mock("next/router", () => {
const query = {} as AnyObject;
return {
events: {
emit: (_event: unknown, route: string) => {
emit: (_event: string, route: string) => {
if (/\?/.exec(route) !== null) {
const search = route.split("?")[1];
// eslint-disable-next-line @typescript-eslint/prefer-includes
Expand All @@ -28,11 +30,19 @@ jest.mock("next/router", () => {
});
}
}
mockRouteChangeComplete(route);
if (_event === "routeChangeStart") {
mockRouteChangeStart(route);
} else {
mockRouteChangeComplete(route);
}
jest.fn();
},
on: (_event: unknown, cb: RouteChangeFunction) => {
mockRouteChangeComplete = cb;
on: (_event: string, cb: RouteChangeFunction) => {
if (_event === "routeChangeStart") {
mockRouteChangeStart = cb;
} else {
mockRouteChangeComplete = cb;
}
},
},
query,
Expand Down Expand Up @@ -77,6 +87,43 @@ describe("push", () => {
});
});

describe("router.routeChangeStart event", () => {
beforeEach(() => {
global._paq = [];
jest.resetAllMocks();
});
test("should setReferrerUrl and setCustomUrl on route change start", async () => {
init({ siteId: "42", url: "YO" });
window._paq = [];

Router.events.emit("routeChangeStart", "/path/to/hello?world");

return new Promise<void>((resolve) => {
expect(window._paq).toEqual([
["setReferrerUrl", "/"],
["setCustomUrl", "/path/to/hello"],
["deleteCustomVariables", "page"],
]);

resolve();
});
});
test("should use previousPath as referer on consecutive route change", async () => {
document.title = "test page 2";

Router.events.emit("routeChangeStart", "/path/to/hello2?world");

return new Promise<void>((resolve) => {
expect(window._paq).toEqual([
["setReferrerUrl", "/path/to/hello"],
["setCustomUrl", "/path/to/hello2"],
["deleteCustomVariables", "page"],
]);
resolve();
});
});
});

describe("router.routeChangeComplete event", () => {
beforeEach(() => {
global._paq = [];
Expand All @@ -89,7 +136,7 @@ describe("router.routeChangeComplete event", () => {

Router.events.emit("routeChangeComplete", "/path/to/hello?world");

return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand All @@ -101,7 +148,7 @@ describe("router.routeChangeComplete event", () => {

Router.events.emit("routeChangeComplete", "/path/to/hello2?world");

return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand All @@ -112,7 +159,7 @@ describe("router.routeChangeComplete event", () => {
test("should track route as search in /recherche", async () => {
document.title = "search results";
Router.events.emit("routeChangeComplete", "/recherche?q=some+query");
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand All @@ -123,7 +170,7 @@ describe("router.routeChangeComplete event", () => {
test("should track route as search in /search", async () => {
document.title = "search results";
Router.events.emit("routeChangeComplete", "/search?q=some+query");
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand All @@ -147,10 +194,13 @@ describe("excludeUrlsPatterns", () => {
siteId: "42",
url: "https://YO",
});
Router.events.emit("routeChangeStart", "/login.php");
Router.events.emit("routeChangeStart", "/path/to/page.php");
Router.events.emit("routeChangeStart", "/path/to/page.php?token=pouet");
Router.events.emit("routeChangeComplete", "/login.php");
Router.events.emit("routeChangeComplete", "/path/to/page.php");
Router.events.emit("routeChangeComplete", "/path/to/page.php?token=pouet");
return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand All @@ -166,7 +216,7 @@ describe("excludeUrlsPatterns", () => {
url: "https://YO",
});

return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand All @@ -183,7 +233,7 @@ describe("excludeUrlsPatterns", () => {
url: "https://YO",
});

return new Promise((resolve) => {
return new Promise<void>((resolve) => {
setTimeout(() => {
expect(window._paq).toMatchSnapshot();
resolve();
Expand Down
32 changes: 17 additions & 15 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,35 +80,37 @@ export function init({
}
previousPath = location.pathname;

Router.events.on("routeChangeStart", (path: string): void => {
if (isExcludedUrl(path, excludeUrlsPatterns)) return;

// We use only the part of the url without the querystring to ensure piwik is happy
// It seems that piwik doesn't track well page with querystring
const [pathname] = path.split("?");

if (previousPath) {
push(["setReferrerUrl", `${previousPath}`]);
}
push(["setCustomUrl", pathname]);
push(["deleteCustomVariables", "page"]);
previousPath = pathname;
});

Router.events.on("routeChangeComplete", (path: string): void => {
const routeExcludedUrl = isExcludedUrl(path, excludeUrlsPatterns);
if (routeExcludedUrl) {
if (isExcludedUrl(path, excludeUrlsPatterns)) {
console.log(`matomo: exclude track ${path}`);
return;
}
// We use only the part of the url without the querystring to ensure piwik is happy
// It seems that piwik doesn't track well page with querystring
const [pathname] = path.split("?");

// In order to ensure that the page title had been updated,
// we delayed pushing the tracking to the next tick.
setTimeout(() => {
const { q } = Router.query;
if (previousPath) {
push(["setReferrerUrl", `${previousPath}`]);
}
push(["setCustomUrl", pathname]);
push(["setDocumentTitle", document.title]);
push(["deleteCustomVariables", "page"]);
if (
startsWith(pathname, "/recherche") ||
startsWith(pathname, "/search")
) {
if (startsWith(path, "/recherche") || startsWith(path, "/search")) {
push(["trackSiteSearch", q ?? ""]);
} else {
push(["trackPageView"]);
}
previousPath = pathname;
}, 0);
});
}
Expand Down

0 comments on commit 52f2bbc

Please sign in to comment.