Polygon_Accounts_Home_Page
- Go to Google Analytics
- Create new GA4 property for
polygon.ac - Get your Measurement ID (format:
G-HCT7CL65JS)
Update index.html by adding this in the <head> section:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HCT7CL65JS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX', {
'send_page_view': true
});
</script>In GA4, create these custom events:
cta_click- Track button clicksreferral_captured- When referral code is detectedscroll_depth- Track user engagementtime_on_page- Session duration tracking
Your referral links will look like:
https://www.polygon.ac/?ref=FRIEND123
https://www.polygon.ac/?ref=ETH_DENVER&utm_source=twitter&utm_campaign=launch
reforreferral- Your referral codeutm_source- Traffic source (twitter, discord, email)utm_medium- Medium type (social, email, banner)utm_campaign- Campaign name (launch, q4_promo)
- Create
src/utils/analytics.tswith the provided code - Import in your components:
import { analytics } from '../utils/analytics';Replace all href="https://app.polygon.ac" with:
href={analytics.getAppURL()}
onClick={() => analytics.trackCTAClick('button_location')}Button locations to track:
hero_primary- Main hero buttonhero_secondary- Secondary hero CTAshow_it_works- Section CTAsfooter_cta- Footer buttonssticky_mobile- Mobile sticky button
<a
href={analytics.getAppURL()}
onClick={() => analytics.trackCTAClick('footer_cta')}
className="inline-flex items-center px-8 py-4 bg-white hover:bg-gray-100 text-purple-600 font-semibold rounded-xl text-lg transition-all duration-300"
>
Start now
</a>For privacy-focused, cookie-free analytics:
- Go to Cloudflare Dashboard > Web Analytics
- Add your site
polygon.ac - Copy the beacon script
- Add to
index.html:
<!-- Cloudflare Web Analytics -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "YOUR_TOKEN_HERE"}'></script>- No cookie consent needed
- Works with ad blockers
- Ultra-lightweight
- Real-time data
- Bot filtering
- Visit:
http://localhost:5173/?ref=TEST123 - Open DevTools Console
- Check sessionStorage:
sessionStorage.getItem('polygon_referral') - Click a CTA button
- Verify parameters are passed to
app.polygon.ac
- Install Google Analytics Debugger Chrome extension
- Enable debug mode
- Click buttons and verify events fire
- Check GA4 Realtime reports
Create trackable links for campaigns:
Twitter Launch:
https://www.polygon.ac/?ref=TWITTER_LAUNCH&utm_source=twitter&utm_medium=social&utm_campaign=oct_2025
Email Campaign:
https://www.polygon.ac/?ref=EMAIL_PROMO&utm_source=newsletter&utm_medium=email&utm_campaign=polyprize
Influencer Partnership:
https://www.polygon.ac/?ref=INFLUENCER_NAME&utm_source=youtube&utm_medium=video&utm_campaign=partnership
- Total page views
- Unique visitors
- Referral code distribution
- CTA click-through rates by location
- Average scroll depth
- Time on page
- Bounce rate by traffic source
- Referral Performance: Group by
referral_codedimension - CTA Effectiveness: Compare
cta_locationclick rates - Campaign ROI: Track conversions by
utm_campaign - Traffic Sources: UTM source/medium breakdown
For more accurate tracking without ad blockers:
// Cloudflare Worker to log analytics
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const url = new URL(request.url)
// Log referral
if (url.searchParams.get('ref')) {
await logToAnalytics({
type: 'referral',
code: url.searchParams.get('ref'),
timestamp: Date.now(),
userAgent: request.headers.get('user-agent')
})
}
return fetch(request)
}- ✅ SessionStorage only (no persistent tracking)
- ✅ No PII collected
- ✅ Referral codes are campaign identifiers, not personal data
- ✅ User can clear session anytime
⚠️ Consider adding cookie banner if using GA4
<div id="cookie-banner" style="position: fixed; bottom: 0; width: 100%; background: #000; color: #fff; padding: 1rem; text-align: center;">
We use analytics to improve your experience.
<button onclick="acceptCookies()">Accept</button>
</div>- Review top referral codes
- Check CTA conversion rates
- Monitor bounce rates
- Analyze traffic sources
- A/B test CTA copy
- Optimize underperforming campaigns
- Create reports for stakeholders
- Adjust referral incentives
// Capture referral on account creation
app.post('/api/account/create', async (req, res) => {
const { email, referralCode } = req.body;
await createAccount({
email,
referralCode,
source: req.query.utm_source,
campaign: req.query.utm_campaign
});
// Track conversion back to GA4
await trackConversion(referralCode);
});- Add GA4 tracking code to
index.html - Create
src/utils/analytics.tsfile - Update all CTA buttons with tracking
- Test referral code flow locally
- Deploy to production
- Verify GA4 events in real-time
- Create campaign URLs
- Set up weekly monitoring
- Document for team
Common issues:
- Events not showing: Check GA4 Measurement ID is correct
- Referral codes lost: Verify sessionStorage is accessible
- App redirect fails: Check CORS settings on app.polygon.ac
- Ad blockers: Consider Cloudflare Analytics as backup
Pro Tip: Start with GA4 + basic referral tracking, then add Cloudflare Analytics and server-side tracking as you scale!