Add plugin for Matomo to track site search keywords

Use the plugins API for autocomplete, hook into the state change,
retrieve the query term from the use, and send the query term together
with the search results from the global context to Matomo.

* autocomplete plugins: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/plugins/
* autocomplete state: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/state/
* autocomplete access data with context: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/context/

https://developer.matomo.org/guides/tracking-javascript-guide#internal-search-tracking

Relates to #16

Author: ngulden

packages/docsearch-react/src/DocSearchModal.tsx

@@ -2,6 +2,8 @@ import type { AutocompleteState } from '@algolia/autocomplete-core';
 import { createAutocomplete } from '@algolia/autocomplete-core';
 import React from 'react';
 
+import { createMatomoPlugin } from './MatomoPlugin';
+
 import { MAX_QUERY_SIZE } from './constants';
 import type { DocSearchProps } from './DocSearch';
 import type { FooterTranslations } from './Footer';
@@ -125,6 +127,8 @@ export function DocSearchModal({
     [favoriteSearches, recentSearches, disableUserPersonalization]
   );
 
+  const matomoPlugin = createMatomoPlugin();
+
   const autocomplete = React.useMemo(
     () =>
       createAutocomplete<
@@ -282,6 +286,7 @@ export function DocSearchModal({
               );
             });
         },
+        plugins: [matomoPlugin],
       }),
     [
       typesenseCollectionName,

packages/docsearch-react/src/MatomoPlugin.tsx

@@ -0,0 +1,24 @@
+import debounce from 'lodash/debounce';
+
+declare global {
+    interface Window {
+        _paq: any;
+    }
+}
+
+function _matomoSiteSearch(query: string, hits: string) {
+        var _paq = window._paq = window._paq || [];
+        if (query.length > 0) {
+            _paq.push(['trackSiteSearch', query, false, hits]);
+        }
+}
+
+var matomoSiteSearch_debounced = debounce(_matomoSiteSearch, 400);
+
+export function createMatomoPlugin() {
+    return {
+        onStateChange({ state }) {
+            matomoSiteSearch_debounced(state.query, state.context.nbHits);
+        }
+    };
+};