feat: track queries

src/components/SearchResults/SearchResults.js

 import css from '@styled-system/css'
-import React from 'react'
+import React, { useEffect } from 'react'
 import 'styled-components/macro'
 import { DEFAULT_SORT_FIELD, SORT_FIELDS } from '../../constants'
 import Centered from '../../elements/Centered/Centered'
@@ -116,6 +116,49 @@ const SearchResults = ({
 }) => {
   const { categories, page, query, sort, facets } = searchParams
 
+  // track searches with matomo
+  const categoriesHash = JSON.stringify(categories)
+  const facetsHash = JSON.stringify(facets)
+  useEffect(() => {
+    if (
+      window._paq &&
+      request.status === REQUEST_STATUS.SUCCEEDED &&
+      request.info
+    ) {
+      const { hits } = request.info
+      // don't log empty searches // TODO: or should we?
+      if (query || categories.length || Object.keys(facets).length) {
+        // TODO: is there *any* support for multiple search categories in matomo?
+        const selectedCategories = `categories: ${categories.join(', ') ||
+          '<empty>'}`
+        const selectedTypes = `types: ${facets['object-type']?.join(', ') ||
+          '<empty>'}`
+        const selectedActivities = `activities: ${facets['activity']?.join(
+          ', '
+        ) || '<empty>'}`
+        const selectedSources = `sources: ${facets['source']?.join(', ') ||
+          '<empty>'}`
+        const selectedKeywords = `keywords: ${facets['keyword']?.join(', ') ||
+          '<empty>'}`
+        const filters = [
+          selectedCategories,
+          selectedActivities,
+          selectedTypes,
+          selectedSources,
+          selectedKeywords,
+        ].join(' / ')
+        window._paq.push([
+          'trackSiteSearch',
+          // matomo won't register an empty searchterm as a site search, so we set to "empty"
+          query || '<empty>',
+          filters || false,
+          hits,
+        ])
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [request.status, request.info, query, categoriesHash, facetsHash])
+
   const handlePageChange = page => {
     onSearchParamsChange({
       categories,

src/utils/matomo.js

@@ -3,15 +3,12 @@ import { useHistory } from 'react-router-dom'
 
 export default function useMatomo() {
   const history = useHistory()
-  const previousLocation = useRef(null)
+  const previousPathname = useRef(null)
 
   useEffect(() => {
     const trackPageView = (location = window.location) => {
       if (!window._paq) return
 
-      if (previousLocation.current !== null) {
-        window._paq.push(['setReferrerUrl', previousLocation.current])
-      }
       /**
        * note that matomo will use a stale `window.location` reference if not
        * using `setCustomUrl`
@@ -21,13 +18,18 @@ export default function useMatomo() {
       const pathname = location.pathname.endsWith('/')
         ? location.pathname
         : location.pathname + '/'
+      // don't log when only query params change
+      if (previousPathname.current === pathname) return
+      if (previousPathname.current !== null) {
+        window._paq.push(['setReferrerUrl', previousPathname.current])
+      }
       window._paq.push(['setCustomUrl', pathname])
       window._paq.push(['setDocumentTitle', `Page ${pathname}`])
       window._paq.push(['deleteCustomVariables', 'page'])
       window._paq.push(['setGenerationTimeMs', 0])
       window._paq.push(['trackPageView'])
-      previousLocation.current = pathname
-      // window._paq.push(['enableLinkTracking']);
+      previousPathname.current = pathname
+      window._paq.push(['enableLinkTracking'])
     }
 
     trackPageView()