Fix matomo tracking trigger (#6803)

* move window paq push into effect * upped version * removed log * add cleanup as per docs recommendation
huridocs · May 22, 2024 · 003fa7c · 003fa7c
1 parent 380b235
commit 003fa7c
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 56 deletions.
diff --git a/app/react/App/GoogleAnalytics.js b/app/react/App/GoogleAnalytics.js
@@ -8,13 +8,6 @@ function trackPage() {
   if (isClient && window.gtag) {
     window.gtag('send', 'pageview');
   }
-
-  if (isClient && window._paq) {
-    window._paq.push(['setCustomUrl', window.location.href]);
-    window._paq.push(['deleteCustomVariables', 'page']);
-    window._paq.push(['setGenerationTimeMs', 0]);
-    window._paq.push(['trackPageView']);
-  }
 }
 
 class GoogleAnalytics extends Component {

diff --git a/app/react/V2/Components/Analitycs/Matomo.tsx b/app/react/V2/Components/Analitycs/Matomo.tsx
@@ -1,7 +1,15 @@
 /* eslint-disable max-statements */
 import { useEffect, useRef } from 'react';
 import { useAtomValue } from 'jotai';
+import { useLocation } from 'react-router-dom';
 import { globalMatomoAtom, settingsAtom } from 'V2/atoms';
+import { isClient } from 'app/utils';
+
+declare global {
+  interface Window {
+    _paq?: [string[]];
+  }
+}
 
 const buildScript = ({
   globalUrl,
@@ -23,8 +31,6 @@ const buildScript = ({
 
   return `
   var _paq = _paq || [];
-  _paq.push(["trackPageView"]);
-  _paq.push(["enableLinkTracking"]);
   (function () {
     var url = "${mainUrl}";
     _paq.push(["setTrackerUrl", url + "${filename}.php"]);
@@ -43,6 +49,7 @@ const buildScript = ({
 
 const Matomo = () => {
   const scriptIsPresent = useRef(false);
+  const location = useLocation();
   const { matomoConfig } = useAtomValue(settingsAtom);
   const globalMatomo = useAtomValue(globalMatomoAtom);
   const { id: globalId, url: globalUrl } = globalMatomo || {};
@@ -93,6 +100,15 @@ const Matomo = () => {
     }
   }, []);
 
+  useEffect(() => {
+    if (isClient && window._paq) {
+      window._paq.push(['setCustomUrl', window.location.href]);
+      window._paq.push(['deleteCustomVariables', 'page']);
+      window._paq.push(['trackPageView']);
+      window._paq.push(['enableLinkTracking']);
+    }
+  }, [location]);
+
   return null;
 };
 

diff --git a/app/react/V2/Components/Analitycs/specs/Matomo.spec.tsx b/app/react/V2/Components/Analitycs/specs/Matomo.spec.tsx
@@ -4,55 +4,70 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'jotai';
 import { atomsGlobalState } from 'V2/shared/testingHelpers';
 import { globalMatomoAtom, settingsAtom } from 'V2/atoms';
 import { Matomo } from '../Matomo';
 
-declare global {
-  interface Window {
-    _paq?: [string[]];
-  }
-}
-
 describe('Matomo', () => {
+  const originalLocation = window.location;
+
+  beforeAll(() => {
+    const mockLocation = new URL('https://mockedurl.com');
+    Object.defineProperty(window, 'location', {
+      value: mockLocation,
+      writable: true,
+    });
+  });
+
   beforeEach(() => {
     window._paq = undefined;
   });
 
+  afterAll(() => {
+    window.location = originalLocation;
+  });
+
+  const renderComponent = (store: any) => {
+    render(
+      <MemoryRouter>
+        <Provider store={store}>
+          <Matomo />
+        </Provider>
+      </MemoryRouter>
+    );
+  };
+
   it('should set the matomo config from the user config', () => {
     const store = atomsGlobalState();
     store.set(settingsAtom, { matomoConfig: '{"url":"https://url.org","id":"1"}' });
 
-    render(
-      <Provider store={store}>
-        <Matomo />
-      </Provider>
-    );
+    renderComponent(store);
 
     expect(window._paq).toStrictEqual([
-      ['trackPageView'],
-      ['enableLinkTracking'],
       ['setTrackerUrl', 'https://url.org/matomo.php'],
       ['setSiteId', '1'],
+      ['setCustomUrl', 'https://mockedurl.com/'],
+      ['deleteCustomVariables', 'page'],
+      ['trackPageView'],
+      ['enableLinkTracking'],
     ]);
   });
 
   it('should set the global matomo config', () => {
     const store = atomsGlobalState();
     store.set(globalMatomoAtom, { url: 'https://global.org', id: '1' });
 
-    render(
-      <Provider store={store}>
-        <Matomo />
-      </Provider>
-    );
+    renderComponent(store);
 
     expect(window._paq).toStrictEqual([
-      ['trackPageView'],
-      ['enableLinkTracking'],
       ['setTrackerUrl', 'https://global.org/tenant.php'],
       ['setSiteId', '1'],
+      ['setCustomUrl', 'https://mockedurl.com/'],
+      ['deleteCustomVariables', 'page'],
+      ['trackPageView'],
+      ['enableLinkTracking'],
     ]);
   });
 
@@ -63,18 +78,16 @@ describe('Matomo', () => {
     });
     store.set(globalMatomoAtom, { url: 'https://global.org', id: '2' });
 
-    render(
-      <Provider store={store}>
-        <Matomo />
-      </Provider>
-    );
+    renderComponent(store);
 
     expect(window._paq).toStrictEqual([
-      ['trackPageView'],
-      ['enableLinkTracking'],
       ['setTrackerUrl', 'https://global.org/tenant.php'],
       ['setSiteId', '2'],
       ['addTracker', 'https://url.org/matomo.php', '1'],
+      ['setCustomUrl', 'https://mockedurl.com/'],
+      ['deleteCustomVariables', 'page'],
+      ['trackPageView'],
+      ['enableLinkTracking'],
     ]);
   });
 
@@ -90,11 +103,7 @@ describe('Matomo', () => {
     store.set(settingsAtom, { matomoConfig: userJSON });
     store.set(globalMatomoAtom, { url: globalUrl, id: globalId });
 
-    render(
-      <Provider store={store}>
-        <Matomo />
-      </Provider>
-    );
+    renderComponent(store);
 
     expect(window._paq).toStrictEqual(undefined);
   });
@@ -105,19 +114,17 @@ describe('Matomo', () => {
     store.set(settingsAtom, { matomoConfig: '{"url":"https://url.org/","id":"10"}' });
     store.set(globalMatomoAtom, { url: 'https://global.org', id: '5' });
 
-    render(
-      <Provider store={store}>
-        <Matomo />
-      </Provider>
-    );
+    renderComponent(store);
 
     expect(window._paq).toStrictEqual([
       ['googleTracker', 'idForTracker'],
-      ['trackPageView'],
-      ['enableLinkTracking'],
       ['setTrackerUrl', 'https://global.org/tenant.php'],
       ['setSiteId', '5'],
       ['addTracker', 'https://url.org/matomo.php', '10'],
+      ['setCustomUrl', 'https://mockedurl.com/'],
+      ['deleteCustomVariables', 'page'],
+      ['trackPageView'],
+      ['enableLinkTracking'],
     ]);
   });
 
@@ -126,17 +133,15 @@ describe('Matomo', () => {
     store.set(settingsAtom, { matomoConfig: '{ malformed: "3",  }' });
     store.set(globalMatomoAtom, { url: 'https://global.org', id: '3' });
 
-    render(
-      <Provider store={store}>
-        <Matomo />
-      </Provider>
-    );
+    renderComponent(store);
 
     expect(window._paq).toStrictEqual([
-      ['trackPageView'],
-      ['enableLinkTracking'],
       ['setTrackerUrl', 'https://global.org/tenant.php'],
       ['setSiteId', '3'],
+      ['setCustomUrl', 'https://mockedurl.com/'],
+      ['deleteCustomVariables', 'page'],
+      ['trackPageView'],
+      ['enableLinkTracking'],
     ]);
   });
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uwazi",
-  "version": "1.168.0-rc3",
+  "version": "1.168.0-rc4",
   "description": "Uwazi is a free, open-source solution for organising, analysing and publishing your documents.",
   "keywords": [
     "react"