Install

For best results, install Formo on both your website (example.com) and your app (app.example.com) using the same project/SDK write key.

Instructions

Set up Formo for both your website and your app on the same project.

For static websites (example.com), we recommend using the HTML snippet.
For apps (app.example.com) with wallet connection, we recommend using the Wagmi integration.

Make sure you use the same <SDK_WRITE_KEY> for both your website and your app. You can find the write key in your Formo project settings.

Wagmi
HTML Snippet
React
Next.js

1. Install the Formo SDK

  npm install @formo/analytics --save

2. Configure Formo with Wagmi

Pass your Wagmi config and QueryClient to enable native Wagmi integration.

  // App.tsx

  import { WagmiProvider, createConfig, http } from 'wagmi';
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { FormoAnalyticsProvider } from '@formo/analytics';
  import { mainnet } from 'wagmi/chains';

  const wagmiConfig = createConfig({
    chains: [mainnet],
    transports: {
      [mainnet.id]: http(),
    },
  });

  const queryClient = new QueryClient();

  function App() {
    return (
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <FormoAnalyticsProvider
            writeKey="<SDK_WRITE_KEY>"
            options={{
              wagmi: {
                config: wagmiConfig,
                queryClient: queryClient,
              },
            }}
          >
            <YourApp />
          </FormoAnalyticsProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  }

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

3. Identify users

Call identify at the start of every session or page load to link a wallet address to a session.

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 (optional)

Formo autocaptures wallet events (connect, disconnect, signature, transaction, chain changes) automatically via Wagmi.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

Install this script in the <head> tag of your website. Replace <YOUR_WRITE_KEY> with the SDK Write key found in your project settings:

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

Calling identify at the start of every session or page load links wallets to user sessions.To improve security, enable Subresource Integrity (SRI).

2. Track events (optional)

Formo autocaptures events like page views, wallet connects, signatures, and transactions for you.For everything else, 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>

Using Wagmi? Install with Wagmi instead for better event tracking.

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 at the start of every session or page load to link a wallet address to a session.

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 (optional)

Formo autocaptures events like page views, wallet connects, signatures, and transactions for you.For everything else, 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;

Using Wagmi? Install with Wagmi instead for better event tracking.

1. Install the Formo SDK

  npm install @formo/analytics --save

2. Use `FormoAnalyticsProvider` in your app

Create a new AnalyticsProvider.tsx client component.

App Router

  // AnalyticsProvider.tsx

  'use client';

  import { 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>
    );
  }

Pages Router

  // AnalyticsProvider.tsx

  import { 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:

  // pages/_app.tsx

  import AnalyticsProvider from "@/AnalyticsProvider";
  import type { AppProps } from "next/app";

  export default function App({ Component, pageProps }: AppProps) {
    return (
      <AnalyticsProvider writeKey='YOUR_WRITE_KEY'>
        <Component {...pageProps} />
      </AnalyticsProvider>
    );
  }

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

3. Identify users

Call identify at the start of every session or page load to link a wallet address to a session.

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 (optional)

Formo autocaptures events like page views, wallet connects, signatures, and transactions for you.For everything else, 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;

Code Examples

Example Apps

Working examples for Privy, Dynamic, React, and Next.js

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. Go to your browser’s Network tab and and look for successful ‘raw_events’ request in the network console. Check that the request returns a 202 response status. (Note that it may take up to a minute due to the flush interval.) Events that are tracked correctly should also show up in the Activity page of your Formo workspace.

SDK Reference

Web SDK

Web SDK (HTML, React, Next.js)

Support

Slack

Join our Slack community

Twitter

Send us a tweet or DM us any time

Email

Email us at [email protected]

Founder

Bug him at [email protected] (share anything that’s on your mind - the good and the bad)

Email

Founder

Getting started

Features

Use Cases

Instructions

1. Install the Formo SDK

2. Configure Formo with Wagmi

3. Identify users

4. Track events (optional)

1. Install the Formo SDK

2. Track events (optional)

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events (optional)

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events (optional)

Code Examples

Example Apps

Autocapture

Verification

SDK Reference

Web SDK

Support

Slack

Twitter

Getting started

Features

Use Cases

​Instructions

​1. Install the Formo SDK

​2. Configure Formo with Wagmi

​3. Identify users

​4. Track events (optional)

​1. Install the Formo SDK

​2. Track events (optional)

​1. Install the Formo SDK

​2. Use FormoAnalyticsProvider in your app

​3. Identify users

​4. Track events (optional)

​1. Install the Formo SDK

​2. Use FormoAnalyticsProvider in your app

​3. Identify users

​4. Track events (optional)

​Code Examples

Example Apps

​Autocapture

​Verification

​SDK Reference

Web SDK

​Support

Slack

Twitter

Email

Founder

Instructions

1. Install the Formo SDK

2. Configure Formo with Wagmi

3. Identify users

4. Track events (optional)

1. Install the Formo SDK

2. Track events (optional)

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events (optional)

1. Install the Formo SDK

2. Use `FormoAnalyticsProvider` in your app

3. Identify users

4. Track events (optional)

Code Examples

Autocapture

Verification

SDK Reference

Support