import { Analytics as DubAnalytics } from '@dub/analytics/react';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
      <DubAnalytics apiKey="apiKey" />
    </html>
  );
}

You can all use the inject({ apiKey }) function to add the tracking script to other frameworks.

Use the sale and lead functions to track conversions.

Client side:

import { track } from '@dub/analytics';

export const LeadButton = () => (
  <button onClick={() => track.lead({ property: 'value' })}>
    Track Lead
  </button>
);

export const SaleButton = () => (
  <button onClick={() => track.sale({ value: 100, currency: 'USD' })}>
    Track Sale
  </button>
);

Server side:

import { track } from '@dub/analytics/server';

export async function GET(request: Request) {
  track.lead(request, 'apiKey', { property: 'value' });

  return Response.json({ message: 'Event tracked' });
}

Note: the SKD also has automatic tracking of "clicks" for affiliate attribution when the via query parameter is present in the URL. It will automatically track the click, store the affiliate ID in a cookie, and be able to associate future leads and sales with the affiliate.

Keywords

FAQs

What is @dub/analytics?

Is @dub/analytics popular?

Is @dub/analytics well maintained?

Package last updated on 08 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@dub/analytics

Overview

Quick start

Keywords

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation