@softify/analytics
v1.0.1
Published
Softify Cloud Analytics - Easy analytics tracking for your apps
Downloads
60
Maintainers
Readme
@softify/analytics
Easy analytics tracking for Softify Cloud apps. Works with Next.js, React, and vanilla JavaScript.
Installation
# npm
npm install @softify/analytics
# pnpm
pnpm add @softify/analytics
# bun
bun add @softify/analytics
# yarn
yarn add @softify/analyticsQuick Start
Next.js (App Router)
// 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)
// pages/_app.tsx
import { Analytics } from '@softify/analytics/next';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}React
import { Analytics } from '@softify/analytics/react';
function App() {
return (
<>
<YourApp />
<Analytics />
</>
);
}Vanilla JavaScript
<script type="module">
import { inject } from '@softify/analytics';
inject();
</script>Configuration
Using Environment Variables (Recommended)
Set the NEXT_PUBLIC_SOFTIFY_ANALYTICS_ID environment variable:
NEXT_PUBLIC_SOFTIFY_ANALYTICS_ID=your-website-idThen use the component without props:
<Analytics />Using Props
<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:
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
- Log in to Softify Cloud
- Navigate to your application's Analytics tab
- Copy the Website ID
License
MIT
