Added support for site search tracking with GA4 (#3184)

* Send search analytics events for GA4

* move docs into content tabs

docs/setup/setting-up-site-analytics.md

@@ -51,18 +51,23 @@ following lines to `mkdocs.yml`:
     understand how people use your documentation and what they expect to find.
     In order to enable site search tracking, the following steps are required:
 
+    === ":material-google-analytics: Google Analytics 4"
+
+        1. Go to your Google Analytics __admin settings__
+        2. Select the property for the respective tracking code
+        3. Select the __Data Streams__ tab and click the corresponding URL
+        4. Click the gear icon within the __Enhanced measurement__ section
+        5. Ensure that __Site search__ is enabled
+
+    === ":material-google-analytics: Universal Analytics"
+
         1.  Go to your Google Analytics __admin settings__
         2.  Select the property for the respective tracking code
         3.  Go to the __view settings__ tab
         4.  Scroll down and enable __site search settings__
         5.  Set the __query parameter__ to `q`
 
-    Note that currently, site search tracking is not supported with Google
-    Analytics 4 due to the more complicated manual setup. If you want to set up
-    site search tracking yourself, [this tutorial][tutorial] is a good start.
-
   [site search]: setting-up-site-search.md
-  [tutorial]: https://www.analyticsmania.com/post/track-site-search-with-google-tag-manager-and-google-analytics/
 
 ### Was this page helpful?
 

material/partials/integrations/analytics/google.html

@@ -8,7 +8,7 @@
   {% set property = config.extra.analytics.property | d("", true) %}
 {% endif %}
 {% if property.startswith("G-") %}
-  <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","{{ property }}"),document.addEventListener("DOMContentLoaded",function(){"undefined"!=typeof location$&&location$.subscribe(function(t){gtag("config","{{ property }}",{page_path:t.pathname})})})</script>
+  <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","{{ property }}"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&gtag("event","search",{search_term:this.value})}),"undefined"!=typeof location$&&location$.subscribe(function(e){gtag("config","{{ property }}",{page_path:e.pathname})})})</script>
   <script async src="https://www.googletagmanager.com/gtag/js?id={{ property }}"></script>
 {% elif property.startswith("UA-") %}
   <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","{{ property }}","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),"undefined"!=typeof location$&&location$.subscribe(function(e){ga("send","pageview",e.pathname)})})</script>

src/partials/integrations/analytics/google.html

@@ -42,6 +42,14 @@
 
     /* Register virtual event handlers */
     document.addEventListener("DOMContentLoaded", function() {
+      if (document.forms.search) {
+        var query = document.forms.search.query
+        query.addEventListener("blur", function() {
+          if (this.value) {
+            gtag("event", "search", {search_term: this.value})
+          }
+        })
+      }
 
       /* Send page view on location change */
       if (typeof location$ !== "undefined")