Add search-analytics.js

Author: obx-vivien

docusaurus.config.ts

@@ -8,81 +8,68 @@ const config: Config = {
   favicon: 'img/favicon.ico',
 
   url: 'https://cpp.objectbox.io',
-    /*baseUrl: '/',*/
   baseUrl: '/',
 
-  organizationName: 'objectbox', 
+  organizationName: 'objectbox',
   projectName: 'objectbox-c-cpp-docs',
 
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
 
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
-  },
+  i18n: { defaultLocale: 'en', locales: ['en'] },
 
   themes: [
     [
-     '@easyops-cn/docusaurus-search-local',
-    {
-      hashed: true,
-      language: ['en'],
-      highlightSearchTermsOnTargetPage: true,
-      explicitSearchResultPath: false,  // Changed from true - this can cause 404s
-      indexDocs: true,
-      indexBlog: false,
-      indexPages: true,
-      docsRouteBasePath: '/',
-      searchResultLimits: 8,
-      searchResultContextMaxLength: 50,
-      ignoreFiles: [],
-    },
+      '@easyops-cn/docusaurus-search-local',
+      {
+        hashed: true,
+        language: ['en'],
+        highlightSearchTermsOnTargetPage: true,
+        explicitSearchResultPath: false,
+        indexDocs: true,
+        indexBlog: false,
+        indexPages: true,
+        docsRouteBasePath: '/',
+        searchResultLimits: 8,
+        searchResultContextMaxLength: 50,
+        ignoreFiles: [],
+      },
     ],
   ],
 
-
- presets: [
-  [
-    'classic',
-    {
-      docs: {
-        routeBasePath: '/',                      // serve docs at /
-        sidebarPath: require.resolve('./sidebars.ts'),
-        editUrl:
-          'https://github.com/objectbox/objectbox-c-cpp-docs/blob/main/',
-      },
-      // If you don't need a blog, you can disable it:
-      blog: false,
-      theme: {
-        customCss: [
-          require.resolve('./src/css/custom.css'),
-        ],
-      },
-      sitemap: {           
-        lastmod: 'date',
-        changefreq: 'weekly',
-        priority: 0.5,
-        filename: 'sitemap.xml',
-      },
-      gtag: {                    
-        trackingID: 'G-2LXKBNQ3TW',
-        anonymizeIP: true,
-      },
-    } satisfies Preset.Options,
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          routeBasePath: '/',
+          sidebarPath: require.resolve('./sidebars.ts'),
+          editUrl: 'https://github.com/objectbox/objectbox-c-cpp-docs/blob/main/',
+        },
+        blog: false,
+        theme: { customCss: [require.resolve('./src/css/custom.css')] },
+        sitemap: {
+          lastmod: 'date',
+          changefreq: 'weekly',
+          priority: 0.5,
+          filename: 'sitemap.xml',
+        },
+        gtag: {
+          trackingID: 'G-2LXKBNQ3TW',
+          anonymizeIP: true,
+        },
+      } satisfies Preset.Options,
+    ],
   ],
-],
-
-
 
   themeConfig: {
     image: 'img/objectbox-social-card.jpg',
     navbar: {
       title: 'C / C++ Docs',
       logo: {
         alt: 'ObjectBox Logo',
-        src: 'img/objectbox-logo.jpg', // Logo for light mode
-        srcDark: 'img/objectbox-logo-dm.png', // Logo for dark mode
+        src: 'img/objectbox-logo.jpg',
+        srcDark: 'img/objectbox-logo-dm.png',
       },
       items: [
         // Right side items in the order you want them to appear:
@@ -94,7 +81,7 @@ const config: Config = {
         },
         {
           href: 'https://sync.objectbox.io',
-          label: 'Data Sync Docs', 
+          label: 'Data Sync Docs',
           position: 'right',
           //  target: '_self', // ← This prevents external link behavior
         },
@@ -123,15 +110,14 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
-      additionalLanguages: [
-        'cmake', 'bash', 'c', 'cpp',
-        'swift', 'kotlin', 'java', 'python', 
-        'dart', 'go', 'protobuf'
-      ],
+      additionalLanguages: ['cmake','bash','c','cpp','swift','kotlin','java','python','dart','go','protobuf'],
     },
-    
-
   } satisfies Preset.ThemeConfig,
+
+  // Put scripts here, inside the same config object
+  scripts: [{ src: '/js/search-analytics.js', async: true }],
+  // Optional: keep this if you want it rendered in the footer
+  // customFields: {},
 };
 
 export default config;

website/static/js/search-analytics.js

@@ -0,0 +1,85 @@
+(function () {
+  // Utility: send GA4 events if gtag exists
+  function sendEvent(name, params) {
+    if (typeof window.gtag === 'function') {
+      window.gtag('event', name, params || {});
+    }
+  }
+
+  // Detect the search input rendered by docusaurus-search-local
+  function getSearchInput() {
+    // Works with the default local-search theme (input[type="search"])
+    return document.querySelector('input[type="search"]');
+  }
+
+  // Hook into search typing + submit/enter
+  function attachSearchListeners() {
+    const input = getSearchInput();
+    if (!input) return;
+
+    let lastValue = '';
+    let lastResultsCount = null;
+
+    // Fire when user presses Enter (treated as "view_search_results")
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        const query = input.value.trim();
+        if (!query) return;
+        // send GA4 "view_search_results"
+        sendEvent('view_search_results', {
+          search_term: query,
+        });
+        // Also record if there were zero results (if we can read result container)
+        // Result container is rendered after typing; we can query it shortly after.
+        setTimeout(() => {
+          const results = document.querySelectorAll('.searchResultItem');
+          lastResultsCount = results ? results.length : null;
+          if (lastResultsCount === 0) {
+            sendEvent('search_no_results', { search_term: query });
+          }
+        }, 50);
+      }
+    });
+
+    // Debounced input capture to log "search" intent (optional)
+    let t;
+    input.addEventListener('input', () => {
+      clearTimeout(t);
+      t = setTimeout(() => {
+        const val = input.value.trim();
+        if (val && val !== lastValue) {
+          lastValue = val;
+          sendEvent('search', { search_term: val });
+        }
+      }, 400);
+    });
+
+    // Click tracking on results (delegated)
+    document.addEventListener('click', (e) => {
+      const a = e.target.closest('a');
+      if (!a) return;
+
+      // Local search results typically have a container; adjust selector if needed
+      const resultItem = e.target.closest('.searchResultItem, .DocSearch-Hit'); // support both local & DocSearch
+      if (resultItem) {
+        const href = a.getAttribute('href') || '';
+        const title =
+          resultItem.querySelector('mark')?.textContent ||
+          resultItem.textContent?.trim().slice(0, 120) ||
+          '';
+        sendEvent('select_content', {
+          content_type: 'search_result',
+          item_id: href,
+          item_name: title,
+        });
+      }
+    });
+  }
+
+  // Wait for hydration
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', attachSearchListeners);
+  } else {
+    attachSearchListeners();
+  }
+})();