Understanding Context
The context option tells Overcentric whether activity is happening on your marketing website or inside your product. This distinction is critical for proper analytics.
┌─────────────────────────────────────────────────────────┐
│ YOUR WEBSITE │
│ example.com │
│ context: "website" │
├──────────────┬───────────┬─────────┬────────────────────┤
│ Landing Page │ Pricing │ Blog │ Sign Up Form │
└──────────────┴───────────┴─────────┴────────────────────┘
↓
User signs up
↓
┌─────────────────────────────────────────────────────────┐
│ YOUR PRODUCT │
│ app.example.com │
│ context: "product" │
├─────────────┬────────────┬────────────┬─────────────────┤
│ Dashboard │ Settings │ Features │ User Profile │
└─────────────┴────────────┴────────────┴─────────────────┘Why Context Matters
Overcentric automatically builds separate analytics dashboards based on context:
- Website context → Acquisition analytics (traffic, conversions, marketing attribution)
- Product context → Usage analytics (feature adoption, user behavior, retention)
This separation lets you answer different questions:
| Context | Questions You Can Answer |
|---|---|
"website" |
Where is my traffic coming from? Which pages convert best? What’s my signup rate? |
"product" |
Which features are most used? Where do users get stuck? What drives retention? |
Setting the Context
Browser (Script Tag)
<script
defer
src="https://unpkg.com/overcentric/dist/browser/overcentric.min.js"
data-project-id="your-project-id"
data-context="website"
></script>NPM / Yarn
import overcentric from "overcentric";
overcentric.init("your-project-id", {
context: "website"
});Context Values
| Value | Use For |
|---|---|
"website" |
Marketing pages, landing pages, blog, pricing page |
"product" |
Dashboard, app pages, authenticated user areas |
Dynamic Context for SPAs
If your marketing site and product share the same codebase, you can update the context dynamically:
// Initialize with website context
overcentric.init("your-project-id", { context: "website" });
// Later, when user logs in or navigates to product pages
overcentric.setContext("product");After calling setContext(), all subsequent events will be tracked with the new context.
Example: React Router
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import overcentric from "overcentric";
function App() {
const location = useLocation();
useEffect(() => {
// Product routes start with /app
if (location.pathname.startsWith("/app")) {
overcentric.setContext("product");
} else {
overcentric.setContext("website");
}
}, [location]);
return <Routes>{/* ... */}</Routes>;
}