Pricing Page Drop-off

New

Capture high-intent visitors who view your pricing page but don't start checkout. Perfect for SaaS products.

Why This Matters

Someone who visits your pricing page is 10x more likely to convert than a random visitor. They're actively evaluating whether to buy. If they leave without clicking "Buy", a gentle follow-up can bring them back.

Step 1. Track Page View

Fire an INTENT event when the pricing page loads. Use the price of your most popular plan.

React/Next.js Example

tsx

// components/pricing-page.tsx
"use client";

import { useEffect } from 'react';
import { useRetake } from '@retakeapi/nextjs/client';

export function PricingPage({ user, plans }: PricingPageProps) {
  const retake = useRetake();

  useEffect(() => {
    // 🔥 Track when user views pricing
    // Uses the most popular plan's price as the intent value
    const popularPlan = plans.find(p => p.popular) || plans[0];
    
    retake.track({
      type: 'pricing',
      email: user?.email, // If logged in
      value: popularPlan.price,
      items: [{
        id: popularPlan.id,
        name: popularPlan.name,
        price: popularPlan.price
      }]
    });
  }, []);

  return (
    <div className="pricing-grid">
      {plans.map(plan => (
        <PlanCard key={plan.id} plan={plan} />
      ))}
    </div>
  );
}

Step 2. Track Plan Selection (Optional)

For even better data, update the intent when they click on a specific plan.

tsx

// When user clicks a specific plan
function handlePlanClick(plan: Plan) {
  // Update intent with the specific plan they're interested in
  retake.track({
    type: 'pricing',
    email: user?.email,
    value: plan.price,
    items: [{
      id: plan.id,
      name: plan.name,
      price: plan.price
    }],
    metadata: {
      planClicked: plan.id,
      billingPeriod: plan.billingPeriod
    }
  });

  // Then redirect to checkout
  router.push(`/checkout?plan=${plan.id}`);
}

Alternative. Server-Side Tracking

If you're using PHP, Python, or another server-rendered framework, you can embed the tracking call directly in the page:

html

// For server-rendered pricing pages (PHP, Python, etc.)
// Track on page load using a script tag

<script>
  fetch('https://retakeapi.com/api/v1/track', {
    method: 'POST',
    headers: {
      'X-API-Key': 'YOUR_PUBLIC_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      event: 'INTENT',
      type: 'pricing',
      userId: '<?= $sessionId ?>',
      email: '<?= $user->email ?? null ?>',
      value: 49, // Your popular plan price
      items: [{
        id: 'pro_monthly',
        name: 'Pro Plan',
        price: 49
      }]
    })
  });
</script>

Best Practices

Capture email early

If the user is logged in, always pass their email. For anonymous visitors, consider adding an email capture field on the pricing page with a hook like "Get 10% off - enter your email".

Don't spam the API

Fire the intent once per session, not on every re-render. The SDK handles debouncing automatically, but be mindful if using the raw API.

Different email for pricing vs cart

Your recovery email for pricing drop-offs should be different from cart abandonment. Focus on value proposition and social proof, not "you left something behind".

Subscription Billing Recipe Guest Checkout Recipe

Learn

All Recipes

API & SDKs