Core Package Examples
Use these curated examples to ship Pulsora faster in real projects.
Vanilla JavaScript
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pulsora Demo</title>
</head>
<body>
<button id="cta">Sign up</button>
<script
async
src="https://cdn.pulsora.co/v1/pulsora.min.js"
data-token="pub_123"
data-debug="true"
></script>
<script>
window.addEventListener('load', () => {
document.getElementById('cta')?.addEventListener('click', () =>
window.pulsora.event('signup_click', {
variant: 'primary',
}),
);
});
</script>
</body>
</html>React (without @pulsora/react)
import { useEffect } from 'react';
import { Pulsora } from '@pulsora/core';
const pulsora = new Pulsora();
export function App() {
useEffect(() => {
pulsora.init({ apiToken: 'pub_123' });
pulsora.pageview();
}, []);
return (
<button onClick={() => pulsora.event('cta_click')}>Get Started</button>
);
}Next.js App Router
// app/providers.tsx
'use client';
import { Pulsora } from '@pulsora/core';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
const pulsora = new Pulsora();
export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const params = useSearchParams();
useEffect(() => {
pulsora.init({
apiToken: process.env.NEXT_PUBLIC_PULSORA_TOKEN!,
});
}, []);
useEffect(() => {
pulsora.pageview({
url: `${window.location.origin}${pathname}?${params.toString()}`,
});
}, [pathname, params]);
return <>{children}</>;
}Vue 3 Composition API
// src/plugins/pulsora.ts
import { Pulsora } from '@pulsora/core';
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
export function usePulsora() {
const pulsora = new Pulsora();
const route = useRoute();
onMounted(() => {
pulsora.init({ apiToken: 'pub_123' });
});
watch(
() => route.fullPath,
() => pulsora.pageview(),
{ immediate: true },
);
return pulsora;
}Passing Metadata to a Checkout
// Browser
const fingerprint = await pulsora.getVisitorFingerprint();
const sessionId = pulsora.getSessionId();
await fetch('/api/checkout', {
method: 'POST',
body: JSON.stringify({
plan: 'pro',
visitor_fingerprint: fingerprint,
session_id: sessionId,
}),
});// Server (Node.js)
import { Revenue } from '@pulsora/revenue';
const revenue = new Revenue({
apiToken: process.env.PULSORA_SECRET!,
});
app.post('/webhooks/stripe', async (req, res) => {
const session = req.body.data.object;
await revenue.track({
visitor_fingerprint: session.metadata.visitor_fingerprint,
session_id: session.metadata.session_id,
customer_id: session.customer,
amount: session.amount_total / 100,
currency: session.currency.toUpperCase(),
transaction_id: session.id,
payment_processor: 'stripe',
event_type: 'purchase',
});
res.json({ received: true });
});Looking for ready-made React hooks? Head over to the React package overview →