webinsights
v0.1.0
Published
Privacy-first web analytics client for React, Vue, Angular and vanilla JS.
Downloads
140
Maintainers
btn_dvtReadme
webinsights
Privacy-first web analytics client. One install, four entry points: vanilla, React, Vue, Angular. The package injects the hosted tracking script and gives you typed track and identify helpers. All tracking logic stays in the hosted script, so the package never needs a release when that logic changes.
Install
npm i webinsightsReact / Next.js
import { WebInsights, track, identify } from 'webinsights/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
<WebInsights siteId="VWGmLluhkS6t" />
{children}
</body>
</html>
);
}
track('signup', { plan: 'pro' });
identify('[email protected]', { name: 'Dato', image: 'https://...' });Vue
import { createApp } from 'vue';
import { WebInsightsPlugin } from 'webinsights/vue';
import App from './App.vue';
createApp(App).use(WebInsightsPlugin, { siteId: 'VWGmLluhkS6t' }).mount('#app');Or as a component:
<script setup>
import { WebInsights } from 'webinsights/vue';
</script>
<template>
<WebInsights site-id="VWGmLluhkS6t" />
</template>Angular
import { bootstrapApplication } from '@angular/platform-browser';
import { provideWebInsights } from 'webinsights/angular';
import { App } from './app';
bootstrapApplication(App, {
providers: [provideWebInsights({ siteId: 'VWGmLluhkS6t' })],
});Vanilla
import { init, track, identify } from 'webinsights';
init({ siteId: 'VWGmLluhkS6t' });
track('signup', { plan: 'pro' });
identify('[email protected]', { name: 'Dato' });Options
| Option | Type | Default | Notes |
| ---------------- | --------- | --------------------------------------------- | ---------------------------------------- |
| siteId | string | required | Public tracking id from the dashboard. |
| cookieless | boolean | false | Daily-rotating visitor id, no cookie. |
| trackLocalhost | boolean | false | Send events from localhost too. |
| src | string | https://webinsights.vercel.app/js/script.js | Override for self-hosted deployments. |
Develop
npm run build # tsup -> dist (esm + cjs + d.ts per entry)
npm run check:publint # lint the exports map
npm run check:exports # are-the-types-wrong