diff --git a/website/components/Widget.tsx b/website/components/Widget.tsx
index 8eecfd6c9..39adf1cab 100644
--- a/website/components/Widget.tsx
+++ b/website/components/Widget.tsx
@@ -6,6 +6,7 @@ import Presets from "#components/Presets.js";
import Stackblitz from "#components/Stackblitz";
import { StoreContext } from "#components/Store.js";
import { createMemo, createSignal, Show, useContext, type JSX } from "solid-js";
+import { track } from "../lib/track";
export function CliGroup(
props: {
@@ -42,7 +43,11 @@ export function Widget(props: { theme?: string; widget: boolean }) {
setTooltipText("Copy to Clipboard");
};
- const handleCopy = () => {
+ const handleCopy = (packageManager: string) => {
+ track("copy", {
+ flags: selectedFeaturesFlags(),
+ package_manager: packageManager,
+ });
setTooltipText("Copied to Clipboard!");
};
@@ -61,25 +66,45 @@ export function Widget(props: { theme?: string; widget: boolean }) {
-
+ handleCopy("pnpm")}
+ tooltipText={tooltipText()}
+ flags={getFlags()}
+ >
{pnpm().join(" ")}
-
+ handleCopy("yarn")}
+ tooltipText={tooltipText()}
+ flags={getFlags()}
+ >
{yarn().join(" ")}
-
+ handleCopy("bun")}
+ tooltipText={tooltipText()}
+ flags={getFlags()}
+ >
{bun().join(" ")}
-
+ handleCopy("npm")}
+ tooltipText={tooltipText()}
+ flags={getFlags()}
+ >
{npm().join(" ")}
diff --git a/website/lib/track.ts b/website/lib/track.ts
new file mode 100644
index 000000000..db6afd245
--- /dev/null
+++ b/website/lib/track.ts
@@ -0,0 +1,26 @@
+type Events = CopyEvent;
+
+interface CopyEvent {
+ name: "copy";
+ data: {
+ flags: string[];
+ package_manager: string;
+ };
+}
+
+interface Zaraz {
+ track: (event: T["name"], data: T["data"]) => Promise;
+}
+
+declare global {
+ // eslint-disable-next-line no-var
+ var zaraz: Zaraz | undefined;
+}
+
+export function track(event: T["name"], data: T["data"]) {
+ console.log({
+ event,
+ data,
+ });
+ globalThis.zaraz?.track(event, data);
+}