Analytics

Track page views, searches, and other user interactions with the Quotient analytics API

Overview

The analytics API tracks user interactions on your site. Events are sent via the Beacon API by default for reliability during page unloads.

All events automatically include timestamp, device ID, session ID, browser fingerprint, person ID (if identified), and client context.

Endpoint	API Key	Server SDK	Client SDK
Track event	public or private	`analytics.event()`	`analytics.event()`

Track Event

`analytics.event(params)`

POST /api/v0/analytics

Auth: public or private key · scope: ANALYTICS_WRITE

Param	Type	Required	Description
`eventType`	`"pageView" \| "search"`	Yes	Type of event to track
`searchQuery`	`string`	For search events	The search query string
`pathname`	`string`	No	Defaults to `window.location.pathname`
`pageUrl`	`string`	No	Defaults to `window.location.href`

// Page view
await client.analytics.event({
  eventType: "pageView",
});

// Search
await client.analytics.event({
  eventType: "search",
  searchQuery: "winter jackets",
});

Returns: void

Auto-Tracking with React

The easiest way to track page views is to enable auto-tracking on the QuotientProvider. This tracks a page view on mount automatically.

<QuotientProvider
  clientOptions={{ apiKey: "pk_your_public_api_key" }}
  autoTrackPageViews={true}
>
  <YourApp />
</QuotientProvider>

See the React SDK article for full provider setup. For manual tracking, use client.analytics.event() via the useQuotient() hook.

Common Patterns

Debounced Search Tracking

import { debounce } from "lodash";

const trackSearch = debounce(async (query) => {
  if (query.length > 2) {
    await client.analytics.event({
      eventType: "search",
      searchQuery: query,
    });
  }
}, 500);

function SearchBar() {
  const handleSearch = (e) => {
    const query = e.target.value;
    setSearchQuery(query);
    trackSearch(query);
    performSearch(query);
  };

  return <input onChange={handleSearch} />;
}

Page View Tracking in a SPA

If you're not using the React SDK's autoTrackPageViews, you can track route changes manually:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useQuotient } from "@quotientjs/react";

function PageTracker() {
  const location = useLocation();
  const { client } = useQuotient();

  useEffect(() => {
    client?.analytics.event({
      eventType: "pageView",
      pathname: location.pathname,
      pageUrl: window.location.href,
    });
  }, [location, client]);

  return null;
}