|
| 1 | +# Convert SDK — Cloudflare Workers Demo |
| 2 | + |
| 3 | +A complete example of running Convert A/B tests at the Cloudflare edge with zero client-side flicker. |
| 4 | + |
| 5 | +## What This Demonstrates |
| 6 | + |
| 7 | +1. **Page-level A/B test** — HTMLRewriter modifies page content before delivery |
| 8 | +2. **Asset / image swap** — Replace images or stylesheets per variation |
| 9 | +3. **Split URL redirect** — Serve entirely different origin pages transparently |
| 10 | +4. **SPA injection** — Inject bucketing decisions as JSON for client-side SPAs |
| 11 | +5. **Edge caching** — Cache origin responses per variation |
| 12 | + |
| 13 | +## Setup |
| 14 | + |
| 15 | +### 1. Install Dependencies |
| 16 | + |
| 17 | +```bash |
| 18 | +yarn install |
| 19 | +``` |
| 20 | + |
| 21 | +### 2. Create a KV Namespace |
| 22 | + |
| 23 | +```bash |
| 24 | +wrangler kv namespace create CONVERT_KV |
| 25 | +``` |
| 26 | + |
| 27 | +Copy the output `id` into `wrangler.toml`. |
| 28 | + |
| 29 | +### 3. Configure |
| 30 | + |
| 31 | +Edit `wrangler.toml`: |
| 32 | +- Set your KV namespace ID |
| 33 | +- Set your Convert SDK key (`CONVERT_SDK_KEY`) |
| 34 | + |
| 35 | +### 4. Update Experiment Keys |
| 36 | + |
| 37 | +In `src/index.ts`, replace `'your-experience-key'` with your actual experience key from the Convert dashboard. |
| 38 | + |
| 39 | +### 5. Run |
| 40 | + |
| 41 | +```bash |
| 42 | +# Local development |
| 43 | +yarn dev |
| 44 | + |
| 45 | +# Deploy to production |
| 46 | +yarn deploy |
| 47 | + |
| 48 | +# View live logs |
| 49 | +yarn tail |
| 50 | +``` |
| 51 | + |
| 52 | +## How It Works |
| 53 | + |
| 54 | +``` |
| 55 | +Visitor → Cloudflare Edge → Worker |
| 56 | + ├── Read config from KV (cached, ~1ms) |
| 57 | + ├── Read visitor data from KV (~1ms) |
| 58 | + ├── SDK: bucket visitor into variation |
| 59 | + ├── Fetch origin page |
| 60 | + ├── HTMLRewriter: modify HTML per variation |
| 61 | + ├── Set visitor cookie |
| 62 | + └── Respond (total edge overhead: ~5-8ms) |
| 63 | +
|
| 64 | + └── Background (waitUntil): |
| 65 | + ├── Save bucketing to KV |
| 66 | + └── Send tracking event to Convert |
| 67 | +``` |
| 68 | + |
| 69 | +## Documentation |
| 70 | + |
| 71 | +Full guide: [Cloudflare Workers Edge Experimentation](https://github.com/convertcom/javascript-sdk/wiki/CloudflareWorkers) |
0 commit comments