Feature engagement shows how often people use a feature from a specific story, based on real interactions like clicks, taps, or other tracked events. Each interaction is counted toward that story's total usage, giving you a clear measure of how the feature is performing.

When usage tracking is set up, Atono adds a usage graph to the story showing:

How many times the feature has been used
Which environments, customers, or locations the usage came from
How usage changes over time

This helps you confirm a feature is getting traction, compare usage before and after changes, and spot when it’s only being used in certain places or by certain customers. And because it’s built into Atono, the graph is visible to your entire product team—not just a select few with access to an external tool.

⚠️
Atono SDK required
To record usage data, your application must send usage events to Atono. This requires installing and initializing the Atono SDK. Once its set up, usage can be tracked by either adding tracking calls in your code or by mapping clicks to stories with the Atono Chrome extension.
After tracking is set up, Atono records each interaction automatically—no manual updates required.

Show the usage graph

Click the Feature engagement (graph) icon in the story header.

The graph is available for any story that:

Is assigned to a team
Is in a workflow step categorized as 'In progress' or 'Done'

Showing or hiding the graph is a personal preference and doesn't affect other users.

📘
Hiding the graph doesn’t stop Atono from collecting usage data. As long as tracking is active, events continue to be recorded in the background.

Note: While a story is in progress, the feature engagement graph appears below the acceptance criteria and any attachments. Once the story is moved to a workflow step categorized as 'Done', the graph moves to the top of the story for easier reference.

Hide feature engagement

If you don't want to see the feature engagement section in a story, you can hide it. Hiding the graph only removes it from your own view—it doesn’t stop tracking or delete any usage data.

In the Feature engagement section header, click Settings.
In the Feature engagement dialog, click Hide feature engagement.

Interpret the feature engagement graph

The feature engagement graph shows how often users interact with a story’s feature over time. Each line represents a different environment (such as sandbox, test, or production), so you can compare usage patterns across deployment stages.

You can filter usage data by environment, customer, or location—individually or in combination—to focus on the segments that matter most.

When you first open the graph, it defaults to showing usage over the last 3 months.

View usage details

Hover over the graph to see usage counts for a point in time or date range.

A vertical line will appear to highlight the selected period, along with a breakdown of usage counts by environment, customer, or location (depending on your filters).

Adjust the timeframe

Use the dropdown above the graph to show data for any period between 1 and 60 months. The graph’s resolution adjusts automatically based on the selected range:

For timeframes under 1 year, the graph shows daily usage counts
For timeframes over 1 year, the graph shows weekly usage counts

To keep the graph easy to read, Atono limits the total number of data points (up to ~400).

Filter by environment

Show or hide usage from specific environments by toggling them in the legend below the graph. You can select multiple environments to compare them. The default view shows the last environment listed on the Environments page.

Filter by customer

Filter usage by one or more customers. Enter values or pick from suggestions based on reported usage. For more information, see the Customer attribute operators table.

Operators:

is / is not — exact match to a single customer identifier
contains / does not contain — partial match to a customer identifier
is one of / is not one of — match against multiple identifiers

Filter by location

Filter usage by location. Enter or select continent, country, subregion, or state/province names. For more details, see the Location attribute operators table.

Operators:

is in — include selected locations
is not in — exclude selected locations

Clear usage data

Reset the graph when you want a fresh baseline—after a major change, refactor, or to clear out irrelevant data. Clearing usage data removes all past counts for everyone who can view the story. This action is permanent and can't be undone.

If tracking is still active, new usage will appear as soon as users interact with the feature again—whether events are being recorded in your code or captured through mapped clicks in the Atono Chrome extension.

In the Feature engagement section header, click Settings.
Select Clear data.
In the Clear usage data dialog, confirm by clicking Clear usage data, or click X to cancel.

Set up usage tracking

The usage graph only shows data if your application sends usage events to Atono. This requires installing and initializing the Atono SDK.

Once the SDK is in place, you can set up usage tracking in one of two ways:

Instrument your code – Add record() calls where features run. This approach is most flexible and is typically handled by a developer.
Use the Atono hrome extension – Map real user interactions (clicks) to stories directly from your browser, without changing code. This is often used by product managers or QA. For details, see Map clicks to stories.

Regardless of which option you choose, each interaction is sent to Atono as a usage event and added to the story’s usage graph. Usage is tracked at the story level, using the story’s unique ID (for example, STORY-67).

🚧
Usage tracking requires the SDK to run in your app’s client-side code (the part that runs in the browser). Server-side SDKs aren’t supported for tracking usage events, and the Atono Chrome extension won’t work unless the client-side SDK is installed and initialized.

1. Install the SDK

Version 1.1.0 or later is required.

Run the following command in your project directory:

Client-side applications

npm install --save @atono-io/web-sdk

React applications

npm install --save @atono-io/react-sdk

2. Initialize the SDK

Connect the SDK to your Atono environment using your environment key.

You can optionally include customer context if you want to segment usage by that field in the graph. Location is detected automatically from the user's IP address and can represent a continent, country, subregion, or state/province.

Client-side example

import { Atono } from '@atono-io/web-sdk';

const atono = Atono.fromEnvironmentKey('<your-environment-key>');

// Optional: include 'customer' to enable segmentation by this field in the usage graph
await atono.setContext({
  customer: 'Virtual Vintage',
  // location is detected automatically from IP
});

React example

import { AtonoProvider } from '@atono-io/react-sdk';

<AtonoProvider
  environmentKey="<your-environment-key>"
  // Optional: include 'customer' to enable segmentation by this field in the graph
  evaluationContext={{
    customer: 'Virtual Vintage',
    // location is detected automatically from IP
  }}
>
  {children}
</AtonoProvider>

⚠️
Updating context
You can update context later (for example, when the active customer changes). Do this before calling record('STORY-ID') so the event includes the latest values.
Set the environment key once per user session—reinitializing the SDK can briefly clear context, which may cause missing data in usage events.

3. Choose how to track usage

Once the SDK is installed and initialized, decide how you want to capture usage events:

Option A - Track usage in code

This is the step that connects the feature to its story in Atono. Call record() when a user interacts with the feature. This logs a usage event tied to the current environment and story.

Once tracking is in place, each time the tagged feature is used, the SDK sends an event to Atono. The event is tagged with the environment (and customer/location if available) and timestamped. The story’s usage graph updates automatically.

Client-side example

const usage = atono.getUsageReporter();

button.addEventListener('click', () => {
  usage.record('STORY-67');
});

React example

import { useUsageReporter } from '@atono-io/react-sdk';

function TryButton() {
  const { record } = useUsageReporter();

  return (
    <button onClick={() => record('STORY-67')}>
      Try the feature
    </button>
  );
}

Option B - Map clicks with the Atono Chrome extension

If you don’t want to add tracking calls in your code, you can use the Atono Chrome extension to capture real user interactions and associate them with stories.

This method still requires the SDK to be installed in your application, but once that’s done, product managers, QA, or other non-developers can set up usage tracking themselves—no code changes needed.

Troubleshooting

Customer not showing in the graph? Make sure customer is in the SDK context before you call record(). In React, don’t change the environmentKey or re-mount <AtonoProvider> during renders—update context only.

Location not showing or seems wrong? Location is detected automatically from the user’s IP (continent → country → region/state). If it’s missing or unexpected, check that events come from client-side code (not server-side), and be aware VPNs/proxies can map to a different region.

Context shows up intermittently? This usually happens if the SDK is reinitialized. Keep the environment key fixed for the session and set the customer context before calling record().

No data at all? Make sure usage tracking is fully set up before troubleshooting further. Check the following:

The Atono SDK (v1.1.0 or later) is installed and initialized in your application — the Atono Chrome extension cannot track usage without it.
A valid story ID is being recorded (for example, STORY-67) either through record() calls or through mapped clicks in the Atono Chrome extension.
The correct environment key is used.
The story is assigned to a team and in an In progress or Done workflow step.
Your selected date range isn’t excluding recent activity.
Filters aren’t hiding the data you expect to see.