@logsnag/astro

Clear, Simple, Effective Product Analytics for SaaS.

Installation

Using npm

npm install @logsnag/astro

Using yarn

yarn add @logsnag/astro

Using pnpm

pnpm add @logsnag/astro

Usage

First, install the LogSnag plugin in your astro application:

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

---
import LogSnag from "@logsnag/astro/LogSnag.astro";
---

<LogSnag token="<TOKEN>" project="<PROJECT_NAME>" />

Then, import the functions you need from the package:

<script>
import { setUserId, track, identify } from "@logsnag/astro";
// Set the user id for the current user
setUserId('user-123');

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

// Identify a user
identify({
  user_id: "user-123",
  properties: {
    name: "John Doe",
    email: "john@doe.com",
    plan: "premium",
  }
});
</script>

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

<button
    data-event="Upgraded Plan" 
    data-channel="billing"
    data-icon=":moneybag:"
    data-tag-plan="Pro"
    data-tag-period="Monthly"
    data-tag-price="9.99"
>
    Upgrade to Pro
</button>

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

Hooks

• 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.

API Documentation

For more information about the LogSnag API, see: docs.logsnag.com

Support

If you encounter any problems or issues, please contact us at shayan@logsnag.com