LogSnag Docs
Home
  • ⚡Welcome
  • Quick Start
  • LogSnag for SaaS
  • ⚒️SDKs
    • Node
    • React
    • Next
    • Vue
    • Deno
    • Web
    • Python
  • 📖API Reference
    • Log
    • Identify
    • Insight
    • Insight Mutate
  • 🧳Tools
    • Feedback Widget
  • 🤝Integrations
    • Zapier
    • Bubble
    • Unofficial
Powered by GitBook
On this page
  • Installation
  • Usage
  • Hooks
  • Tracking Events

Was this helpful?

  1. SDKs

React

LogSnag client for React applications

Installation

Using npm

npm install @logsnag/react

Using yarn

yarn add @logsnag/react

Using pnpm

pnpm add @logsnag/react

Usage

First, wrap your application with the LogSnagProvider at the top level, passing in your project and token:

Set your token's scope to public in the LogSnag dashboard.

import { LogSnagProvider } from '@logsnag/react';

function App() {
  return (
    <LogSnagProvider
      token="<TOKEN>"
      project="<PROJECT_NAME>"
    >
      {/* Rest of your app */}
    </LogSnagProvider>
  );
}

Hooks

The useLogSnag hook can be used across your React components and provides the following methods:

  • track(options: TrackOptions): Track custom events.

  • identify(options: IdentifyOptions): Identify user traits.

  • setUserId(userId: string | null): Set the user id for the current user. If the user is not logged in, pass null.

  • clearUserId(): Clear the user id for the current user.

  • setDebug(flag: boolean = true): Set debug mode for logging.

import { useLogSnag } from '@logsnag/react';

export function Component() {
  // Get the hooks
  const { setUserId, track, identify } = useLogSnag();

  // Set the user id when a user logs in
  setUserId('user-123');

  // Track an event
  track({
    channel: "payments",
    event: "New Subscription",
    user_id: "user-123", // optional when set using setUserId
    icon: "💰",
    notify: true,
    tags: {
      plan: "premium",
      cycle: "monthly",
      trial: false
    }
  });

  // Identify user traits (e.g., name, email, plan, etc.)
  identify({
    user_id: "user-123", // optional when set using setUserId
    properties: {
      name: "John Doe",
      email: "john@doe.com",
      plan: "premium",
    }
  });

  // Rest of your component
}

Tracking Events

You can also track events directly from HTML elements using data attributes:

<button
    data-event="Upgraded Plan"
    data-user-id="user-123"     // optional (optional when set using setUserId)
    data-channel="billing"      // optional (defaults to "events")
    data-icon=":moneybag:"      // optional
    data-tag-plan="Pro"         // optional
    data-tag-period="Monthly"   // optional
    data-tag-price="9.99"       // optional
>
    Upgrade to Pro
</button>

In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags.

PreviousNodeNextNext

Last updated 1 year ago

Was this helpful?

⚒️