cocos-conversion-optimizer

name	cocos-conversion-optimizer
description	Use when working on improving install rates and user acquisition metrics.

Cocos Conversion Optimizer

Overview

This Codex skill adapts the upstream Cocos Creator Claude agent guidance for use in Codex.

Expert in maximizing conversion rates for Cocos Creator playable ads through data-driven optimization, psychological triggers, and engagement mechanics. Use this skill for improving install rates and user acquisition metrics.

Expertise

• Conversion funnel analysis
• Psychological triggers and hooks
• CTA optimization strategies
• Engagement metrics tracking
• A/B testing implementation
• User behavior analysis
• Store redirect optimization
• Performance marketing principles

Usage Examples

Example 1: Low Conversion Fix

Context: Playable has 2% conversion rate
User: "Improve conversion rate to industry standard"
Assistant: "I will use $cocos-conversion-optimizer"
Commentary: Implements psychological triggers and optimizes CTA placement

Example 2: CTA Optimization

Context: Users not clicking install button
User: "Make the CTA more compelling"
Assistant: "I will use $cocos-conversion-optimizer"
Commentary: Redesigns CTA with urgency and visual appeal

Example 3: Engagement Tracking

Context: Need to understand user behavior
User: "Add comprehensive analytics to track user actions"
Assistant: "I will use $cocos-conversion-optimizer"
Commentary: Sets up detailed funnel analytics

Conversion Psychology

Hook Mechanics

@ccclass('ConversionHooks')
export class ConversionHooks extends Component {
    // 1. Curiosity Gap
    showTeaser() {
        // Show advanced gameplay preview
        const preview = this.node.getChildByName('GameplayPreview');
        preview.active = true;
        
        // Hide after 2 seconds to create curiosity
        this.scheduleOnce(() => {
            preview.active = false;
            this.showMessage("Unlock more levels in the full game!");
        }, 2);
    }
    
    // 2. Loss Aversion
    showLimitedOffer() {
        const offer = {
            type: 'LIMITED_TIME',
            message: 'Special offer expires in 24h!',
            visual: 'countdown_timer'
        };
        
        this.displayOffer(offer);
    }
    
    // 3. Social Proof
    showSocialProof() {
        const messages = [
            "Join 10 million players!",
            "Rated 4.8★ by players like you",
            "#1 Puzzle Game this week"
        ];
        
        this.rotateMessages(messages);
    }
    
    // 4. Progress Investment
    trackProgress() {
        const progress = {
            level: 3,
            score: 1250,
            unlocks: ['PowerUp1', 'Skin2']
        };
        
        this.showProgressLoss("Don't lose your progress! Continue in the app");
    }
}

CTA Optimization System

@ccclass('CTAOptimizer')
export class CTAOptimizer extends Component {
    @property(Button)
    ctaButton: Button = null;
    
    @property(Label)
    ctaText: Label = null;
    
    private _ctaVariants = {
        soft: [
            "Play Now",
            "Continue",
            "Try More Levels"
        ],
        medium: [
            "Play FREE",
            "Get the Full Game",
            "Unlock Everything"
        ],
        strong: [
            "Install NOW - FREE",
            "Download & Keep Playing",
            "Get it FREE - Limited Time"
        ]
    };
    
    private _ctaShownCount: number = 0;
    
    showCTA(strength: 'soft' | 'medium' | 'strong') {
        this._ctaShownCount++;
        
        // Choose variant based on A/B test
        const variants = this._ctaVariants[strength];
        const text = variants[Math.floor(Math.random() * variants.length)];
        
        this.ctaText.string = text;
        this.animateCTA(strength);
        
        // Track impression
        this.trackCTAImpression(strength, text);
    }
    
    animateCTA(strength: string) {
        const button = this.ctaButton.node;
        
        if (strength === 'strong') {
            // Aggressive animation
            tween(button)
                .to(0.3, { scale: v3(1.3, 1.3, 1) })
                .to(0.3, { scale: v3(1, 1, 1) })
                .union()
                .repeatForever()
                .start();
            
            // Add glow effect
            this.addGlowEffect(button);
            
            // Add particle effects
            this.addCTAParticles(button);
        } else {
            // Subtle pulse
            tween(button)
                .to(1, { scale: v3(1.1, 1.1, 1) })
                .to(1, { scale: v3(1, 1, 1) })
                .union()
                .repeatForever()
                .start();
        }
    }
}

Engagement Metrics

@ccclass('EngagementTracker')
export class EngagementTracker extends Component {
    private _metrics = {
        sessionStart: 0,
        firstInteraction: 0,
        interactions: [],
        ctaImpressions: [],
        ctaClicks: [],
        gameEvents: []
    };
    
    onLoad() {
        this._metrics.sessionStart = Date.now();
        this.setupTracking();
    }
    
    trackInteraction(type: string, data?: any) {
        const event = {
            type,
            timestamp: Date.now() - this._metrics.sessionStart,
            data
        };
        
        this._metrics.interactions.push(event);
        
        if (this._metrics.interactions.length === 1) {
            this._metrics.firstInteraction = event.timestamp;
            this.checkEngagementMilestone();
        }
        
        // Send to analytics
        this.sendAnalytics(event);
    }
    
    checkEngagementMilestone() {
        const engagementTime = Date.now() - this._metrics.sessionStart;
        
        if (engagementTime > 5000 && this._metrics.interactions.length > 3) {
            // High engagement - show stronger CTA
            this.node.emit('high-engagement');
        }
    }
    
    generateFunnelReport() {
        return {
            startToFirstInteraction: this._metrics.firstInteraction,
            totalInteractions: this._metrics.interactions.length,
            ctaConversion: this._metrics.ctaClicks.length / this._metrics.ctaImpressions.length,
            dropOffPoints: this.calculateDropOffPoints()
        };
    }
}

Conversion Funnel

interface ConversionFunnel {
    stages: {
        load: number;           // 100%
        firstInteraction: number; // 80%
        tutorialComplete: number; // 60%
        firstCTAShown: number;   // 55%
        gameplayLoop: number;    // 40%
        strongCTAShown: number;  // 35%
        ctaClicked: number;      // 5-15% target
    };
}

@ccclass('FunnelOptimizer')
export class FunnelOptimizer extends Component {
    optimizeFunnel(currentMetrics: ConversionFunnel) {
        const bottlenecks = this.identifyBottlenecks(currentMetrics);
        
        bottlenecks.forEach(bottleneck => {
            switch (bottleneck.stage) {
                case 'firstInteraction':
                    // Make first interaction more obvious
                    this.enhanceTutorialVisibility();
                    break;
                    
                case 'tutorialComplete':
                    // Simplify tutorial
                    this.reduceTutorialSteps();
                    break;
                    
                case 'ctaClicked':
                    // Enhance CTA appeal
                    this.upgradeCTAStrategy();
                    break;
            }
        });
    }
}

A/B Testing Framework

@ccclass('ABTestManager')
export class ABTestManager extends Component {
    private _tests = {
        ctaColor: {
            variants: ['green', 'blue', 'orange'],
            metric: 'cta_click_rate'
        },
        ctaTiming: {
            variants: [5, 8, 12], // seconds
            metric: 'conversion_rate'
        },
        tutorialLength: {
            variants: ['short', 'medium', 'long'],
            metric: 'tutorial_completion'
        }
    };
    
    assignVariant(testName: string): any {
        const test = this._tests[testName];
        const variantIndex = this.hashUserId() % test.variants.length;
        return test.variants[variantIndex];
    }
    
    trackResult(testName: string, variant: any, success: boolean) {
        // Send to analytics backend
        const data = {
            test: testName,
            variant: variant,
            success: success,
            timestamp: Date.now()
        };
        
        this.sendToAnalytics(data);
    }
}

End Card Optimization

@ccclass('EndCardOptimizer')
export class EndCardOptimizer extends Component {
    @property(Node)
    endCard: Node = null;
    
    showOptimizedEndCard(playerPerformance: any) {
        // Personalize based on performance
        if (playerPerformance.won) {
            this.showVictoryEndCard();
        } else if (playerPerformance.closeToWin) {
            this.showAlmostThereEndCard();
        } else {
            this.showEncouragementEndCard();
        }
        
        // Always show compelling reasons to install
        this.addValuePropositions();
    }
    
    addValuePropositions() {
        const benefits = [
            "🎮 100+ Unique Levels",
            "🏆 Daily Tournaments",
            "🎁 Free Daily Rewards",
            "👥 Play with Friends",
            "🌟 No Ads in Full Game"
        ];
        
        // Animate benefits appearing
        benefits.forEach((benefit, index) => {
            this.scheduleOnce(() => {
                this.showBenefit(benefit);
            }, index * 0.5);
        });
    }
}

Best Practices

Conversion Rate Targets

• Industry Average: 5-8%
• Good: 10-12%
• Excellent: 15%+

Key Optimization Points

1. 0-3 seconds: Hook with immediate gameplay
2. 3-8 seconds: Show value and progress
3. 8-15 seconds: First soft CTA
4. 15-30 seconds: Strong CTA with urgency
5. 30+ seconds: End card with full value prop

Handoff Guidance

To cocos-tutorial-designer

Trigger: Tutorial optimization needed Handoff: "Conversion analysis done. Tutorial refinement needed for: [metrics]"

To cocos-playable-architect

Trigger: Structural changes needed Handoff: "Conversion strategy defined. Architecture changes needed for: [features]"

To cocos-ui-builder

Trigger: CTA visual enhancement Handoff: "CTA strategy ready. Visual implementation needed for: [variants]"

References

Read references/playable-ad-development.md when the task needs the full workflow.

Codex Operating Notes

• Prefer inspecting the actual Cocos Creator project before proposing changes.
• Keep edits scoped to the requested game system, platform, or workflow.
• After implementation, run the available TypeScript, lint, build, export, or size checks for the project.
• When the task naturally crosses domains, recommend the next relevant Cocos skill instead of expanding scope silently.