@logsnag/remix

Clear, Simple, Effective Product Analytics for SaaS.

## Installation ### Using npm ```bash npm install @logsnag/remix ``` ### Using yarn ```bash yarn add @logsnag/remix ``` ### Using pnpm ```bash pnpm add @logsnag/remix ``` ## 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. ```tsx import { LogSnagProvider } from '@logsnag/remix'; function App() { return ( {/* ... */} ); } ``` ## 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. ```tsx import { useLogSnag } from '@logsnag/remix'; 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: ```jsx ``` In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags. ## Server-side Usage with Remix For server-side usage, you can use LogSnag from `@logsnag/remix/server` It behaves similarly to [`@logsnag/node`](https://www.npmjs.com/package/@logsnag/node) > Use a different token for server-side usage and set its scope to `private` in the LogSnag dashboard. ```typescript import { LogSnag } from '@logsnag/remix/server'; // Initialize LogSnag const logsnag = new LogSnag({ token: '', project: '', }); // Use it in your server-side code // Track an event await logsnag.track({ channel: "payments", event: "New Subscription", user_id: "user-123", icon: "💰", notify: true, tags: { plan: "premium", cycle: "monthly", trial: false } }); // Identify a user await logsnag.identify({ user_id: "user-123", properties: { name: "John Doe", email: "john@doe.com", plan: "premium", } }); // Track an insight await logsnag.insight.track({ title: "User Count", value: "100", icon: "👨", }); // Increment an insight value await logsnag.insight.increment({ title: "User Count", value: 1, icon: "👨", }); ``` ## API Documentation For more information about the LogSnag API, see: [docs.logsnag.com](https://docs.logsnag.com) ## Support If you encounter any problems or issues, please contact us at [shayan@logsnag.com](mailto:shayan@logsnag.com)