WIP

.env

@@ -167,13 +167,16 @@ [email protected]
 MAILHOG_PORT=8125
 
 # Matomo
-MATOMO_HOST=localhost:8170
+MATOMO_HOST=${MATOMO_HOST:-"localhost:8170"}
 MATOMO_PORT=8170
 MATOMO_MYSQL_ROOT_PASSWORD=__CHANGE_ME_JDQm8ooetgjd6q8
 MATOMO_DATABASE_DBNAME=matomo
 MATOMO_DATABASE_USERNAME=matomo
 MATOMO_DATABASE_PASSWORD=__CHANGE_ME_DyFTHnJO0smgU
 
+EXPOSE_MATOMO_HOST=${MATOMO_HOST}
+EXPOSE_MATOMO_SITE_ID=1
+
 # Elasticsearch
 ELASTICSEARCH_URL=http://elasticsearch:9200
 ELASTICSEARCH_PORT=9200

docker-compose.yml

@@ -252,6 +252,8 @@ services:
       - MATOMO_HOST
       - DISABLE_INDEX_PAGE=${EXPOSE_DISABLE_INDEX_PAGE}
       - AUTO_CONNECT_IDP
+      - MATOMO_HOST=${EXPOSE_MATOMO_HOST}
+      - MATOMO_SITE_ID=${EXPOSE_MATOMO_SITE_ID}
     labels:
       - "traefik.enable=true"
       - "traefik.http.routers.expose-client-dev.rule=Host(`expose.${PHRASEA_DOMAIN}`)"

expose/client/config-compiler.js

@@ -10,48 +10,6 @@
     }) : [];
 
     let scriptTpl = '';
-    const analytics = config.expose.analytics;
-
-    if (analytics) {
-        switch (analytics.provider) {
-            case 'matomo':
-                scriptTpl = `
-<!-- Matomo -->
-<script type="text/javascript">
-  var _paq = window._paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="//{host}/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '{siteId}']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
-</script>
-`
-                    .replace('{host}', analytics.options.host)
-                    .replace('{siteId}', analytics.options.siteId)
-                ;
-                break;
-            case 'google_analytics':
-                    scriptTpl = `<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={propertyId}"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', '{propertyId}');
-</script>
-`
-                        .replace(/{propertyId}/g, analytics.options.propertyId)
-                break;
-            default:
-                console.error(`Unsupported analytics provider ${analytics.provider}`);
-        }
-    }
 
     return {
         customHTML: {
@@ -65,6 +23,8 @@
         authBaseUrl: env.AUTH_API_BASE_URL,
         clientId: env.CLIENT_ID + '_' + env.CLIENT_RANDOM_ID,
         clientSecret: env.CLIENT_SECRET,
+        matomoHost: env.MATOMO_HOST,
+        matomoSiteId: env.MATOMO_SITE_ID,
         requestSignatureTtl: env.S3_REQUEST_SIGNATURE_TTL,
         disableIndexPage: ['true', '1', 'on'].includes(env.DISABLE_INDEX_PAGE),
     };

expose/client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@jonkoops/matomo-tracker-react": "^0.7.0",
     "@mikecousins/react-pdf": "^5.5.1",
     "@types/jest": "^26.0.0",
     "@types/node": "^14.0.13",

expose/client/src/component/ConfigWrapper.js

@@ -7,13 +7,6 @@ import FullPageLoader from "./FullPageLoader";
 export default function ConfigWrapper() {
     const [loaded, setLoaded] = useState(false);
 
-    React.useEffect(() => {
-        const _mtm = window._mtm = window._mtm || [];
-        _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
-        const d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src='{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}'; s.parentNode.insertBefore(g,s);
-    }, [])
-
     if (!loaded) {
         apiClient
             .get(`${config.getApiBaseUrl()}/config`)

expose/client/src/index.tsx

@@ -4,8 +4,12 @@ import './scss/index.scss';
 import ConfigWrapper from './component/ConfigWrapper';
 import * as serviceWorker from './serviceWorker';
 import './i18n/i18n';
+import {matomo} from "./lib/matomo";
+import {MatomoProvider} from "@jonkoops/matomo-tracker-react";
 
-ReactDOM.render(<ConfigWrapper />, document.getElementById('root'));
+ReactDOM.render( <MatomoProvider value={matomo}>
+    <ConfigWrapper />
+</MatomoProvider>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

expose/client/src/lib/matomo.ts

@@ -0,0 +1,11 @@
+import {createInstance} from "@jonkoops/matomo-tracker-react";
+import config from "./config";
+
+export const matomo = createInstance({
+    urlBase: `https://${config.get('matomoHost')}`,
+    siteId: config.get('matomoSiteId'),
+    configurations: { // optional, default value: {}
+        setSecureCookie: true,
+        setRequestMethod: 'POST'
+    }
+});

expose/client/yarn.lock

@@ -1428,6 +1428,18 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jonkoops/matomo-tracker-react@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@jonkoops/matomo-tracker-react/-/matomo-tracker-react-0.7.0.tgz#08a337005bd095148f7cad5ec1dff69b8fd64d7b"
+  integrity sha512-3iwG/QM1T6KokU/NZNCkhOccIkhaNnO1+0bTv2JsLbsS7u7hWxpio20gfBjCRd/9N1AMiGidvytG2FK9tu7WFw==
+  dependencies:
+    "@jonkoops/matomo-tracker" "^0.7.0"
+
+"@jonkoops/matomo-tracker@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@jonkoops/matomo-tracker/-/matomo-tracker-0.7.0.tgz#38bd15352cd6a2115eb863a9ba582a1c0f52fc32"
+  integrity sha512-ppCXiDaVytTQOP6hNZIBwjUph5IrGgDoQw4IF5sBoA3PBpMAc5tWtPExbVWTR5pJWpTcp11dv2M83n9pm7LpeQ==
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"