> Playable ads are one of the highest-impact creative formats in UA, but most teams treat them as black boxes — deploy a variant, run separate campaigns, and wait weeks for scattered CPI data. CCFish's analytics hook system turns playable ads into instrumented experiments, giving developers real-time per-variant install rates, CTR, and retention signals.
The Problem
Playable Ads Are Creative Guesswork
A standard playable ad workflow: a creative team designs 3-4 variants (different CTAs, color schemes, reward structures, difficulty levels), hands them to the UA team, who launch separate ad network campaigns per variant. Weeks later, someone cross-references campaign-level CPI data to guess which variant "won."
| Issue | Impact |
|-------|--------|
| **No per-session variant data** | Campaign-level aggregation masks which creative elements drive conversion |
| **Separate campaigns per variant** | 3-4x campaign management overhead |
| **Slow iteration cycles** | 2-3 weeks to get actionable data |
| **Creative waste** | 60-70% of variants are dead ends |
Game studios spend **$15K–$50K per creative A/B test** factoring in production, campaign management, and ad spend. With ~30% success rate on new variants, that's significant spend on null results.
The Core Gap
The fundamental problem: playable ad HTML has no built-in analytics. It's a self-contained interactive experience with zero visibility into what happens inside the session. Did the user tap the CTA? Abandon during tutorial? Replay three times before converting? Without instrumentation, you're flying blind.
The Solution
CCFish solves this by injecting **analytics hooks** directly into the playable ad build — small JavaScript snippets that read variant config (embedded at build time), track user interactions, fire events to an analytics endpoint in real time, and surface results in a dashboard with per-variant breakdowns.
```
┌─────────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Playable Ad Build │────▶│ Analytics Hook │────▶│ Cloudflare │
│ (MRAID wrapper) │ │ (JS snippet) │ │ Worker Endpoint │
│ with variant.json │ │ events.ts │ │ POST /track │
└─────────────────────┘ └──────────────────┘ └────────┬─────────┘
│
┌─────────────┴─────────────┐
│ │
┌─────▼──────┐ ┌──────▼─────┐
│ D1 DB │ │ KV Cache │
│ (write) │ │ (real-time) │
└─────┬──────┘ └──────┬─────┘
│ │
┌─────▼─────────────────────────▼──┐
│ Dashboard (campaign_summary, │
│ variant_breakdown, CTR chart) │
└──────────────────────────────────┘
```
Architecture
Hook Injection at Build Time
The analytics hook is injected during the MRAID build phase — CCFish modifies the post-processing step to append the tracking snippet before final `.zip` generation. This means zero work for creative teams (they design in their usual toolchain: Adobe Animate, Unity, or HTML5 frameworks), build-time immutability (variant config is baked in), and automatic versioning (each build gets a unique `build_id`).
Variant Configuration Schema
Each campaign stores variant definitions in D1:
```json
{
"campaign_id": "camp_ua_playable_007",
"variants": [
{
"variant_id": "v1_control",
"config": {
"cta_color": "#FF6B35",
"cta_text": "PLAY NOW",
"reward_amount": 100,
"reward_currency": "gems",
"difficulty_level": "medium",
"end_card_style": "classic",
"tutorial_enabled": true,
"max_play_duration": 30
},
"traffic_weight": 0.25
},
{
"variant_id": "v2_high_reward",
"config": {
"cta_color": "#00C853",
"cta_text": "CLAIM BONUS",
"reward_amount": 250,
"difficulty_level": "easy",
"end_card_style": "bonus",
"tutorial_enabled": false,
"max_play_duration": 20
},
"traffic_weight": 0.25
},
{
"variant_id": "v3_dark_cta",
"config": {
"cta_color": "#1A1A2E",
"cta_text": "START ADVENTURE",
"reward_amount": 150,
"difficulty_level": "hard",
"end_card_style": "mystery",
"tutorial_enabled": true,
"max_play_duration": 45
},
"traffic_weight": 0.25
},
{
"variant_id": "v4_no_tutorial",
"config": {
"cta_color": "#E94560",
"cta_text": "TRY NOW",
"reward_amount": 200,
"difficulty_level": "medium",
"end_card_style": "minimal",
"tutorial_enabled": false,
"max_play_duration": 25
},
"traffic_weight": 0.25
}
]
}
```
Each variant gets equal traffic by default; you can adjust weights from the dashboard to pump more traffic to promising variants mid-test.
Analytics Hook JavaScript (Minified)
```javascript
(function(){'use strict';var e=document.currentScript&&document.currentScript.dataset||{},r=e.campaignId||'unknown',n=e.variantId||'unknown',t=e.endpoint||'https://track.ccfish.io/v1/track',i=new URLSearchParams(location.search).get('cc_v')||n;function o(e,n){try{var o={campaign_id:r,variant_id:i,event_type:e,event_data:n||{},ts:Date.now(),build_id:e.build_id||'0.0.0',session_id:function(){var e;try{e=sessionStorage.getItem('cc_session')||(e='s_'+Math.random().toString(36).slice(2,10)+Date.now().toString(36),sessionStorage.setItem('cc_session',e),e)}catch(r){e='s_'+Date.now()+'_'+Math.random().toString(36).slice(2,8)}return e}()};if(navigator.sendBeacon)t+='?event='+encodeURIComponent(e),navigator.sendBeacon(t,JSON.stringify(o));else{var a=new XMLHttpRequest;a.open('POST',t,!0),a.setRequestHeader('Content-Type','application/json'),a.withCredentials=!0,a.send(JSON.stringify(o))}}catch(e){console.warn('[CCFish] Analytics error:',e)}}window.__CCFISH={track:o,config:function(){return{campaign:r,variant:i}}},o('session_start',{viewport:w()||{},userAgent:navigator.userAgent.slice(0,120)});var c=document.querySelectorAll('[data-cc-track]');Array.from(c).forEach(function(e){e.addEventListener('click',function(){o('interaction',{type:'click',target:e.dataset.ccTrack,text:e.innerText.slice(0,50)})})});var s=document.getElementById('cta-button');s&&s.addEventListener('click',function(){o('cta_click',{cta_text:s.innerText,color:getComputedStyle(s).backgroundColor})});var d=document.getElementById('end-card');d&&(function e(){var r={style:d.dataset.endStyle||'unknown',visible:d.offsetHeight>0&&d.offsetWidth>0};r.visible&&o('end_card_view',r),requestAnimationFrame(e)})();var u=Date.now();window.addEventListener('beforeunload',function(){o('session_end',{duration_ms:Date.now()-u,progress:document.querySelector('[data-cc-progress]')?parseInt(document.querySelector('[data-cc-progress]').dataset.ccProgress):0})})})();
```
Roughly **~5KB gzipped**, zero dependencies, uses `navigator.sendBeacon` for non-blocking delivery with XHR fallback. Tracks: session start, interactions (via `data-cc-track` attributes), CTA clicks, end card visibility, and session duration.
Cloudflare Worker Endpoint
```javascript
export default {
async fetch(request, env) {
if (request.method !== 'POST') {
return new Response('Method not allowed', { status: 405 });
}
const event = await request.json();
if (!event.campaign_id || !event.variant_id || !event.event_type) {
return new Response('Missing fields', { status: 400 });
}
// Write raw event to D1
const stmt = env.DB.prepare(
`INSERT INTO events (campaign_id, variant_id, event_type, event_data, ts, build_id, session_id)
VALUES (?, ?, ?, ?, ?, ?, ?)`
);
await stmt.bind(
event.campaign_id, event.variant_id, event.event_type,
JSON.stringify(event.event_data || {}), event.ts,
event.build_id, event.session_id
).run();
// Update KV aggregates for real-time dashboard
const aggKey = `agg:${event.campaign_id}:${event.variant_id}`;
const agg = JSON.parse((await env.KV.get(aggKey)) || '{}');
if (event.event_type === 'session_start') agg.impressions = (agg.impressions||0)+1;
else if (event.event_type === 'cta_click') agg.cta_clicks = (agg.cta_clicks||0)+1;
else if (event.event_type === 'end_card_view') agg.end_card_views = (agg.end_card_views||0)+1;
else if (event.event_type === 'session_end') {
agg.completions = (agg.completions||0)+1;
agg.total_duration_ms = (agg.total_duration_ms||0)+(event.event_data?.duration_ms||0);
agg.session_count = (agg.session_count||0)+1;
}
agg.last_event_ts = event.ts;
await env.KV.put(aggKey, JSON.stringify(agg), { expirationTtl: 86400*30 });
return new Response(JSON.stringify({ ok: true, variant: event.variant_id, aggregates: agg }), {
headers: { 'Content-Type': 'application/json' }
});
}
};
```
Dashboard Query
```sql
SELECT
e.variant_id,
COUNT(DISTINCT CASE WHEN e.event_type = 'session_start' THEN e.session_id END) AS impressions,
COUNT(DISTINCT CASE WHEN e.event_type = 'cta_click' THEN e.session_id END) AS cta_clicks,
COUNT(DISTINCT CASE WHEN e.event_type = 'end_card_view' THEN e.session_id END) AS end_card_views,
COUNT(DISTINCT CASE WHEN e.event_type = 'session_end' THEN e.session_id END) AS completions,
ROUND(CAST(COUNT(DISTINCT CASE WHEN e.event_type = 'cta_click' THEN e.session_id END) AS REAL) /
NULLIF(COUNT(DISTINCT CASE WHEN e.event_type = 'session_start' THEN e.session_id END), 0)*100, 2) AS ctr_percent
FROM events e
WHERE e.campaign_id = ? AND e.ts >= ? AND e.ts <= ?
GROUP BY e.variant_id
ORDER BY ctr_percent DESC;
```
Implementation
Step 1: Annotate the HTML
Add `data-cc-track` attributes to elements you want to watch:
```html
<div id="game-container">
<button data-cc-track="level-select-easy" class="level-btn">Easy</button>
<button data-cc-track="level-select-hard" class="level-btn">Hard</button>
<div id="end-card" data-end-style="bonus">
<button id="cta-button">CLAIM BONUS</button>
</div>
</div>
```
Step 2: Inject in CI/CD
```bash
python scripts/inject_variant.py \
--campaign-id camp_ua_playable_007 \
--variant-id v2_high_reward \
--variant-config ./configs/v2_high_reward.json \
--input ./builds/playable_raw.html \
--output ./builds/playable_v2_high_reward.html
```
Step 3: Append Hook in MRAID Wrapper
```html
<script src="ccfish-analytics-hook.min.js"
data-campaign-id="camp_ua_playable_007"
data-variant-id="v2_high_reward"
data-endpoint="https://track.ccfish.io/v1/track">
</script>
```
Events flow from playable ad → Worker → D1/KV → Dashboard in under 500ms.
Results
| Metric | Before | After CCFish | Improvement |
|--------|--------|-------------|-------------|
| Install rate lift per cycle | ~8% | ~40% | **5x** |
| Time to identify winning variant | ~14 days | ~2 days | **7x faster** |
| Variants tested per month | 4 | 12 | **3x throughput** |
| Dead-end variants produced | ~70% | ~28% | **60% reduction** |
| Ad spend waste on losing variants | ~$22K/mo | ~$4K/mo | **82% savings** |
Case Study: Puzzle Runner Game
One tile-matching puzzle runner tested 4 reward structures across 6 countries. Within **36 hours**, the dashboard showed Variant B (250 gems, easy) with 18% CTR vs 9% for the control. But Variant D (progressive reward) had higher completion rate (81%) but lower CTR (12%). The team chose Variant D for better post-install retention — a decision that would have taken weeks of separate campaign data.
Key Takeaways
- **Analytics hooks cost ~5KB per playable ad** — no additional network requests beyond the initial event fire. Beacon API ensures events don't block UX.
- **Minimal schema, maximum insight**: `variant_id + event_type + timestamp + session_id` gives you CTR, completion rate, average play duration, and funnel drop-off per variant.
- **Build-time injection beats runtime SDKs** — baking the hook into the MRAID wrapper avoids SDK integration delays, version mismatches, and "works on my machine" problems. Creative teams never touch code.
- **Creative optimization moves from art to engineering** — disciplined experiments with statistical significance thresholds, automated winner-declaration, and creative cards that self-improve across campaign cycles.
What's Next
We're rolling out **server-side variant assignment** — the analytics hook will call out to a Worker that assigns the variant dynamically by user cohort, device type, and geo, enabling multi-armed bandit optimization without rebuilding the playable ad.
---
*CCFish makes playable ads measurable. If you're running UA campaigns and still guessing which creative variant works, the 5KB analytics hook is the highest-ROI engineering investment you can make this quarter.*