Install

Instructions

Pick your stack and add the code below to your codebase.

1. Install the Formo SDK

Install this script in the <head> tag of your website:

<script
  src="https://cdn.formo.so/analytics@latest"
  defer onload="window.formofy('<YOUR_WRITE_KEY>');"
></script>

Replace <YOUR_WRITE_KEY> with the SDK Write key found in your project settings.

Enable Subresource Integrity (SRI) to improve site security.

2. Identify users

Call identify to tie a user to their actions. As a best practice, make sure identify is called at the start of every session or page load, if possible.

window.formo.identify({
  address: "0xEee...",
  userId: "foobar"
});

3. Track events

Use the track function to track custom user actions specific to your app.

<button type="button" onclick="window.formo.track('Swap Completed', { foo: 'bar' })">
  Track event
</button>

1. Install the Formo SDK

Install this script in the <head> tag of your website:

<script
  src="https://cdn.formo.so/analytics@latest"
  defer onload="window.formofy('<YOUR_WRITE_KEY>');"
></script>

Replace <YOUR_WRITE_KEY> with the SDK Write key found in your project settings.

Enable Subresource Integrity (SRI) to improve site security.

2. Identify users

Call identify to tie a user to their actions. As a best practice, make sure identify is called at the start of every session or page load, if possible.

window.formo.identify({
  address: "0xEee...",
  userId: "foobar"
});

3. Track events

Use the track function to track custom user actions specific to your app.

<button type="button" onclick="window.formo.track('Swap Completed', { foo: 'bar' })">
  Track event
</button>

1. Install the Formo SDK

  npm install @formo/analytics --save

2. Use `FormoAnalyticsProvider` in your app

Wrap your React app in the provider provided by the SDK.

  // App.tsx (or App.js)

  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>
  );

Replace <YOUR_WRITE_KEY> with the SDK Write key found in your project settings.

3. Identify users

Call identify to tie a user to their actions. As a best practice, make sure identify is called at the start of every session or page load, if possible.


import { useFormo } from "@formo/analytics";
import { useAccount } from "wagmi";

const HomePage = () => {
  const { address } = useAccount();
  const analytics = useFormo();

  useEffect(() => {
    if (address && analytics) {
      analytics.identify({ address });
    }
  }, [address, analytics]);
}

4. Track events

Formo autocaptures events like page views, wallet connects, signatures, and transactions for you.

Use the track function to track custom user actions specific to your app.

  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;

1. Install the Formo SDK

  npm install @formo/analytics --save

2. Use `FormoAnalyticsProvider` in your app

Create a new AnalyticsProvider.tsx client component.

  // AnalyticsProvider.tsx

  'use client';

  import { FormoAnalytics, FormoAnalyticsProvider } from '@formo/analytics';

  type FormoAnalyticsProviderProps = {
    writeKey: string,
    children: React.ReactNode,
  };

  // The provider component
  export const AnalyticsProvider: FC<FormoAnalyticsProviderProps> = ({
    writeKey,
    children,
  }) => {
    return (
      <FormoAnalyticsProvider writeKey={writeKey}>
        {children}
      </FormoAnalyticsProvider>
    );
  };

  export default AnalyticsProvider;

Wrap your Next.js app in your main layout file with the newly created AnalyticsProvider component:

  // app/layout.tsx

  import { AnalyticsProvider } from './AnalyticsProvider';

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode,
  }) {
    return (
      <html lang='en'>
        <body>
          <AnalyticsProvider writeKey='YOUR_WRITE_KEY'>
            Your Page Content
          </AnalyticsProvider>
        </body>
      </html>
    );
  }

Replace <YOUR_WRITE_KEY> with the SDK Write key found in your project settings.

3. Identify users

Call identify to tie a user to their actions. As a best practice, make sure identify is called at the start of every session or page load, if possible.

import { useFormo } from "@formo/analytics";
import { useAccount } from "wagmi";

const HomePage = () => {
  const { address } = useAccount();
  const analytics = useFormo();

  useEffect(() => {
    if (address && analytics) {
      analytics.identify({ address });
    }
  }, [address, analytics]);
}

4. Track events

Formo autocaptures events like page views, wallet connects, signatures, and transactions for you.

Use the track function to track custom user actions specific to your app.

  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;

Autocapture

The Formo 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.

Verification

To verify that the SDK is installed correctly, navigate to your site and open the network tab of the developer tools in your browser.

Wait and look for a ‘raw_events’ request to Formo in the network console. Check that the request returns a 202 response status. If so, you’re done!

Enable logs on localhost to help with debugging or reach out to support.

SDK Reference

Web SDK

Web SDK (Browser, React, Next.js)

Support

Slack

Join our Slack community

Twitter

Send us a tweet or DM us any time

Email

Email us at support@formo.so

Founder

Bug him at yos@formo.so (share anything that’s on your mind - the good and the bad).

Email

Founder

Quickstart

Features

Instructions

1. Install the Formo SDK

2. Identify users

3. Track events

1. Install the Formo SDK

2. Identify users

3. Track events

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events

Autocapture

Verification

SDK Reference

Web SDK

Support

Slack

Twitter

Quickstart

Features

​Instructions

​1. Install the Formo SDK

​2. Identify users

​3. Track events

​1. Install the Formo SDK

​2. Identify users

​3. Track events

​1. Install the Formo SDK

​2. Use FormoAnalyticsProvider in your app

​3. Identify users

​4. Track events

​1. Install the Formo SDK

​2. Use FormoAnalyticsProvider in your app

​3. Identify users

​4. Track events

​Autocapture

​Verification

​SDK Reference

Web SDK

​Support

Slack

Twitter

Email

Founder

Instructions

1. Install the Formo SDK

2. Identify users

3. Track events

1. Install the Formo SDK

2. Identify users

3. Track events

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events

Autocapture

Verification

SDK Reference

Support