# Clippable ROAS Tracking SDK - AI Integration Prompt > Paste this file into Claude Code, Codex, Cursor, or any AI coding assistant. > It will automatically find the right place to add the SDK script in your codebase. ## Task Integrate the Clippable ROAS tracking SDK into this codebase. The SDK is a lightweight JavaScript snippet that tracks store visitor behavior (page views, product interactions, cart events, purchases) for campaign attribution. ## Step 1: Add the tracking script Add the following script tag to the site's main layout/template so it loads on every page. Place it before the closing `` tag or at the end of the ``. ```html ``` **Where to add it** (check these in order, use the first one that exists): - Next.js: `pages/_document.tsx` or `app/layout.tsx` - inside `` before the closing tag, or using `next/script` with `strategy="afterInteractive"` - Nuxt: `nuxt.config.ts` → `app.head.script` array, or `app.vue` layout - SvelteKit: `src/app.html` - before `` - Remix: `app/root.tsx` - inside the `` of the document - Shopify: `theme.liquid` or `layout/theme.liquid` - before `` - WordPress/WooCommerce: `footer.php` or via a plugin that injects scripts in the footer - Static HTML: Every `.html` file's `` area, or a shared include/partial - React SPA (CRA/Vite): `public/index.html` - before `` - Angular: `src/index.html` - before `` - Vue CLI: `public/index.html` - before `` Leave the `REPLACE_WITH_YOUR_STORE_ID` and `REPLACE_WITH_YOUR_API_KEY` placeholders as-is. The user will fill them in from their Clippable brand dashboard. ## Step 2: Track product views Find the product detail page component/template. When a product page loads, call: ```javascript clippable.productView({ id: 'PRODUCT_ID', // your product's unique SKU or ID name: 'PRODUCT_NAME', // product display name price: PRODUCT_PRICE, // numeric price (e.g., 29.99) category: 'CATEGORY' // optional category string }); ``` Map the placeholders to the actual variables used in this codebase's product detail page. For example, if the codebase has `product.sku`, `product.title`, `product.price`, use those. ## Step 3: Track add-to-cart Find the add-to-cart handler (button click, form submit, or API call). After the item is successfully added, call: ```javascript clippable.addToCart({ id: 'PRODUCT_ID', name: 'PRODUCT_NAME', price: PRODUCT_PRICE, quantity: QUANTITY // number of items added }); ``` ## Step 4: Track purchases Find the order confirmation / thank-you page. When it loads (or when the order is confirmed), call: ```javascript clippable.purchase({ order_id: 'ORDER_ID', // your order's unique ID revenue: TOTAL_AMOUNT, // total order revenue as a number currency: 'USD', // ISO currency code items: [ // array of purchased items { id: 'PRODUCT_ID', name: 'PRODUCT_NAME', price: UNIT_PRICE, quantity: QTY } ] }); ``` This is the most important event - it's what drives ROAS calculation. ## Step 5: Verify After making the changes: 1. Add a `TODO` or inline comment next to each `REPLACE_WITH_YOUR_*` placeholder so the user can easily find and replace them 2. List out all the files you modified 3. If the framework supports environment variables, suggest putting the store ID and API key in `.env` instead of hardcoding ## Important notes - The SDK script is ~8KB and loads asynchronously - it will not block page rendering - The `clippable` global is available after the script loads; the SDK queues events internally, so calling `clippable.purchase()` before the script is fully loaded is safe - Do NOT wrap calls in `window.onload` or `DOMContentLoaded` - the SDK handles this - Do NOT add the script to checkout/payment iframes (only the main store pages) - The SDK automatically tracks: page views, scroll depth, time on page, and tracked link clicks (`?clp=CODE` parameter). You do NOT need to add code for these - The SDK uses localStorage (not cookies) for visitor/session IDs - no cookie banner needed for the SDK itself - If the codebase uses TypeScript, add `declare global { const clippable: any }` or a `clippable.d.ts` declaration file to avoid TS errors