open-index/open-npm huggingface dataset:
npm package: @softify/analytics
Description: Softify Cloud Analytics - Easy analytics tracking for your apps
Author: Softify Labs
Latest version: 1.0.1

# @softify/analytics

Easy analytics tracking for Softify Cloud apps. Works with Next.js, React, and vanilla JavaScript.

## Installation

```bash
# npm
npm install @softify/analytics

# pnpm
pnpm add @softify/analytics

# bun
bun add @softify/analytics

# yarn
yarn add @softify/analytics
```

## Quick Start

### Next.js (App Router)

```tsx
// app/layout.tsx
import { Analytics } from '@softify/analytics/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}
```

### Next.js (Pages Router)

```tsx
// pages/_app.tsx
import { Analytics } from '@softify/analytics/next';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}
```

### React

```tsx
import { Analytics } from '@softify/analytics/react';

function App() {
  return (
    <>
      <YourApp />
      <Analytics />
    </>
  );
}
```

### Vanilla JavaScript

```html
<script type="module">
  import { inject } from '@softify/analytics';
  inject();
</script>
```

## Configuration

### Using Environment Variables (Recommended)

Set the `NEXT_PUBLIC_SOFTIFY_ANALYTICS_ID` environment variable:

```env
NEXT_PUBLIC_SOFTIFY_ANALYTICS_ID=your-website-id
```

Then use the component without props:

```tsx
<Analytics />
```

### Using Props

```tsx
<Analytics websiteId="your-website-id" />
```

### Available Options

| Prop | Type | Description |
|------|------|-------------|
| `websiteId` | `string` | Your Umami website ID from Softify Cloud dashboard |
| `src` | `string` | Custom analytics script URL (default: `https://analytics.softify.cloud/s.js`) |
| `debug` | `boolean` | Enable debug logging |
| `strategy` | `string` | Next.js script loading strategy (default: `afterInteractive`) |

## Tracking Events

Track custom events to understand user behavior:

```tsx
import { track } from '@softify/analytics/next';

// Track a simple event
track('signup');

// Track with data
track('purchase', {
  plan: 'pro',
  amount: 99
});

// Track button click
<button onClick={() => track('cta_click', { location: 'hero' })}>
  Get Started
</button>
```

## Environment Variables

| Variable | Description |
|----------|-------------|
| `NEXT_PUBLIC_SOFTIFY_ANALYTICS_ID` | Your website ID (Next.js) |
| `SOFTIFY_ANALYTICS_ID` | Your website ID (server-side) |

## Getting Your Website ID

1. Log in to [Softify Cloud](https://app.softify.cloud)
2. Navigate to your application's Analytics tab
3. Copy the Website ID

## License

MIT