@linkrivers/tracker
v1.0.0
Published
LinkRivers analytics tracker for React, Next.js, Vue, and vanilla JS
Maintainers
linkrivers-webopsReadme
@linkrivers/tracker
Official LinkRivers analytics tracker for JavaScript applications.
Installation
npm install @linkrivers/tracker
# or
yarn add @linkrivers/tracker
# or
pnpm add @linkrivers/trackerUsage
Vanilla JavaScript
import { init, track, identify } from '@linkrivers/tracker';
// Initialize
init({
id: 'YOUR_SITE_ID',
// Optional settings
endpoint: 'https://api.linkrivers.com',
analytics: true, // Web vitals, clicks, scroll (default: true)
security: true, // Security scanning (default: true)
technographics: true, // Tech stack detection (default: true)
funnels: false, // Goals & funnels (default: false)
ecommerce: false, // E-commerce tracking (default: false)
respectDNT: true // Respect Do Not Track (default: true)
});
// Track custom events
track('button_click', { button_id: 'signup' });
// Identify users
identify('[email protected]', { plan: 'pro' });React
import { useLinkrivers, track } from '@linkrivers/tracker/react';
function App() {
useLinkrivers({ id: 'YOUR_SITE_ID' });
return (
<button onClick={() => track('signup_click')}>
Sign Up
</button>
);
}Next.js (App Router)
// app/layout.tsx
import { LinkRiversScript } from '@linkrivers/tracker/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<LinkRiversScript id="YOUR_SITE_ID" />
</body>
</html>
);
}Next.js (Pages Router)
// pages/_app.tsx
import { useLinkrivers } from '@linkrivers/tracker/react';
function MyApp({ Component, pageProps }) {
useLinkrivers({ id: 'YOUR_SITE_ID' });
return <Component {...pageProps} />;
}
export default MyApp;Vue 3
<script setup>
import { useLinkrivers, track } from '@linkrivers/tracker/vue';
useLinkrivers({ id: 'YOUR_SITE_ID' });
function handleClick() {
track('button_click', { id: 'signup' });
}
</script>
<template>
<button @click="handleClick">Sign Up</button>
</template>Vue Plugin (Global)
// main.ts
import { createApp } from 'vue';
import { LinkRiversPlugin } from '@linkrivers/tracker/vue';
import App from './App.vue';
const app = createApp(App);
app.use(LinkRiversPlugin, { id: 'YOUR_SITE_ID' });
app.mount('#app');Nuxt 3
// plugins/linkrivers.client.ts
import { init } from '@linkrivers/tracker';
export default defineNuxtPlugin(() => {
init({ id: 'YOUR_SITE_ID' });
});SvelteKit
<!-- src/routes/+layout.svelte -->
<script>
import { onMount } from 'svelte';
import { init, track } from '@linkrivers/tracker';
onMount(() => {
init({ id: 'YOUR_SITE_ID' });
});
</script>
<slot />Astro
---
// src/layouts/Layout.astro
---
<html>
<head>
<script>
import { init } from '@linkrivers/tracker';
init({ id: 'YOUR_SITE_ID' });
</script>
</head>
<body>
<slot />
</body>
</html>API Reference
init(config)
Initialize the tracker.
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| id | string | required | Your site tracking ID |
| endpoint | string | https://api.linkrivers.com | API endpoint |
| analytics | boolean | true | Enable Web Vitals, clicks, scroll tracking |
| security | boolean | true | Enable security scanning |
| technographics | boolean | true | Enable tech stack detection |
| funnels | boolean | false | Enable goals & funnels |
| ecommerce | boolean | false | Enable e-commerce tracking |
| respectDNT | boolean | true | Respect Do Not Track header |
track(eventName, properties?)
Track a custom event.
track('purchase', { product_id: '123', price: 99.99 });identify(userId, traits?)
Identify a user for cross-session tracking.
identify('[email protected]', { name: 'John', plan: 'pro' });load(module)
Manually load an optional module.
load('ecommerce'); // Load e-commerce trackingLicense
MIT