/** * Static tracking guide exposed as an MCP resource. * Claude reads this on connect and knows how to implement SealMetrics tracking * without calling any tool. * * This is an operational playbook, not just an API reference. * It tells the agent WHAT to do, HOW to decide, and WHERE to put things. */ export declare const TRACKING_GUIDE_URI = "sealmetrics://tracking-guide"; export declare const TRACKING_GUIDE_NAME = "SealMetrics Tracking Guide"; export declare const TRACKING_GUIDE_DESCRIPTION = "Operational playbook for implementing SealMetrics tracking on any website: pixel installation, conversions, microconversions, content grouping, and framework-specific patterns."; export declare const TRACKING_GUIDE_CONTENT = "# SealMetrics Tracking \u2014 Implementation Playbook\n\nYou are implementing SealMetrics analytics on a website. This guide tells you exactly what to do, step by step.\n\n---\n\n## Step 1: Get the pixel\n\nCall the `get_tracking_code` tool with the user's `site_id`. It returns:\n- `script_tag`: the exact `\n\n```\n\n### Next.js (App Router)\n```tsx\n// app/layout.tsx\nimport Script from 'next/script';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n {children}\n \n```\n\n**Purchase (React, after payment API):**\n```tsx\nconst handlePayment = async () => {\n const result = await processPayment(cart);\n if (result.success) {\n window.sealmetrics?.conv('purchase', cart.total, {\n currency: cart.currency,\n payment_method: result.method\n });\n router.push('/thank-you');\n }\n};\n```\n\n**Signup (after API success):**\n```tsx\nconst handleRegister = async (formData: RegisterForm) => {\n const user = await api.register(formData);\n window.sealmetrics?.conv('signup', 0, { plan: formData.plan });\n router.push('/welcome');\n};\n```\n\n---\n\n## Step 5: Implement microconversions\n\n### Syntax\n```js\nsealmetrics.micro(type, properties?)\n```\n\n| Parameter | Type | Required | Description |\n|-----------|------|----------|-------------|\n| `type` | string | Yes | snake_case name for this event |\n| `properties` | object | No | Extra metadata (see \"Using properties\" below) |\n\n### Where to put it\n\nMicroconversions go **on the user action** \u2014 usually in click handlers, submit handlers, or event listeners.\n\n### Examples by pattern\n\n**Add to cart (vanilla):**\n```js\ndocument.querySelectorAll('.add-to-cart').forEach(function(btn) {\n btn.addEventListener('click', function() {\n sealmetrics.micro('add_to_cart', {\n product_id: this.dataset.productId,\n product_name: this.dataset.productName,\n price: parseFloat(this.dataset.price)\n });\n });\n});\n```\n\n**Add to cart (React):**\n```tsx\nfunction AddToCartButton({ product }: { product: Product }) {\n const handleClick = () => {\n addToCart(product);\n window.sealmetrics?.micro('add_to_cart', {\n product_id: product.id,\n product_name: product.name,\n price: product.price\n });\n };\n return ;\n}\n```\n\n**Newsletter signup:**\n```js\ndocument.querySelector('#newsletter-form').addEventListener('submit', function() {\n sealmetrics.micro('newsletter_signup', {\n position: this.closest('footer') ? 'footer' : 'inline'\n });\n});\n```\n\n**Video engagement:**\n```js\nvar video = document.querySelector('video');\nvideo.addEventListener('play', function() {\n sealmetrics.micro('video_play', { video_id: this.dataset.videoId });\n});\nvideo.addEventListener('ended', function() {\n sealmetrics.micro('video_complete', { video_id: this.dataset.videoId });\n});\n```\n\n**Scroll depth tracking:**\n```js\nvar scrollTracked = {};\nwindow.addEventListener('scroll', function() {\n var pct = Math.round(window.scrollY / (document.body.scrollHeight - window.innerHeight) * 100);\n [25, 50, 75, 100].forEach(function(milestone) {\n if (pct >= milestone && !scrollTracked[milestone]) {\n scrollTracked[milestone] = true;\n sealmetrics.micro('scroll_' + milestone);\n }\n });\n});\n```\n\n**Checkout funnel steps (React):**\n```tsx\n// When user moves from step to step\nconst goToStep = (step: number) => {\n setCurrentStep(step);\n const stepNames: Record = {\n 1: 'begin_checkout',\n 2: 'checkout_shipping',\n 3: 'checkout_payment',\n };\n if (stepNames[step]) {\n window.sealmetrics?.micro(stepNames[step], { items_count: cart.items.length });\n }\n};\n```\n\n---\n\n## Step 6: Set up content grouping\n\nContent grouping lets the site owner analyze metrics by section: \"how does the blog perform vs product pages?\"\n\n### When to use it\n\nUse content grouping when the site has **distinct sections** that serve different purposes. If the site is a single-purpose landing page, skip it.\n\n### How to decide groups\n\nLook at the URL structure and page purpose:\n\n| URL pattern | Group |\n|-------------|-------|\n| `/blog/*`, `/posts/*`, `/articles/*` | `blog` |\n| `/products/*`, `/shop/*`, `/item/*` | `product` |\n| `/category/*`, `/collections/*` | `category` |\n| `/cart`, `/checkout/*`, `/order/*` | `checkout` |\n| `/docs/*`, `/help/*`, `/faq` | `docs` |\n| `/dashboard/*`, `/app/*`, `/account/*` | `app` |\n| `/pricing`, `/plans` | `pricing` |\n| `/`, `/about`, `/features`, `/contact` | `landing` |\n\n### How to implement it\n\n**Option A \u2014 Static (via URL param in the script tag):**\n\nBest when you can set a different script tag per section (e.g., different templates, layouts).\n\n```html\n\n\n\n\n\n```\n\n**Option B \u2014 Dynamic (via JS, based on URL):**\n\nBest for SPAs or when you can't change the script tag per section.\n\n```js\n// Determine group from the current path\nfunction getContentGroup() {\n var path = location.pathname;\n if (path.startsWith('/blog') || path.startsWith('/posts')) return 'blog';\n if (path.startsWith('/products') || path.startsWith('/shop')) return 'product';\n if (path.startsWith('/cart') || path.startsWith('/checkout')) return 'checkout';\n if (path.startsWith('/docs') || path.startsWith('/help')) return 'docs';\n return 'landing';\n}\n\nsealmetrics({ group: getContentGroup() });\n```\n\n**Option C \u2014 Next.js (per layout segment):**\n```tsx\n// app/blog/layout.tsx\nimport Script from 'next/script';\nexport default function BlogLayout({ children }: { children: React.ReactNode }) {\n return (\n <>\n