Vercel Integration

The Entrolytics Vercel Marketplace Integration provides seamless, one-click analytics setup for your Vercel projects with automatic environment variable configuration.

Features

✅ One-click installation from Vercel Marketplace
✅ Automatic configuration - Environment variables set automatically
✅ Resource management - Create and manage analytics websites from Vercel dashboard
✅ Multi-environment support - Works in production, preview, and development
✅ Zero manual setup - No code changes required
✅ Built-in billing - Free and Pro plans via Vercel billing

Quick Start

Install from Vercel Marketplace

Visit Vercel Marketplace
Click "Add Integration"
Select the Vercel projects you want to track
Authorize the integration

Create Analytics Resource

In your Vercel project dashboard, go to "Integrations"
Click on Entrolytics
Click "Create Resource"
Enter a name for your analytics website
Click "Create"

Environment Variables Added

The integration automatically adds to your project:

NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID=your-website-id
NEXT_PUBLIC_ENTROLYTICS_HOST=https://cloud.entrolytics.click

Add Tracking to Your App

Install the Next.js SDK:

npm install @entro314labs/entro-nextjs

Add to your root layout:

app/layout.tsx

import { EntrolyticsProvider } from '@entro314labs/entro-nextjs'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <EntrolyticsProvider
          websiteId={process.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID!}
          host={process.env.NEXT_PUBLIC_ENTROLYTICS_HOST}
        >
          {children}
        </EntrolyticsProvider>
      </body>
    </html>
  )
}

Install the React SDK:

npm install @entro314labs/entro-react

Wrap your app:

src/App.tsx

import { EntrolyticsProvider } from '@entro314labs/entro-react'

function App() {
  return (
    <EntrolyticsProvider
      websiteId={process.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID}
      host={process.env.NEXT_PUBLIC_ENTROLYTICS_HOST}
    >
      <YourApp />
    </EntrolyticsProvider>
  )
}

Add the script tag to your HTML:

<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
></script>

Replace YOUR_WEBSITE_ID with the value from environment variables.

Deploy and Verify

Deploy your project and visit your site. Check the Entrolytics dashboard to see live traffic.

Billing Plans

$0/month

Perfect for personal projects and small sites:

✅ 10,000 page views per month
✅ 1 website
✅ 3 months data retention
✅ Real-time dashboard
✅ Basic analytics
✅ Privacy-focused (no cookies)

$9/month

For growing businesses and production sites:

✅ 100,000 page views per month
✅ 10 websites
✅ 12 months data retention
✅ Real-time dashboard
✅ Advanced analytics & reports
✅ Custom events & goals
✅ API access
✅ Priority support

Managing Resources

Create a Resource

A "resource" is an analytics website linked to your Vercel project.

Navigate to Integration

In your Vercel project, go to Settings → Integrations → Entrolytics

Click Create Resource

Enter a name for your analytics website (e.g., "Production Site", "Marketing Landing Page")

Environment Variables Auto-Set

The integration automatically updates:

NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID
NEXT_PUBLIC_ENTROLYTICS_HOST

Redeploy (if needed)

If your site is already deployed, trigger a new deployment to pick up the environment variables.

List Resources

View all analytics websites connected to your project in the Entrolytics integration panel.

Delete a Resource

Remove a resource to stop tracking and clean up environment variables.

Configuration

Environment Variables

The integration automatically manages these variables:

Variable	Description	Auto-Set
`NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID`	Your website ID	✅ Yes
`NEXT_PUBLIC_ENTROLYTICS_HOST`	Analytics host URL	✅ Yes

Multi-Project Setup

You can install the integration on multiple Vercel projects:

Each project gets its own resource (website)
Each resource has a unique Website ID
Track all projects from one Entrolytics dashboard

Environment-Specific Tracking

Create separate resources for different environments:

Framework Integration

Next.js (Recommended)

app/layout.tsx

import { EntrolyticsProvider } from '@entro314labs/entro-nextjs'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <EntrolyticsProvider
          websiteId={process.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID!}
          autoTrack={true}
        >
          {children}
        </EntrolyticsProvider>
      </body>
    </html>
  )
}

The SDK automatically:

Tracks page views on navigation
Supports Server Components
Works with App Router routing

pages/_app.tsx

import { EntrolyticsProvider } from '@entro314labs/entro-nextjs'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <EntrolyticsProvider
      websiteId={process.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID!}
    >
      <Component {...pageProps} />
    </EntrolyticsProvider>
  )
}

Vite + React

src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { EntrolyticsProvider } from '@entro314labs/entro-react'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <EntrolyticsProvider
      websiteId={import.meta.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID}
    >
      <App />
    </EntrolyticsProvider>
  </StrictMode>
)

SvelteKit

src/routes/+layout.svelte

<script>
  import { Entrolytics } from '@entro314labs/entro-svelte'
  import { PUBLIC_ENTROLYTICS_WEBSITE_ID } from '$env/static/public'
</script>

<Entrolytics websiteId={PUBLIC_ENTROLYTICS_WEBSITE_ID} />

<slot />

Advanced Usage

Track Custom Events

import { useEntrolytics } from '@entro314labs/entro-nextjs'

function CheckoutButton() {
  const { track } = useEntrolytics()

  return (
    <button onClick={() => track('checkout', { plan: 'pro', price: 99 })}>
      Checkout
    </button>
  )
}

Server-Side Tracking

app/api/webhook/route.ts

import { trackServerEvent } from '@entro314labs/entro-nextjs/server'

export async function POST(request: Request) {
  await trackServerEvent(
    {
      websiteId: process.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID!,
      host: process.env.NEXT_PUBLIC_ENTROLYTICS_HOST!,
    },
    {
      event: 'webhook_received',
      data: { source: 'stripe' },
      request,
    }
  )

  return Response.json({ ok: true })
}

Identity Tracking

import { useEntrolytics } from '@entro314labs/entro-nextjs'

function ProfilePage({ user }) {
  const { identify } = useEntrolytics()

  useEffect(() => {
    identify(user.id, {
      email: user.email,
      plan: user.plan,
    })
  }, [user])
}

Troubleshooting

Uninstalling

Remove from Vercel

Go to Settings → Integrations
Find Entrolytics
Click Remove

Clean Up (Optional)

Environment variables are automatically removed. If you used Entrolytics SDK packages:

npm uninstall @entro314labs/entro-nextjs

Data Retention

Your analytics data remains in your Entrolytics account. To delete:

Log in to cloud.entrolytics.click
Navigate to Settings → Websites
Delete the website

Architecture

The integration uses Vercel's Integration API:

┌─────────────────────────────────────────┐
│  User Installs from Marketplace         │
└─────────────┬───────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────┐
│  Vercel calls /v1/installations API     │
└─────────────┬───────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────┐
│  User creates resource (website)        │
└─────────────┬───────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────┐
│  Environment variables auto-injected    │
└─────────────┬───────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────┐
│  User adds SDK and redeploys            │
└─────────────────────────────────────────┘

Support

Documentation: docs.entrolytics.click
GitHub Issues: vercel-integration
Email: hey@entrolytics.click
Vercel Support: For billing/integration issues, contact Vercel support

Vercel Integration

Production vs Preview

Multiple Domains

Environment variables not set

No data in dashboard

Integration not appearing

Billing questions

Table of Contents