# 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](/content/docs/datafast-filters/index.html) 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](/content/docs/scroll-tracking/index.html) to **track scroll depth** and DataFast funnels to **see where visitors drop off and improve conversion rates.**

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`.

```
<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](/content/docs/scroll-tracking/index.html).

### Create the funnel

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.

### 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](/content/docs/custom-goals/index.html) to track these actions from either client-side or server-side (using the [DataFast API](/content/docs/api-introduction/index.html)).

```javascript
// (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](/content/docs/revenue-attribution-guide/index.html), 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](/content/docs/custom-goals/index.html) not just page views
- **Review regularly** and optimize the biggest drop-offs first
- **Combine with [filters](/content/docs/datafast-filters/index.html)** to analyze specific user segments

Something missing? [Suggest features](https://feedback.datafa.st/) ✍️