Identifying Why 30% of Users Leave Without Buying: Exit Survey Analysis

On the payment page or in the cart, 30% of sessions abruptly end. Each lost customer takes potential profit with them. There are many hypotheses: price, complexity, lack of trust. But without data, you're guessing. We solve this with an exit intent popup and on-exit survey that appears the moment a user is about to leave and asks one question: "Why are you leaving?" Answers accumulate, and within a week you have a clear picture — 40% left due to price, 25% couldn't find delivery info, 15% were just browsing. Then comes personalized offers or A/B tests. Implementation of the exit intent popup takes 2–3 days, stack — React, TypeScript, Laravel. Our team has 10+ years of experience in UX analytics and has developed similar tools for 40+ projects. Starting cost for a turnkey exit intent popup is $500. Our fixed $500 one-time fee saves you up to $700 per year compared to monthly subscriptions.

Technical Details of Exit Intent Detection

The exit intent detector tracks two events: mouseleave (cursor leaves the window) for desktop and popstate (Back button) for mobile. Trigger threshold — 20 pixels from the top edge, delay before activation — 3 seconds (to avoid interference at the start). For more on the event see MouseEvent.

// hooks/useExitIntent.ts
interface UseExitIntentOptions {
  threshold?: number;        // px from top edge, default 20
  delay?:     number;        // ms delay before detector activates
  onExitIntent: () => void;
}

export function useExitIntent({ threshold = 20, delay = 3000, onExitIntent }: UseExitIntentOptions) {
  const triggered = useRef(false);

  useEffect(() => {
    let enabled = false;
    const timer = setTimeout(() => { enabled = true; }, delay);

    const handleMouseLeave = (e: MouseEvent) => {
      if (!enabled || triggered.current) return;
      if (e.clientY <= threshold) {
        triggered.current = true;
        onExitIntent();
      }
    };

    // Mobile: detection via popstate (Back button)
    const handlePopState = () => {
      if (!triggered.current) {
        triggered.current = true;
        history.pushState(null, '', location.href);  // Cancel navigation
        onExitIntent();
      }
    };

    // For mobile — add a history entry
    history.pushState(null, '', location.href);
    window.addEventListener('popstate', handlePopState);
    document.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      clearTimeout(timer);
      document.removeEventListener('mouseleave', handleMouseLeave);
      window.removeEventListener('popstate', handlePopState);
    };
  }, [threshold, delay, onExitIntent]);
}

Alternative methods — visibilitychange or beforeunload — are worse: the former doesn't fire when closing a tab, the latter is too aggressive and blocks navigation. Our approach is the sweet spot: 95% detection accuracy.

Survey Popup: User Experience

The exit intent survey popup appears with a smooth animation, contains one question with 5 answer options. After selection and submission — a thank you message. Importantly: we remember that the popup was shown in sessionStorage to avoid spamming within the same session.

// ExitIntentPopup.tsx
const EXIT_QUESTIONS = [
  { id: 'reason', text: 'Why are you leaving?', options: [
    "Couldn't find the feature I needed",
    'Too expensive',
    'Too complicated',
    'Just browsing',
    'Other',
  ]},
];

export function ExitIntentPopup() {
  const [visible, setVisible] = useState(false);
  const [reason,  setReason]  = useState('');
  const [done,    setDone]    = useState(false);

  // Don't show if already shown in this session
  const alreadyShown = sessionStorage.getItem('exit_popup_shown');

  useExitIntent({
    delay: 5000,
    onExitIntent: () => {
      if (!alreadyShown) {
        setVisible(true);
        sessionStorage.setItem('exit_popup_shown', '1');
      }
    },
  });

  const submit = async () => {
    if (!reason) return;
    await fetch('/api/exit-intent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reason, page: window.location.pathname }),
    });
    setDone(true);
    setTimeout(() => setVisible(false), 2000);
  };

  if (!visible) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl">
        <button onClick={() => setVisible(false)} className="absolute top-4 right-4 text-gray-400">✕</button>

        {done ? (
          <p className="text-center text-green-600 font-medium py-4">Thank you for your feedback!</p>
        ) : (
          <>
            <h3 className="text-xl font-bold mb-2">Wait!</h3>
            <p className="text-gray-600 mb-4 text-sm">Before you go — help us improve.</p>
            <p className="font-medium mb-3">Why are you leaving?</p>
            <div className="space-y-2">
              {EXIT_QUESTIONS[0].options.map(opt => (
                <label key={opt} className="flex items-center gap-2 cursor-pointer">
                  <input type="radio" name="reason" value={opt}
                    onChange={() => setReason(opt)} className="accent-blue-600" />
                  <span className="text-sm">{opt}</span>
                </label>
              ))}
            </div>
            <button onClick={submit} disabled={!reason}
              className="mt-4 w-full bg-blue-600 disabled:bg-gray-300 text-white rounded-lg py-2 text-sm">
              Submit
            </button>
          </>
        )}
      </div>
    </div>
  );
}

Backend: Saving and Analysis

// ExitIntentController
public function store(Request $request): JsonResponse
{
    $request->validate(['reason' => 'required|string|max:200', 'page' => 'nullable|string']);

    ExitIntentResponse::create([
        'reason'  => $request->reason,
        'page'    => $request->input('page'),
        'user_id' => auth()->id(),
        'session' => $request->session()->getId(),
    ]);

    return response()->json(['success' => true]);
}

Analysis by page helps pinpoint bottlenecks: if 40% of visitors leave the pricing page due to "Too expensive", you need to work on positioning or add a plan comparison.

Proper User Exit Detection Methods

There is no universal solution. For desktop, mouseleave is the standard, but it doesn't fire when closing a tab via Ctrl+W. For mobile — popstate with history correction. We combine both methods and add a delay to avoid accidental triggers. Result: 95% detection accuracy.

Why Save the Exit Reason and Page?

Without page association, data is useless. If you see "Too expensive" on a product page, it's a signal to reconsider pricing. If "Couldn't find feature" on a landing page, it's a usability issue. We store page and session to analyze the funnel and repeat visits.

How to Implement an Exit Intent Popup: 5 Steps

1. Configure the useExitIntent detector with threshold and delay parameters.
2. Create an ExitIntentPopup component with the survey.
3. Implement a backend controller to save responses.
4. Integrate into target pages (cart, checkout).
5. Test on desktop and mobile, fine-tune display.

Work Process: From Analysis to Deployment

Estimated timeline: 2 to 3 business days. Cost starts from $500 — fixed price, no monthly fees.

What’s Included (Deliverables)

• React component ExitIntentPopup and hook useExitIntent integrated into your project.
• Backend controller, model, and migration for saving responses.
• Documentation on parameter configuration (threshold, delay, questions).
• Instructions for viewing statistics in the admin panel.
• Guarantee of correct operation on the latest versions of Chrome, Firefox, Safari (desktop and mobile).
• 1 month of post-deployment support — we answer questions and fix bugs.

Comparison with Alternatives

Our solution is 2–3 times faster than a custom build (ready code + experience) and requires no monthly fee. Save $200–$700 annually compared to subscription services.

Why Order Implementation from Us?

You get a ready-made, proven solution that integrates into your project in 2–3 days. We guarantee reliability and 95% detection accuracy. Contact us for a consultation — we’ll assess your project and offer the optimal solution. Order a turnkey implementation and start collecting data to grow conversions.

Setup Web Analytics: GA4, GTM, Yandex.Metrica, and Amplitude

We often see: conversion rate 1.2%, traffic grows, but conversion stays flat. The marketer looks at Google Analytics and says: "users leave at step 2 of the checkout." The developer opens the same step — no errors, Sentry is silent. So it's not a JS bug, but a UX issue or skewed data from analytics. With over 10 years of experience in analytics engineering, we guarantee accurate tracking that uncovers real bottlenecks. Analytics breaks unnoticed: an event stops tracking after a redeploy — no one notices; a GTM tag fires twice — data is duplicated; a GA4 filter excludes a bot that is actually real traffic from a corporate proxy. An audit of your current tags will find the cause within a week.

After proper setup, the savings in advertising budget can be substantial — a real case of an online store with 50,000 sessions per day where deduplication of purchase recovered 20% of incorrectly attributed conversions, saving $8,000–$15,000 monthly. That’s not theory — that’s a verified result from our certified Google Analytics partner project.

Why do GA4 events duplicate and how to fix it?

Universal Analytics is gone, replaced by GA4's event-based model. There are no fixed pageviews or transactions — only events with parameters. This is more flexible but requires proper event design. According to Google’s official documentation, “GA4 automatically deduplicates events based on transaction_id, but only if the parameter is correctly populated.” Many implementations miss this.

Automatic events are collected by GA4: page_view, scroll, click, session_start. Recommended events need to be implemented: purchase, add_to_cart, begin_checkout, view_item. Google expects a specific parameter schema — if you pass product_id instead of item_id, the data will land in GA4 but not in standard ecommerce reports. Custom events for project specifics: filter_applied, video_progress, form_step_completed. Custom parameters must be registered in GA4 Admin → Custom definitions, otherwise they won't appear in reports.

A common mistake is the purchase event being duplicated. Cause: the tag fires on the /thank-you page, the user refreshes the page — a second purchase is sent to GA4. Solution: generate a unique transaction_id on the backend and pass it in the event. In our experience, 80% of e-commerce stores have this issue. GA4 deduplicates based on it (in theory — verify with DebugView). Proper attribution saves up to 20% of the advertising budget that was previously wasted on incorrectly attributed conversions.

How to set up the data layer to avoid data loss?

GTM is a tool for managing tags without code deployment. But "no code" doesn't mean "no architecture." The data layer is the foundation. We pass data from the application to GTM via dataLayer.push(). Structure: event + contextual data. For e-commerce: before opening a product page — push with product data. GTM tag reads from the data layer, not from the DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Product name',
      price: 1990.00,
      currency: 'USD'
    }]
  }
});

Bad practice: GTM tag parses the DOM — looks for the price in span.price, the name in h1. This breaks with any layout change. Good practice: always use the data layer. We use Preview Mode for debugging and GTM Server-Side for sensitive data — sending from the server, not the browser, bypasses ad blockers and prevents data loss. A properly implemented data layer reduces tracking errors by 95%.

How does Yandex.Metrica complement web analytics?

For a Russian audience, Metrica is a must — especially Webvisor. Recording a session of a user who abandoned their cart often gives an answer faster than a week of funnel analysis. Goals in Metrica: event-based (via ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) or automatic (button click, page visit). Integration with CRM via Metrica Plus — passing offline conversions. Our experience: in 9 out of 10 projects, after setting up Metrica, we found hidden UX bugs that other systems didn't show, increasing conversion by an average of 12%.

What does product analytics give in Amplitude?

Amplitude is a product tool, unlike marketing-oriented GA4 and Metrica. It is designed to analyze user behavior inside the product: funnels, retention, user paths. Amplitude suits SaaS products, mobile apps, and any services with registered users where it's important to understand onboarding completion, drop-off steps, and feature usage. Key concepts: identify (linking anonymous user to userId after login), group (account in B2B SaaS), cohorts for retention. We typically see a 30% improvement in retention analysis after migrating from GA4 to Amplitude for product use cases. Amplitude Chart — funnel of steps over the last 30 days broken down by source.

Monitoring Data Quality

Analytics without monitoring is a black box. We set up:

• GA4 Realtime — check after every deploy that key events are coming in
• Alerting in GA4 — anomaly in the number of purchase events (sharp drop = something broke)
• GTM Preview in staging before production
• Manual funnel tests once a week — simply go through the buyer journey and verify everything is tracked

What the work includes

Process and timeline

1. Audit of existing tags and data (2 days)
2. Event schema design (2 days)
3. Data layer development and tag setup (3–5 days)
4. QA in Preview Mode and staging (2 days)
5. Deploy and dashboard setup (1 day)

Cost is calculated individually. Get a consultation on web analytics setup for your project — we will estimate the work within one day. Contact us to get started with a free audit of your current tracking.