88 lines
3.3 KiB
Markdown
88 lines
3.3 KiB
Markdown
# Upgrade Button & Popup Source Tracking
|
|
|
|
## Summary
|
|
Added an upgrade button to the apps page and implemented tracking for which popup source triggered upgrade page visits.
|
|
|
|
## Changes Made
|
|
|
|
### 1. Apps Page Upgrade Button
|
|
**File**: `/chat/public/apps.html`
|
|
- Added "Upgrade Plan" button in the action buttons area (alongside Upload ZIP, Create New App, Browse Templates)
|
|
- Button links to `/upgrade?source=apps_page`
|
|
- Styled with orange/amber gradient to stand out from other buttons
|
|
|
|
### 2. Upgrade Page Source Tracking
|
|
**File**: `/chat/public/upgrade.html`
|
|
- Added JavaScript to read the `source` URL parameter when page loads
|
|
- Created `trackUpgradePopupSource()` function to send tracking data to backend
|
|
- Automatically tracks source when upgrade page is accessed
|
|
|
|
### 3. Builder Page Tracking
|
|
**Files**: `/chat/public/builder.html`, `/chat/public/builder.js`
|
|
- Updated usage meter upgrade link to `/upgrade?source=usage_limit`
|
|
- Added upgrade link to blurred model preview popup with `/upgrade?source=builder_model`
|
|
- Link appears in the model selection dropdown when free users click the model selector
|
|
|
|
### 4. Pricing Page Tracking
|
|
**File**: `/chat/public/pricing.html`
|
|
- Updated all upgrade buttons to include `?source=pricing` parameter
|
|
- Covers Starter, Professional, and Enterprise plan buttons
|
|
|
|
### 5. Server-Side Tracking Endpoint
|
|
**File**: `/chat/server.js`
|
|
- Created `handleUpgradePopupTracking(req, res)` function to process tracking requests
|
|
- Added route: `POST /api/upgrade-popup-tracking`
|
|
- Tracks normalized source values: `apps_page`, `builder_model`, `usage_limit`, `other`
|
|
- Increments counters for each source in `trackingData.summary.upgradeSources`
|
|
|
|
### 6. Server Stats API Update
|
|
**File**: `/chat/server.js`
|
|
- Updated `handleAdminTrackingStats()` to include `upgradeSources` in stats response
|
|
- Data persisted to `.data/.opencode-chat/tracking.json`
|
|
|
|
### 7. Admin Tracking UI
|
|
**File**: `/chat/public/admin-tracking.html`
|
|
- Added new "Upgrade Popup Sources" chart section
|
|
- Created `renderUpgradeSourcesChart()` function
|
|
- Displays bar chart showing which sources drive the most upgrade clicks
|
|
- Updated `loadTrackingData()` to call new render function
|
|
- Color-coded bars with orange/amber gradient (different from other charts)
|
|
|
|
## Tracked Sources
|
|
|
|
The system now tracks the following upgrade popup sources:
|
|
|
|
1. **apps_page**: User clicked upgrade from the Apps page
|
|
2. **builder_model**: User clicked upgrade from builder model selection (blurred preview)
|
|
3. **usage_limit**: User clicked upgrade from usage meter/reached limit
|
|
4. **other**: Any unknown source
|
|
|
|
## Admin Dashboard
|
|
|
|
Admin users can now see:
|
|
- Total visits, unique visitors, referrers, pages
|
|
- Signup and paid conversion sources
|
|
- **Upgrade popup sources** (NEW)
|
|
- Daily visits and revenue charts
|
|
- Top referrers to upgrade page
|
|
- Most visited pages
|
|
- Retention metrics
|
|
|
|
## Data Structure
|
|
|
|
```javascript
|
|
trackingData.summary.upgradeSources = {
|
|
apps_page: 0,
|
|
builder_model: 0,
|
|
usage_limit: 0,
|
|
other: 0
|
|
}
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **User Journey Insights**: Understand which UI elements are driving upgrade interest
|
|
2. **Feature Effectiveness**: Measure if model selection lockout is driving upgrades
|
|
3. **UX Optimization**: Identify which CTAs are most effective
|
|
4. **Conversion Funnel**: Track from popup view through to plan selection
|