Our analytics tracking system allows you to track custom client-side events and properties to better understand your users’ behavior. Integration is simple and requires only a few lines of code.

See the connect-react example application for the full end-to-end source code.

​

Usage

The React TDK’s analytics API is built on top of the core TDK’s analytics API. By passing in additional options to the TreasureProvider components, the useTreasure hook will return allow you to use the trackCustomEvent method to interact with Darkmatter API.

​

Provider with AnalyticsOptions

To use the React Analytics API, you will need to pass in an AnalyticsOptions object to the TreasureProvider component. These are the same parameters that you would pass to the core TDK’s AnalyticsManager class.

import { TreasureProvider } from "@treasure-dev/tdk-react";

<TreasureProvider
    ...
    analyticsOptions={{
        apiUri: "{DATA_PLATFORM_URL}",
        apiKey: "{X-API-Key}",
        appInfo: {
            // bundle/package name of ap e.g. lol.treasure.tdkjs
            app_identifier: "YOUR_APP_IDENTIFIER",
            // version of app e.g. 0.0.1,
            app_version: "YOUR_APP_VERSION",
            // 0 for dev, 1 for prod
            app_environment: 0,
        },
        cartridgeTag: "YOUR_CARTRIDGE_TAG",
    }}
>

​

Track events

Track a custom event with the trackCustomEvent method exposed by the useTreasure hook.

import { useTreasure } from "@treasure-dev/tdk-react";

const { trackCustomEvent } = useTreasure();

const result = await trackCustomEvent({
  name: "test-click",
  properties: { test: "test-value" },
});
console.log(`Successfully tracked custom event: ${result}`);

The trackCustomEvent method accepts an AnalyticsEvent object with the following properties:

type AnalyticsEvent = {
  name: string;
  userId?: string;
  address?: string;
  properties: {
    [key: string]: PropertyValue | PropertyValue[];
  };
};