Appearance
Analytics and Conversion Tracking
If you cannot measure it, you cannot improve it — proper analytics setup is the foundation of every optimization decision you will ever make.
Why This Matters
- 💻 Dev: You are responsible for instrumenting every meaningful interaction on the page. Misconfigured events, missing UTM parameters, or broken tracking pixels mean the entire team operates on bad data. Getting analytics right is invisible work that makes every other team's job possible.
- 📋 PM: Analytics is how you prove what is working and build the case for what to change next. Without clean data, you are guessing — and guessing is expensive when the roadmap depends on it.
- 🎨 Designer: Heatmaps, scroll depth data, and click maps tell you what visitors actually do versus what you designed them to do. This data is the fastest feedback loop on your design decisions.
The Concept (Simple)
Imagine flying a plane by looking out the window. On a clear day over flat terrain, you might manage. But at night, in fog, over mountains? You need instruments — altitude, airspeed, heading, fuel level, engine temperature. Each instrument answers a specific question about the state of the aircraft.
Your landing page analytics is that cockpit dashboard. Page views tell you altitude. Scroll depth tells you airspeed. Conversion rate is your heading. Bounce rate is your engine warning light. Without these instruments, you are flying blind — and in digital marketing, flying blind means burning budget without knowing why.
The goal is not to track everything. It is to track the right things, label them consistently, and build a dashboard that lets you answer the question: "Is this page doing its job, and if not, where is it failing?"
How It Works (Detailed)
The Analytics Data Flow
Every piece of analytics data follows this path from visitor action to team decision:
┌──────────┐ ┌──────────┐ ┌──────────────┐ ┌───────────┐
│ Visitor │ │ Events │ │ Analytics │ │ Dashboard │
│ arrives │───▶│ fire │───▶│ Platform │───▶│ / Report │
│ on page │ │ (JS SDK) │ │ (GA4, etc.) │ │ │
└──────────┘ └──────────┘ └──────────────┘ └─────┬─────┘
│
▼
┌───────────┐
│ Insights │
│ & Action │
└───────────┘Data without action is just storage costs. Every metric you track should connect to a decision you might make.
The Analytics Stack
A complete landing page analytics setup has four layers:
╔═══════════════════════════════════════════════════════════╗
║ ANALYTICS STACK ║
╠═══════════════════════════════════════════════════════════╣
║ ║
║ Layer 4: DECISIONS ║
║ ┌─────────────────────────────────────────────────────┐ ║
║ │ Dashboards, reports, experiment results │ ║
║ └─────────────────────────────────────────────────────┘ ║
║ ▲ ║
║ Layer 3: ANALYSIS ║
║ ┌─────────────────────────────────────────────────────┐ ║
║ │ Funnels, segments, cohorts, attribution │ ║
║ └─────────────────────────────────────────────────────┘ ║
║ ▲ ║
║ Layer 2: COLLECTION ║
║ ┌─────────────────────────────────────────────────────┐ ║
║ │ GA4, Amplitude, Mixpanel, PostHog │ ║
║ └─────────────────────────────────────────────────────┘ ║
║ ▲ ║
║ Layer 1: INSTRUMENTATION ║
║ ┌─────────────────────────────────────────────────────┐ ║
║ │ Event tracking, UTM parameters, pixels, tag mgmt │ ║
║ └─────────────────────────────────────────────────────┘ ║
║ ║
╚═══════════════════════════════════════════════════════════╝GA4 Setup Essentials
GA4 is event-based, not session-based. Every interaction is an event with parameters. Set up these three components:
Events — the raw interactions you track (see the essential events table below).
Conversions — flag your most important events (form submission, CTA click) as conversions so GA4 optimizes reporting around them.
Audiences — define visitor segments for analysis: visitors from paid campaigns, visitors who scrolled past 75%, visitors who started but did not complete the form.
UTM Parameter Taxonomy
UTM parameters are how you know where visitors came from. Inconsistent naming is the number-one analytics data quality problem. Adopt a convention and enforce it.
┌──────────────┬─────────────────┬──────────────────────────────────┐
│ Parameter │ Purpose │ Naming Convention │
├──────────────┼─────────────────┼──────────────────────────────────┤
│ utm_source │ Where the │ Lowercase, platform name. │
│ │ traffic comes │ google, facebook, linkedin, │
│ │ from │ newsletter, partner-name │
├──────────────┼─────────────────┼──────────────────────────────────┤
│ utm_medium │ How the traffic │ Use standard values only: │
│ │ gets to you │ cpc, organic, email, social, │
│ │ │ referral, display, affiliate │
├──────────────┼─────────────────┼──────────────────────────────────┤
│ utm_campaign │ Which campaign │ Lowercase, hyphens, descriptive. │
│ │ │ spring-2026-launch, │
│ │ │ free-trial-promo, webinar-feb │
├──────────────┼─────────────────┼──────────────────────────────────┤
│ utm_content │ Which ad or │ Describes the creative variant. │
│ │ link variant │ headline-a, cta-red, banner-top │
├──────────────┼─────────────────┼──────────────────────────────────┤
│ utm_term │ Which keyword │ The keyword or targeting term. │
│ │ (paid search) │ project-management-software │
└──────────────┴─────────────────┴──────────────────────────────────┘Rules to enforce:
- Always lowercase.
Googleandgooglecreate two separate sources. - Use hyphens, not underscores or spaces.
spring-launchnotspring_launch. - Never leave parameters blank — omit them entirely if not applicable.
- Document your conventions in a shared spreadsheet that anyone creating links must use.
Essential Events to Track
Every landing page should fire these events. Use consistent naming across all pages:
┌─────────────────────────┬────────────────────┬─────────────────────┐
│ Event Name │ Trigger │ Key Parameters │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ page_view │ Page loads │ page_title, │
│ │ │ page_location, │
│ │ │ traffic_source │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ scroll_depth │ 25%, 50%, 75%, │ percent_scrolled, │
│ │ 90% thresholds │ page_section │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ cta_click │ Any CTA button │ cta_text, cta_id, │
│ │ clicked │ cta_position │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ form_start │ First field in │ form_id, form_name │
│ │ form receives focus│ │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ form_field_complete │ Each field filled │ form_id, field_name │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ form_submit │ Form submitted │ form_id, form_name, │
│ │ successfully │ field_count │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ video_play │ Video play clicked │ video_title, │
│ │ │ video_duration │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ video_progress │ 25%, 50%, 75%, │ video_title, │
│ │ 100% watched │ percent_watched │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ social_proof_visible │ Testimonial or │ proof_type, │
│ │ logo section │ proof_position │
│ │ enters viewport │ │
├─────────────────────────┼────────────────────┼─────────────────────┤
│ exit_intent │ Mouse moves toward │ time_on_page, │
│ │ browser chrome │ scroll_depth │
│ │ (desktop only) │ │
└─────────────────────────┴────────────────────┴─────────────────────┘Heatmaps, Click Maps, and Session Recordings
Quantitative data (GA4, Amplitude) tells you what is happening. Qualitative tools tell you why.
Heatmaps and click maps (Hotjar, Microsoft Clarity) show you aggregate behavior — where visitors click, how far they scroll, what they hover over. Use them to identify:
- Elements visitors click that are not actually clickable (false affordance)
- Content below the fold that gets ignored
- Distracting elements that pull attention away from the CTA
Session recordings show individual visitor journeys. They reveal confusion, rage clicks, and unexpected navigation patterns. Use them when:
- Conversion drops suddenly and you need to diagnose why
- A new page launches and you want to validate the user journey
- Form abandonment is high and you need to see where people struggle
Privacy considerations: Always disclose recording in your privacy policy. Mask sensitive form fields (email, phone, credit card) in recordings. Tools like Clarity provide automatic masking. Do not record pages that collect payment information.
Attribution Models
Visitors rarely convert on their first visit. Attribution answers: which touchpoint gets credit for the conversion?
Last-click attribution — the final touchpoint before conversion gets 100% of the credit. Simple but misleading. It ignores the blog post, the ad, and the email that built awareness first.
Multi-touch attribution — distributes credit across all touchpoints. More accurate but harder to implement. Models include linear (equal credit), time-decay (recent touchpoints get more credit), and position-based (first and last touchpoints get 40% each, middle touchpoints split 20%).
For most landing page teams, start with last-click but track the full journey so you can move to multi-touch when your analysis matures.
In Practice
How Stripe Tracks API Documentation Page Engagement
Stripe's developer-facing pages are not typical marketing landing pages, but their analytics approach is instructive. Stripe tracks:
- Scroll depth by section — they know exactly which API documentation sections developers read and which they skip
- Code snippet copy events — every time a developer copies a code example, Stripe logs it as an engagement signal
- Time-to-first-action — how long after page load before a developer interacts with the interactive API console
This granular tracking lets Stripe's team identify which documentation sections need rewriting (low scroll-through), which code examples are most useful (high copy rate), and where developers get stuck (long time-to-first-action in specific sections).
The lesson for landing pages: do not just track page views and conversions. Track the micro-interactions that reveal how visitors engage with your content section by section.
How Airbnb Uses Scroll Depth to Optimize Page Length
Airbnb's growth team discovered through scroll depth analysis that their host sign-up landing page was too long. Analytics showed a sharp drop-off at 60% scroll depth — visitors were not reaching the final CTA or the trust-building content near the bottom.
Their response was not to shorten the page arbitrarily. They:
- Moved the highest-performing social proof (host earnings data) above the 60% scroll threshold
- Added a sticky CTA that appeared after 30% scroll depth
- Removed two sections that heatmap data showed visitors skipped entirely
The result: a 15% increase in host sign-up form starts without reducing the page's information density. The content was the same — the order and access to CTAs changed.
Key Takeaways
- Analytics is a four-layer stack: instrumentation, collection, analysis, and decisions — skipping layers means bad data or unused insights
- GA4 is event-based; define your events, mark conversions, and build audiences before you launch a page
- UTM parameter consistency is the most common analytics problem — enforce lowercase, hyphens, and a documented naming convention
- Track the essential events (page view, scroll depth, CTA click, form start, form submit) on every landing page from day one
- Combine quantitative data (GA4) with qualitative tools (heatmaps, session recordings) to understand both what and why
- Start with last-click attribution but capture the full touchpoint journey for future multi-touch analysis
- Privacy matters — always disclose recording, mask sensitive fields, and follow GDPR/CCPA requirements
Action Items
┌──────────┬──────────────────────────────────────────────────────┐
│ 💻 Dev │ ☐ Implement the essential events table using GA4 │
│ │ or your analytics platform of choice │
│ │ ☐ Set up scroll depth tracking at 25/50/75/90% │
│ │ thresholds with section-level granularity │
│ │ ☐ Build a UTM parameter validation script that │
│ │ enforces naming conventions on inbound links │
│ │ ☐ Add Hotjar or Microsoft Clarity for heatmaps │
│ │ and session recordings with field masking │
├──────────┼──────────────────────────────────────────────────────┤
│ 📋 PM │ ☐ Create and distribute a UTM naming convention │
│ │ document to everyone who creates campaign links │
│ │ ☐ Define the 3-5 conversion events that matter │
│ │ most for each landing page and mark them in GA4 │
│ │ ☐ Set up a weekly analytics review to catch data │
│ │ quality issues before they compound │
│ │ ☐ Build a simple dashboard showing conversion rate, │
│ │ traffic sources, and scroll depth for each page │
├──────────┼──────────────────────────────────────────────────────┤
│ 🎨 Design│ ☐ Review heatmap and click map data for the │
│ │ current landing page to identify dead zones │
│ │ ☐ Watch 10 session recordings per week to build │
│ │ intuition about how visitors navigate your page │
│ │ ☐ Use scroll depth data to validate whether key │
│ │ content is placed above the typical drop-off │
│ │ ☐ Identify false affordances (non-clickable │
│ │ elements that visitors try to click) and fix them │
└──────────┴──────────────────────────────────────────────────────┘