The Formo Web SDK is open source and implements the standard Events API.

​
Installation

Install the JavaScript SDK via CDN or NPM.

npm install @formo/analytics --save

// App.tsx (or App.js)

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { FormoAnalyticsProvider } from '@formo/analytics';
  import App from './App';

  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

  root.render(
    <React.StrictMode>
      <FormoAnalyticsProvider writeKey="<YOUR_WRITE_KEY>">
        <App />
      </FormoAnalyticsProvider> 
    </React.StrictMode>
  );

// Usage on a page component

import React, { useEffect } from 'react';
  import { useFormo } from '@formo/analytics';

  const HomePage = () => {
    const analytics = useFormo();

    useEffect(() => {
      // Track a custom event
      analytics.track('Swap Completed', { points: 100 });
    }, [analytics]);

    return <div>Welcome to the Home Page!</div>;
  };

  export default HomePage;

​
Code examples

Check out working examples of Formo on Github:

Example Next.js app

A working example of Formo in a Next.js app.

Example React app

A working example of Formo in a React app.

​
Autocapture

The Web SDK automatically captures common events such as page views and wallet events (connect, disconnect, signature, transaction, etc) with full attribution (referrer, UTM, referrals.)

You do not need to configure anything to track these events.

​
Identify users

Call identify() after a user connects their wallet or signs in on your website or app:

analytics.identify({ address });

OR

window.formo.identify(...);

If no parameters are specified, the Formo SDK will attempt to auto-identify the wallet address.

​
Track events

Track user actions by calling the SDK track() function:

import { useFormo } from '@formo/analytics';

const analytics = useFormo();

analytics.track("Position Opened",  // event name
  {
    pool_id: "LINK/ETH",
    revenue: 99.99,     // revenue
    currency: "USD",    // currency
    points: 99.99        // points for XP or rewards
  }
)

OR 

window.formo.track(...)

​
Configuration

​
Local testing

The SDK skips tracking in localhost by default. To enable tracking locally during development, set trackLocalhost to true:

<AnalyticsProvider
    writeKey={WRITE_KEY}
    options={{
        trackLocalhost: true,
    }}
>

​
Logging

Control the level of logs the SDK prints to the console with the following logLevel settings:

<AnalyticsProvider
    writeKey={WRITE_KEY}
    options={{
        logger: {
            enabled: true,
            levels: ["error", "warn", "info"],
        },
    }}
>

​
Batching

To support high-performance environments, the SDK sends events in batches.

<AnalyticsProvider
    writeKey={WRITE_KEY}
    options={{
        flushAt: 20, // defaults to batches of 20 events
        flushInterval: 1000 * 60, // defaults to 1 min
    }}
>

Customize this behavior with the flushAt and flushInterval configuration parameters.

Log LevelDescription
traceShows the most detailed diagnostic information, useful for tracing program execution flow.
debugShows all messages, including function context information for each public method the SDK invokes.
infoShows informative messages about normal application operation.
warnDefault. Shows error and warning messages.
errorShows error messages only.

The Formo Web SDK is open source and implements the standard Events API.

​
Installation

Install the JavaScript SDK via CDN or NPM.

npm install @formo/analytics --save

// App.tsx (or App.js)

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { FormoAnalyticsProvider } from '@formo/analytics';
  import App from './App';

  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

  root.render(
    <React.StrictMode>
      <FormoAnalyticsProvider writeKey="<YOUR_WRITE_KEY>">
        <App />
      </FormoAnalyticsProvider> 
    </React.StrictMode>
  );

// Usage on a page component

import React, { useEffect } from 'react';
  import { useFormo } from '@formo/analytics';

  const HomePage = () => {
    const analytics = useFormo();

    useEffect(() => {
      // Track a custom event
      analytics.track('Swap Completed', { points: 100 });
    }, [analytics]);

    return <div>Welcome to the Home Page!</div>;
  };

  export default HomePage;

​
Code examples

Check out working examples of Formo on Github:

Example Next.js app

A working example of Formo in a Next.js app.

Example React app

A working example of Formo in a React app.

​
Autocapture

The Web SDK automatically captures common events such as page views and wallet events (connect, disconnect, signature, transaction, etc) with full attribution (referrer, UTM, referrals.)

You do not need to configure anything to track these events.

​
Identify users

Call identify() after a user connects their wallet or signs in on your website or app:

analytics.identify({ address });

OR

window.formo.identify(...);

If no parameters are specified, the Formo SDK will attempt to auto-identify the wallet address.

​
Track events

Track user actions by calling the SDK track() function:

import { useFormo } from '@formo/analytics';

const analytics = useFormo();

analytics.track("Position Opened",  // event name
  {
    pool_id: "LINK/ETH",
    revenue: 99.99,     // revenue
    currency: "USD",    // currency
    points: 99.99        // points for XP or rewards
  }
)

OR 

window.formo.track(...)

​
Configuration

​
Local testing

The SDK skips tracking in localhost by default. To enable tracking locally during development, set trackLocalhost to true:

<AnalyticsProvider
    writeKey={WRITE_KEY}
    options={{
        trackLocalhost: true,
    }}
>

​
Logging

Control the level of logs the SDK prints to the console with the following logLevel settings:

<AnalyticsProvider
    writeKey={WRITE_KEY}
    options={{
        logger: {
            enabled: true,
            levels: ["error", "warn", "info"],
        },
    }}
>

​
Batching

To support high-performance environments, the SDK sends events in batches.

<AnalyticsProvider
    writeKey={WRITE_KEY}
    options={{
        flushAt: 20, // defaults to batches of 20 events
        flushInterval: 1000 * 60, // defaults to 1 min
    }}
>

Customize this behavior with the flushAt and flushInterval configuration parameters.

Log LevelDescription
traceShows the most detailed diagnostic information, useful for tracing program execution flow.
debugShows all messages, including function context information for each public method the SDK invokes.
infoShows informative messages about normal application operation.
warnDefault. Shows error and warning messages.
errorShows error messages only.