Source: https://datafa.st/docs/conversion-funnels
Markdown source: https://datafa.st/docs/conversion-funnels.md
Description: Create multi-step funnels to visualize visitor journeys, identify bottlenecks, and optimize conversion rates.

# Track conversion funnels

Conversion funnels help you visualize visitor journeys through multiple steps to **identify bottlenecks and optimize conversion rates.** Track where visitors drop off and understand what drives successful conversions.


## DataFast funnel features

- **Interactive insights** - Hover over any step to see detailed conversion metrics
- **Revenue attribution** - See revenue generated at each funnel step
- **Top sources and countries** - Understand which traffic performs best at each step
- **Filtering** - Use [filters](/docs/datafast-filters) to analyze specific user segments (referrer, device, etc.) or time periods

## Example 1: Landing page scroll depth funnel

Track how visitors engage with your landing page by measuring scroll depth to key sections. We use DataFast's [scroll tracking](/docs/scroll-tracking) to **track scroll depth** and DataFast funnels to **see where visitors drop off and improve conversion rates.**

![Scroll depth funnel example](/blog-funnel-scroll-depth.jpg)

> Your hero section is where most of visitors drop off. You can improve it by tweaking your headline.

### Setup the scroll depth tracking

In this example, we assume we have 4 sections in our landing page: hero, features, pricing, and cta.

We add a `data-fast-scroll` attribute to each section after the hero section. The value of the attribute is the name of the goal we want to track. For example, `scroll_to_features`, `scroll_to_pricing`, and `scroll_to_cta`.

```html
<main>
  <section id="hero" className="min-h-screen">
    <h1>Welcome to our product</h1>
    <p>Amazing features await...</p>
  </section>

  <section id="features" className="min-h-screen" data-fast-scroll="scroll_to_features">
    <h2>Features</h2>
    <div>Feature list...</div>
  </section>

  <section id="pricing" className="min-h-screen" data-fast-scroll="scroll_to_pricing">
    <h2>Pricing</h2>
    <div>Pricing cards...</div>
  </section>

  <section id="cta" className="min-h-screen" data-fast-scroll="scroll_to_cta">
    <h2>Ready to get started?</h2>
    <button data-fast-goal="cta_clicked">
      Get Started
    </button>
  </section>
</main>
```

For advanced usage, refer to the [scroll tracking documentation](/docs/scroll-tracking).

### Create the funnel

![DataFast funnel example](/blog-funnel-scrol-depth-funnel.jpg)

At the bottom of your DataFast dashboard:

1. Click **"+ Funnel"** and name it "Landing page engagement"
2. Add these steps:
   - **Step 1 (Page visit)**: URL equals `/` (your landing page)
   - **Step 2 (Goal)**: `scroll_to_features` completed
   - **Step 3 (Goal)**: `scroll_to_pricing` completed  
   - **Step 4 (Goal)**: `scroll_to_cta` completed
   - **Step 5 (Goal)**: `cta_clicked` completed

This funnel shows you exactly where visitors lose interest and which sections drive the most engagement.

## Example 2: SaaS onboarding funnel

Track the complete customer journey from landing page visit, to starting a free trial, to paid conversion.

![SaaS onboarding funnel example](/blog-funnel-saas-onboarding.jpg)

### Setup the goals

Track any meaningful actions your visitors take, like creating a project, inviting a team member, or initiating a checkout. Use DataFast's [custom goals](/docs/custom-goals) to track these actions from either client-side or server-side (using the [DataFast API](/docs/api-introduction)).

```jsx
// (client-side tracking example)
// On signup completion page or component
useEffect(() => {
  if (signupCompleted) {
    window?.datafast('signup', {
      name: "Elon Musk",
      email: "musk@x.com",
    });
  }
}, [signupCompleted]);

// OR (server-side tracking example)
// calling DataFast API in your backend
const handler = async (req, res) => {
  const datafast_visitor_id = req.cookies.datafast_visitor_id;

  try {
    const response = await fetch("https://datafa.st/api/v1/goals", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${DATAFAST_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        datafast_visitor_id: datafast_visitor_id,
        name: "newsletter_signup",
        metadata: {
          name: "Elon Musk",
          email: "musk@x.com",
        }
      }),
    });

    res.status(200).send("Goal tracked");
  } catch (error) {
    res.status(500).send("Failed to track goal");
  }
};  
```

> If you've [attributed revenue](/docs/revenue-attribution-guide), DataFast will automatically track `payment` and `free_trial` goals.

### Create the funnel

In your DataFast dashboard:

1. Click **+ Funnel** and name it "SaaS onboarding flow"
2. Add these steps:
   - **Step 1 (Page visit)**: URL equals `/` (landing page)
   - **Step 2 (Goal)**: `signup` completed
   - **Step 3 (Goal)**: `first_action` completed
   - **Step 4 (Goal)**: `free_trial` completed  
   - **Step 5 (Goal)**: `payment` completed

This funnel reveals:
- **Landing page effectiveness** - How many visitors convert to signups
- **Onboarding success** - How many signups take meaningful actions
- **Trial conversion** - How many active users start trials
- **Payment conversion** - Your ultimate conversion rate to paid customers


## Best practices

- **Start simple** with 2-3 key steps, then add complexity
- **Name steps clearly** so you can easily understand your data
- **Track meaningful actions** with [custom goals](/docs/custom-goals) not just page views
- **Review regularly** and optimize the biggest drop-offs first
- **Combine with [filters](/docs/datafast-filters)** to analyze specific user segments