Track Lunr search queries and search-result clicks (#1519)

undefined
vitessio · Jul 6, 2023 · 7069350 · 7069350
1 parent 3b96d8d
commit 7069350
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
@@ -26,6 +26,8 @@
       "use strict";
       let index;
       let debounceTimer = null;
+      const _debug = false;
+      const debugLog = _debug ? console.log : () => { };
       const currentUrl = window.location.pathname;
       const currentLocation = String(currentUrl).split("/");
       const currentVersion = currentLocation[2];
@@ -139,6 +141,7 @@
           }
         });
         search(query);
+        trackSearchEvent(query);
       }
 
       function search(keywords) {
@@ -169,23 +172,51 @@
           // show the matched result
           results.forEach(function (result) {
             const doc = parse[result.ref];
-            const element = template.content.cloneNode(true);
-            element.querySelector(".title").textContent = doc.title;
-            element.querySelector(".subtitle").textContent = doc.summary;
-            element.querySelector(".subtitle").setAttribute("href", doc.href);
-            element
-              .querySelector(".is-read-more")
-              .setAttribute("href", doc.href);
-            element.querySelector(".search-path").textContent = doc.path;
-            element
-              .querySelector(".search-path")
-              .setAttribute("href", doc.href);
-
-            target.appendChild(element);
+            const searchResultItem = template.content.cloneNode(true)
+              .querySelector('.search-result-item');
+
+            const searchPath = searchResultItem.querySelector('a.search-path');
+            searchPath.setAttribute('href', doc.href);
+            searchPath.textContent = doc.path;
+
+            const title = searchResultItem.querySelector('a.title');
+            title.setAttribute('href', doc.href);
+            title.textContent = doc.title;
+
+            const subtitle = searchResultItem.querySelector('a.subtitle');
+            subtitle.setAttribute('href', doc.href);
+            subtitle.textContent = doc.summary;
+
+            searchResultItem.addEventListener('click',
+              () => trackSearchResultClick(doc.href, query));
+            target.appendChild(searchResultItem);
           }, this);
         }
       }
 
+      const lunrSearchEventCategory = 'Lunr Search';
+
+      function trackSearchEvent(searchTerm) {
+        debugLog('trackSearchEvent: searchTerm = ' + searchTerm);
+        if (typeof gtag !== 'function') return;
+        gtag('event', 'search', {
+          event_category: lunrSearchEventCategory,
+          event_label: 'Search Input',
+          search_term: searchTerm,
+        });
+      }
+
+      function trackSearchResultClick(searchResultURL, searchTerm) {
+        debugLog(`trackSearchResultClick: searchTerm = ${searchTerm}, link = ${searchResultURL}`);
+        if (typeof gtag !== 'function') return;
+        gtag('event', 'click', {
+          event_category: lunrSearchEventCategory,
+          event_label: 'Search-result Click',
+          search_term: searchTerm,
+          value: searchResultURL,
+        });
+      }
+
       // click outside the search modal to close
       document.addEventListener("click", () => {
         searchPopover.style.display = "none";

diff --git a/layouts/partials/search-results.html b/layouts/partials/search-results.html
@@ -6,7 +6,7 @@ <h6 id="search-results" class="title is-5"></h6>
     <template id="is-search-template">
       <article class="search-result-item">
         <a class="search-path"></a>
-        <h6 class="search-title ">
+        <h6 class="search-title">
           <a class="title is-5 is-read-more"></a>
         </h6>
         <p>