# SaaS app examples

> Concrete ClickClacks examples inside a SaaS app: is anyone using a feature, who uses it for the first time and how long it takes them, which plans use it, whether they keep using it, and which buttons get clicked on a screen.

- Canonical URL: https://clickclacks.io/docs/examples/saas-app
- Section: Examples
- Last updated: 2026-09-26

Inside app.acme.com, the questions are about features: is anyone using the new export, who tried it for the first time this week, do they come back to it, and which buttons on the deals screen get clicked at all.

These examples assume the app has its own **Web app** source and calls [identify](https://clickclacks.io/docs/identify.md) after sign-in, with the plan as a trait:

```js title="session.js"
// After sign-in, once you know who it is.
window.clickclacks?.('identify', user.id, { plan: user.plan })
```

With identify in place, every report can split by **Person property** `plan`, and a person who uses the app on two devices is one person.

## Is anyone using the new export, and on which plans? {#feature-used}

### Fastest: autocapture, for the click {#feature-used-fast}

If _Export_ is a button, each click is a `$click` with **Clicked text** `Export` and the screen’s **Page**. That counts people who pressed it, not exports that worked, and it breaks when the label changes.

### Precise: an event named for the outcome {#feature-used-precise}

```js title="export.js"
// Where the export has actually been created, not where the button is clicked.
async function exportReport(format) {
  const file = await api.post('/reports/export', { format })
  window.clickclacks?.('event', 'Report exported', {
    format,                          // 'csv' or 'pdf'
    rows: file.rowCount,             // a number, so Insights can sum or average it
  })
  return file
}
```

Send it where the export succeeds. From your backend is even better, because it counts exports made through your API too. See [server-side tracking](https://clickclacks.io/docs/server-side.md) and use the same user ID you identify with in the browser.

### Read the answer {#feature-used-read}

1. Open [Events](https://clickclacks.io/docs/guides/events.md), pick `Report exported` under **Select event**, and set **Last 30 days**.
2. Read **Feature adoption**: **Occurrences**, **Unique people** and **Uses per person**, by Day or Week.
3. Choose **Break down by** › `format` to see CSV against PDF.
4. For plans, go to [Insights](https://clickclacks.io/docs/guides/insights.md): chart `Report exported` as **Unique people**, **Weekly**, then **Add breakdown** › **Person property** › `plan`.

> **What you should see**
>
> How many people export each week, how often each one does it, and which plans they’re on. For the share of active people, add series A as **Any event**, **Unique people**, and the formula `B / A * 100`.

## Who used it for the first time this week, and how long did it take them? {#first-time}

### No extra code {#first-time-fast}

ClickClacks already knows each person’s first time, so the `Report exported` event from above is all you need. There is no need to send a “first time” property.

### Read the answer {#first-time-read}

1. Open **People** › **Segments** and click **New segment**.
2. Add **did for the first time** `Report exported`, **in the last** 7 days. The live preview says how many people match. Save it as _New exporters_.
3. Open the segment to see its **size over time**, or pick it under **People** in the filter bar of any report to count only them.
4. For time to first use, build a funnel `Signed up` → `Report exported` with a **30 days** window, and read **Median time to convert**.

> **What you should see**
>
> The number of people who exported for the first time in the past week, and the typical time from sign-up to their first export. The funnel’s **Time to convert** view shows how many get there within a day, a week or longer.

## Do people keep using it after the first time? {#kept-using}

1. In [Retention](https://clickclacks.io/docs/guides/retention.md), click **Edit definition**.
2. Set both the starting and the returning event to `Report exported`. Choose **Came back in that week**, or **Came back every week since** for a strict answer. Apply.
3. Keep **Weekly** cohorts and read the **Week 1 retention** card and the curve.
4. Use **Break down by** to split cohorts by an event property, such as **Device**.

> **What you should see**
>
> A curve that flattens means the feature has a core of regular users. One that sinks towards zero means people try it once and don’t come back.

## Which buttons on the deals screen get clicked? {#buttons}

### Fastest: autocapture {#buttons-fast}

Every button and link click on the screen is already a `$click` with its label (**Clicked text**, up to 40 characters), its tag, its `id` and first two classes, and a short selector. Icon-only buttons have no text, and an `aria-label` isn’t captured, so give them an `id`: it arrives as **Clicked element ID**.

### Read the answer {#buttons-read}

1. Open [Heatmaps](https://clickclacks.io/docs/guides/heatmaps.md), pick the _Web app_ source and the deals page. Pages with IDs in the address are grouped, so `/deals/481` and `/deals/913` are one page, `/deals/*`.
2. Choose **Elements**: every clicked element with its selector, share of clicks, clicks, dead clicks and rage clicks.
3. For a trend, go to **Insights**: chart `$click` as **Unique people**, **Where** **Page** _contains_ `/deals/`, then **Add breakdown** › **Event property** › **Clicked text**, **Top 25**, as a **Table**.
4. Pick the _Web app_ source in the filter bar so the marketing site’s clicks stay out.

> **What you should see**
>
> The buttons people rely on, and the ones nobody touches. For the actions that matter, such as creating or closing a deal, send a named event like `Deal created` instead of reading clicks. Clicks show intent, events show what happened.

## Related {#related}

- [All examples](https://clickclacks.io/docs/examples.md)
- [Design a tracking plan](https://clickclacks.io/docs/walkthroughs/tracking-plan.md): Which events a SaaS product needs.
- [Segments](https://clickclacks.io/docs/guides/segments.md): Every condition, including first time.
- [Recipes](https://clickclacks.io/docs/guides/recipes.md): More questions, answered in the reports.