@logsnag/astro
v1.0.0-beta.1
Published
LogSnag client for Astro applications
Downloads
27
Maintainers
Readme
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: "[email protected]",
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 [email protected]