From 14842f01be09c1be06da67784c24832973b2e571 Mon Sep 17 00:00:00 2001 From: Pierre Stoll Date: Tue, 22 Sep 2026 13:21:15 +0700 Subject: [PATCH] feat: track skill install copy button with X conversions Fire the existing tw-p9ilu-rfmj4 event when a visitor copies the npx skills add command in the AI Dev Skill callout, in addition to the nav CTA. Worker unchanged, same action name. Co-Authored-By: Claude Fable 5.1 --- workers/x-conversions/README.md | 10 ++++---- workers/x-conversions/test/browser.test.ts | 27 +++++++++++++++++++++- x-pixel.js | 27 +++++++++++++++++----- 3 files changed, 53 insertions(+), 11 deletions(-) diff --git a/workers/x-conversions/README.md b/workers/x-conversions/README.md index 4a575b5..b3191e4 100644 --- a/workers/x-conversions/README.md +++ b/workers/x-conversions/README.md @@ -1,8 +1,10 @@ # X conversions for the docs -Tracks activation of the **Install AI Skill** button in the main navigation, -including its mobile variant. This is a click on the installation guide, not a -confirmed skill installation. Other links to that guide are excluded. +Tracks two clicks as one X event: the **Install AI Skill** button in the main +navigation (including its mobile variant), and the copy button of the +`npx skills add .../magicblock-dev-skill` command in the AI Dev Skill callout +(`snippets/ai-dev-skill-callout.mdx`). Both are intent signals, not a confirmed +skill installation. Other links to the guide and other code blocks are excluded. - Worker: `magicblock-docs-conversions` - Endpoint: `https://tracking.magicblock.app` @@ -12,7 +14,7 @@ confirmed skill installation. Other links to that guide are excluded. ## Flow -The root `x-pixel.js` installs the base pixel and a delegated CTA listener. It +The root `x-pixel.js` installs the base pixel and a delegated click listener. It reads the public event ID from `GET /config`, then reports each click through the pixel and `POST /events` with the same generated `conversion_id`. The browser sends its request with `keepalive`, without delaying navigation. diff --git a/workers/x-conversions/test/browser.test.ts b/workers/x-conversions/test/browser.test.ts index 0bc98c8..c786279 100644 --- a/workers/x-conversions/test/browser.test.ts +++ b/workers/x-conversions/test/browser.test.ts @@ -9,7 +9,15 @@ const markup = `
Install AI Skill
`; +
Install AI Skill +
+ + 
npx skills add https://github.com/magicblock-labs/magicblock-dev-skill
+
+
+ + 
cargo build
+
`; async function browser(options: { blockedConfig?: boolean; blockedStorage?: boolean; url?: string } = {}) { const dom = new JSDOM(markup, { @@ -93,3 +101,20 @@ test("does not send CTA events from local development or preview origins", async assert.equal(requests.length, 0); } finally { close(); } }); + +test("install command copy button sends the event, other code blocks do not", async () => { + const { window, requests, click, close } = await browser(); + try { + await click("#skill-copy path"); + await click("#other-copy path"); + const sent = requests.filter((r) => r.url.endsWith("/events")); + const pixel = window.twq.queue.filter((args) => args[0] === "event"); + assert.equal(sent.length, 1); + assert.equal(pixel.length, 1); + const body = JSON.parse(sent[0].options.body as string); + assert.equal(body.event, "ai_skill_cta_clicked"); + assert.equal(body.conversion_id, pixel[0][2].conversion_id); + assert.equal(body.twclid, "ad-click-123"); + assert.equal(body.event_source_url, "https://docs.magicblock.xyz/guide"); + } finally { close(); } +}); diff --git a/x-pixel.js b/x-pixel.js index 7c8548b..463681b 100644 --- a/x-pixel.js +++ b/x-pixel.js @@ -30,15 +30,30 @@ twq('config','p9ilu'); .then((result) => result.ok ? result.json() : null) .catch(() => null); + // The "Install AI Skill" button in the main navigation (desktop and mobile). + function isNavigationCta(target) { + const link = target.closest("a"); + if (!link || !link.closest('nav[aria-label="Main"]')) return false; + const destination = new URL(link.href, window.location.href); + return docsOrigins.includes(destination.origin) && + destination.pathname.replace(/\/$/, "") === "/pages/overview/additional-information/ai-dev-skill" && + link.textContent.trim() === "Install AI Skill"; + } + + // The copy button of the skill install command shown in the AI Dev Skill callout. + const installCommand = "npx skills add https://github.com/magicblock-labs/magicblock-dev-skill"; + function isInstallCommandCopy(target) { + if (!target.closest('button[data-testid="copy-code-button"]')) return false; + const block = target.closest(".code-block"); + const code = block ? block.querySelector("pre code") : null; + return Boolean(code) && code.textContent.replace(/\s+/g, " ").trim() === installCommand; + } + function trackClick(event) { if (event.type === "auxclick" && event.button !== 1) return; if (event.type === "click" && event.button !== 0) return; - const link = event.target instanceof Element ? event.target.closest("a") : null; - if (!link || !link.closest('nav[aria-label="Main"]')) return; - const destination = new URL(link.href, window.location.href); - if (!docsOrigins.includes(destination.origin) || - destination.pathname.replace(/\/$/, "") !== "/pages/overview/additional-information/ai-dev-skill" || - link.textContent.trim() !== "Install AI Skill") return; + const target = event.target instanceof Element ? event.target : null; + if (!target || !(isNavigationCta(target) || isInstallCommandCopy(target))) return; captureClickId(); const conversionId = crypto.randomUUID();