Add custom matomo implementation enabling cookie settings (#47)

Author: maxwolfs

docusaurus.config.js

@@ -54,7 +54,7 @@ const config = {
         // ... other options
       }
     ],
-    'docusaurus-plugin-matomo'
+    './src/plugins/docusaurus-plugin-matomo-analytics/index.js'
   ],
 
   themeConfig:
@@ -133,11 +133,13 @@ const config = {
             darkTheme: darkCodeTheme,
             additionalLanguages: ['powershell', 'ruby']
           },
-          matomo: {
-            matomoUrl: 'https://matomo.scs.community/',
+          matomoAnalytics: {
+            matomoUrl:
+              'matomo.scs.community',
             siteId: '2',
             phpLoader: 'matomo.php',
-            jsLoader: 'matomo.js'
+            jsLoader: 'matomo.js',
+            disableCookies: true
           }
         }),
 

package-lock.json

@@ -26,7 +26,6 @@
     "@fullcalendar/timegrid": "^6.0.1",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
-    "docusaurus-plugin-matomo": "^0.0.6",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package.json

@@ -0,0 +1,78 @@
+const path = require('path')
+
+// based on https://github.com/karser/docusaurus-plugin-matomo with extended parameters
+
+function matomoAnalytics (context, options) {
+  const { siteConfig } = context
+  const { themeConfig } = siteConfig
+  const { matomoAnalytics } = themeConfig || {}
+
+  if (!matomoAnalytics) {
+    throw new Error(
+      'Please specify \'matomo\' object in \'themeConfig\' with \'matomoUrl\' and \'siteId\' fields in it to use docusaurus-plugin-matomo'
+    )
+  }
+
+  const { matomoUrl, siteId } = matomoAnalytics
+
+  if (!matomoUrl) {
+    throw new Error(
+      'Please specify the `matomoUrl` field in the `themeConfig.matomo`'
+    )
+  }
+  if (!siteId) {
+    throw new Error(
+      'Please specify the `siteId` field in the `themeConfig.matomo`'
+    )
+  }
+
+  const isProd = process.env.NODE_ENV === 'production'
+  return {
+    name: 'docusaurus-plugin-matomo-analytics',
+
+    getClientModules () {
+      return isProd ? [path.resolve(__dirname, './track')] : []
+    },
+
+    injectHtmlTags () {
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'preconnect',
+              href: `${matomoAnalytics.matomoUrl}`
+            }
+          },
+          {
+            tagName: 'script',
+            innerHTML: `
+                var _paq = window._paq = window._paq || [];
+                _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+                ${matomoAnalytics.cookieDomain ? `_paq.push(["setCookieDomain", "${matomoAnalytics.cookieDomain}"]);` : ''}
+                ${matomoAnalytics.domains ? `_paq.push(["setDomains", ["${matomoAnalytics.domains}"]])` : ''}
+                ${matomoAnalytics.campaignNameKey ? `_paq.push(["setCampaignNameKey", "${matomoAnalytics.campaignNameKey}"]);` : ''}
+                ${matomoAnalytics.campaignKeywordKey ? `_paq.push(["setCampaignKeywordKey", "${matomoAnalytics.campaignKeywordKey}"]);` : ''}
+                ${matomoAnalytics.doNotTrack ? `_paq.push(["setDoNotTrack", ${matomoAnalytics.doNotTrack}]);` : ''}
+                ${matomoAnalytics.disableCookies ? '_paq.push(["disableCookies"]);' : ''}
+                _paq.push(['trackPageView']);
+                _paq.push(['enableLinkTracking']);
+                    (function() {
+                        var u="${matomoAnalytics.matomoUrl}";
+                        _paq.push(['setTrackerUrl', u+'${matomoAnalytics.phpLoader}']);
+                        _paq.push(['setSiteId', '${matomoAnalytics.siteId}']);
+                        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                        g.async=true; g.src=u+'${
+                            matomoAnalytics.jsLoader
+                        }'; s.parentNode.insertBefore(g,s);
+                    })();
+
+            `
+          }
+        ]
+      }
+    }
+  }
+}
+
+module.exports = matomoAnalytics

src/plugins/docusaurus-plugin-matomo-analytics/index.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
+
+export default (function () {
+  if (!ExecutionEnvironment.canUseDOM) {
+    return null
+  }
+  return {
+    onRouteUpdate ({ location }) {
+      _paq.push(['setCustomUrl', location.pathname])
+      _paq.push(['setDocumentTitle', document.title])
+      _paq.push(['trackPageView'])
+    }
+  }
+})()