Chore: Test Safary Events

docs/quickstart-install.md

@@ -1,4 +1,5 @@
 import SdkInstallation from './\_sdk-installation.mdx';
+import InstallToCreateTracking from '@site/src/components/QuickStartTracking/InstallToCreateTracking.js'
 
 # Install Nillion
 
@@ -11,3 +12,5 @@ Install the Nillion SDK, including the <strong>`nada`</strong> tool you'll use t
 ## Next steps
 
 ✅ You're off to a great start! Now that you have installed the Nillion SDK and Tools, you have everything you need to create a Nada project.
+
+<InstallToCreateTracking />

src/components/QuickStartTracking/InstallToCreateTracking.js

@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+
+const InstallToCreateTracking = () => {
+  useEffect(() => {
+    const prevButton = document.querySelector('[aria-label="Previous"]');
+    const nextButton = document.querySelector('[aria-label="Next"]');
+
+    const handlePrevClick = () => {
+      safary.track({
+        eventType: "custom",
+        eventName: "quickstart_install_nillion",
+        parameters: {
+          fromPage: "Install Nillion",
+          toPage: "Blind App Quickstart",
+        },
+      });
+    };
+
+    const handleNextClick = () => {
+      safary.track({
+        eventType: "custom",
+        eventName: "quickstart_install_nillion",
+        parameters: {
+          fromPage: "Install Nillion",
+          toPage: "Create a Nada project",
+        },
+      });
+    };
+
+    if (prevButton) prevButton.addEventListener("click", handlePrevClick);
+    if (nextButton) nextButton.addEventListener("click", handleNextClick);
+
+    return () => {
+      if (prevButton) prevButton.removeEventListener("click", handlePrevClick);
+      if (nextButton) nextButton.removeEventListener("click", handleNextClick);
+    };
+  }, []);
+
+  return null;
+};
+
+export default InstallToCreateTracking;