Skip to content

Track product analytics

Goal: understand how people use your product: which features they use, where they drop off, and how that connects to your backend and AI features. Time: about 10 minutes. You need: your app's root layout and a way to read the current user's ID.

Product analytics uses the same tracker as website analytics, added once in your app's root layout. Two things are different:

  1. Product mode (data-pa="true") keeps a lasting visitor identity inside your app, which you need to follow a signed-in user across sessions.
  2. Your own IDs (data-cid and data-app-session) tie each event to your user and session, so you can join it with server-side events and AI traces.
%%{init: {"flowchart": {"curve": "linear"}}}%%
graph LR
    A["Root layout<br/>tracker with data-pa, data-cid"] --> E["Website / Advertising<br/>endpoint"]
    B["Your backend<br/>events with the same user ID"] --> F["Generic / Custom HTTP<br/>endpoint"]
    C["Your AI features<br/>Anosys SDK, same user ID"] --> G["OpenTelemetry / AI Agents<br/>endpoint"]
    E --> H["One user journey<br/>in dashboards"]
    F --> H
    G --> H

Step 1. Create an endpoint and copy the component

  1. Create an endpoint of type Website / Advertising Tracker for your app (keep it separate from your marketing site).
  2. In Collecting → Integration Options → Impression, choose Next.js, React or Raw HTML and copy the snippet.

Step 2. Add it once to your root layout, with product mode and your IDs

Save the copied component (for example as components/ImpressionPixel.js) and render it once in your root layout. Pass your signed-in user's ID and your own session ID:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// app/layout.js
import ImpressionPixel from "@/components/ImpressionPixel";

export default function RootLayout({ children }) {
  const user = getCurrentUser();            // your auth helper
  return (
    <html lang="en">
      <body>
        {children}
        <ImpressionPixel cid={user?.id ?? ""} appSession={user?.sessionId ?? ""} />
      </body>
    </html>
  );
}

Then add data-pa="true" to the <Script> element inside the copied component.

Render the copied component once in your top-level App:

1
<ImpressionPixel cid={user?.id ?? ""} appSession={sessionId} />

Inside the copied component, add script.setAttribute('data-pa', 'true'); next to the other attributes.

1
2
3
4
5
6
7
8
<script
  async
  src="https://console.anosys.ai/scripts/imp-latest.min.js"
  data-anosys-key="YOUR_WORKSPACE/a/YOUR_ENDPOINT"
  data-pa="true"
  data-cid="USER_ID"
  data-app-session="APP_SESSION_ID"
></script>

Use opaque IDs

Pass an internal user ID, not an email address or name. If you need to show emails in reports, map them on your side.

Result: sign in to your app and click around. The endpoint's activity graph shows calls within a minute.

Step 3. Name the things you care about

Click tracking works automatically on links and buttons. For the actions that matter to you (for example Create project or Upgrade), give the element a stable name so reports stay readable when the text changes:

1
<button data-anosys-id="create-project">New project</button>

Put these attributes on your shared components so every screen that uses them is covered. Add data-anosys-section to larger areas (for example data-anosys-section="billing") to group clicks by area.

Step 4. Connect backend and AI events

Send the same user ID with your server-side events and AI traces, and every view in Anosys can follow one user from click to API call to model response:

  • Backend events: send cvs1=<user id> (or any custom field you map to user_id) to a Generic / Custom HTTP endpoint. See Send any data.
  • AI features: pass the user and session through get_user_context in the Anosys SDK. See Debug AI agents.

Then name the field user_id in Collecting → Field Mapping on each endpoint.

Step 5. Build your views

  • Dashboards → Templates for ready-made dashboards you can deploy and adjust.
  • Visualizations → Funnel Plot for sign-up or activation funnels.
  • AI Assistant to ask questions such as "Which features did users who upgraded last week use first?"

A Funnel Plot from visits to sign-ups, activation and paid plans:

Funnel Plot from website visits to sign-ups, activation and subscription

Website mode vs product mode

Website mode (default) Product mode (data-pa="true")
Best for Public marketing pages Signed-in apps
Visitor identity Lasting only when consent allows Lasting within your app
Your user and session IDs Optional Recommended

Product mode asks the browser to keep the visitor identity regardless of banner choices, on the basis that your app has its own terms with the user. Check that this fits your privacy policy before you turn it on.

Next steps