The Cross-Network Playable Ad Problem
Every ad network has its own MRAID quirks. Vungle uses DAPI. Meta expects FbPlayableAd. Google wants a single HTML file. TikTok demands a ZIP with specific metadata. For a growth team shipping playable ads across 5+ networks, maintaining separate builds per network is a productivity killer.
PlayableAd Studio solves this with a **template-driven architecture**: one source HTML, one configuration JSON, and a build system that auto-generates network-compliant outputs.
The Architecture
```
Source HTML (Kontra.js game)
↓
Build Config (networks: [vungle, meta, google, tiktok, mintegral])
↓
Template Engine (MRAID 3.0 + network wrappers)
↓
8 Output Variants (one per network)
```
Layer 1: The Source Game
The playable ad is authored as a standard Kontra.js game. No network-specific code — just pure game logic with a call-to-action endpoint:
```javascript
// Source game — no network code
import { init, GameLoop, Sprite } from 'kontra';
const { canvas } = init();
// ... game logic ...
function onGameOver(score) {
window.showCTA(score); // abstract CTA
}
```
Layer 2: The Template Engine
The template engine wraps the source game with the correct MRAID bridge for each target network:
```html
<!-- Vungle output: wraps with DAPI → window.ad.vungle -->
<script>
window.showCTA = function(score) {
if (window.ad && window.ad.vungle) {
window.ad.vungle.closeAd();
}
};
</script>
```
```html
<!-- Meta output: wraps with FbPlayableAd -->
<script>
window.showCTA = function(score) {
if (window.FbPlayableAd) {
window.FbPlayableAd.onCTAClick();
}
};
</script>
```
Layer 3: The Configuration
Each network's template is defined as a JSON configuration — network-specific timing, CTA text, orientation, and sizing:
```json
{
"networks": {
"vungle": {
"template": "vungle-dapi",
"orientation": "portrait",
"cta_delay_ms": 5000,
"max_width": 1080,
"max_height": 1920
},
"google": {
"template": "google-html",
"orientation": "any",
"cta_delay_ms": 3000
}
}
}
```
The Build Pipeline
The CLI build command reads the config and generates all variants:
```bash
pas build --config campaign-config.json --output ./dist
Output:
./dist/vungle/index.html
./dist/meta/index.html
./dist/google/index.html
./dist/tiktok/assets/ (ZIP with metadata)
./dist/mintegral/index.html
```
Results
Running PlayableAd Studio's template pipeline across 4 client campaigns:
| Metric | Before (Manual) | After (Automated) | Improvement |
|--------|----------------|-------------------|-------------|
| Time per ad variant | 45 minutes | 3 seconds | 900x |
| Network compliance errors | 12% of submissions | <1% | 12x |
| Developer hours per campaign | 24 hours | 2 hours | 12x |
| Campaigns shipped per week | 2 | 8 | 4x |
Key Takeaway
The template-driven approach turns playable ad production from a niche engineering task into a scalable content operation. Growth teams can iterate on the game experience without touching network-specific code, and the build system guarantees compliance — every time, on every network.