Merge pull request #1181 from dxw/capture-search-terms

Capture search terms in playbook analytics
dxw · Aug 22, 2023 · ac29860 · ac29860
2 parents 4dab5b7 + 613c120
commit ac29860
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en-GB">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8"/>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+/>
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon/favicon-16x16.png">
@@ -21,8 +21,8 @@
       <script src="/assets/js/redirect.js"></script>
     {% endif %}
 
-    <link rel="stylesheet" href="/assets/main.css" />
-    <script defer data-domain="playbook.dxw.com" src="https://plausible.io/js/plausible.js"></script>
+    <link rel="stylesheet" href="/assets/main.css"/>
+    <script defer data-domain="playbook.dxw.com" src="https://plausible.io/js/script.manual.js"></script>
   </head>
   <body>
     {% include navbar.html %}
@@ -31,5 +31,6 @@
       {% include page-content.html %}
     </main>
     {% include contribute.html %}
+    <script src="/assets/js/plausible.js"></script>
   </body>
 </html>
diff --git a/src/_webpack/plausible.js b/src/_webpack/plausible.js
@@ -0,0 +1,28 @@
+const captureAllPageViews = (paramsToRegister) => {
+  definePlausibleFunction()
+  window.plausible('pageview', { u: prepareUrl(paramsToRegister) })
+}
+
+const definePlausibleFunction = () => {
+  window.plausible = window.plausible || function () {
+    (window.plausible.q = window.plausible.q || []).push(arguments)
+  }
+}
+
+const prepareUrl = (paramsToRegister) => {
+  const url = new URL(window.location.href)
+  const queryParams = new URLSearchParams(window.location.search)
+  let customUrl = url.protocol + '//' + url.hostname + url
+    .pathname
+    .replace(/\/$/, '')
+  for (const paramName of paramsToRegister) {
+    const paramValue = queryParams.get(paramName)?.split(' ').join('+')
+
+    if (paramValue) {
+      customUrl = customUrl + '/' + paramValue
+    }
+  }
+  return customUrl
+}
+
+captureAllPageViews(['query'])
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,8 @@ const path = require('path')
 module.exports = {
   entry: {
     search: path.join(__dirname, 'src/_webpack/search'),
-    redirect: path.join(__dirname, 'src/_webpack/redirect')
+    redirect: path.join(__dirname, 'src/_webpack/redirect'),
+    plausible: path.join(__dirname, 'src/_webpack/plausible')
   },
   output: {
     filename: '[name].js',