[Docs Site] Add Zaraz events for SERP clicks

Author: KianNH

src/components/404.astro

@@ -9,6 +9,8 @@
 </div>
 
 <script>
+	import { track } from "~/util/zaraz";
+
 	const { pathname } = window.location;
 
 	const anchor = document.getElementById("404-search-link");
@@ -17,5 +19,8 @@
 		const pretty = pathname.replaceAll("/", " ").replaceAll("-", " ").trim();
 
 		anchor.setAttribute("href", `/search/?q=${encodeURIComponent(pretty)}`);
+		anchor.addEventListener("click", () => {
+			track("serp from 404", { query: pretty });
+		});
 	}
 </script>

src/plugins/docsearch/index.ts

@@ -1,3 +1,4 @@
+import { track } from "~/util/zaraz";
 import type { DocSearchClientOptions } from "@astrojs/starlight-docsearch";
 
 export default {
@@ -26,6 +27,10 @@ export default {
 			__v: null,
 			key: state.query,
 			props: {
+				onclick: () => {
+					track("serp from widget", { query: state.query });
+				},
+				id: "docsearch-search-link",
 				href: `/search/?query=${state.query}`,
 				target: "_blank",
 				children: "View all results",