# Vercel v0
## Add Humblytics Analytics to a Vercel-Hosted Site
**Note**: Vercel is a deployment platform that hosts many types of projects (Next.js, React, Vue, static HTML, etc.). Installation depends on your framework, not Vercel itself.
### 1 · Sign up (or log in)
Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.
### 2 · Add your website in Humblytics
In the sidebar, click **Add Website**.
* **Domain** – enter `your-domain.com` (omit `https://` and `www`)
* **Site Name** – internal label (e.g. `Vercel-App`)
Copy the snippet from **Install Tracking Code**:
html
```html
```
Keep this tab open—we'll return and click **Verify Website** once the tag is live.
### 3 · Add the script to your project
**First, identify your framework:**
In your Vercel dashboard, check **Project Settings → General** to see your framework preset, or look at your repository files.
#### For Next.js (most common on Vercel)
**App Router (Next.js 13+):**
Open `app/layout.tsx`:
tsx
```tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
**Pages Router (Next.js 12 and older):**
Open `pages/_app.tsx`:
tsx
```tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
)
}
```
#### For React/Vite
Open `index.html` (in root or `/public`):
html
```html
My App
```
#### For Vue
Open `index.html`:
html
```html
Vue App
```
#### For Static HTML
Open your `index.html` or main HTML file:
html
```html
My Site
```
**Note**: Replace `YOUR_ID_HERE` with your actual project ID from Humblytics.
#### Using Vercel Environment Variables (recommended)
1. In Vercel dashboard, go to **Project Settings → Environment Variables**
2. Add new variable:
* **Key**: `NEXT_PUBLIC_HUMBLYTICS_ID` (or `VITE_HUMBLYTICS_ID` for Vite)
* **Value**: Your Humblytics ID
* **Environments**: Production (and Staging if needed)
3. Update your code to use the variable:
**Next.js:**
tsx
```tsx
```
**Vite:**
html
```html
```
### 4 · Deploy to Vercel
Push your changes to trigger a deployment:
bash
```bash
git add .
git commit -m "Add Humblytics analytics"
git push
```
Or deploy manually:
bash
```bash
vercel --prod
```
Wait for deployment to complete (usually 1-2 minutes).
### 5 · Verify installation
1. Return to Humblytics and click **Verify Website**
2. Open your live Vercel site in a private/incognito window
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count
**If verification fails, check:**
**Vercel-specific issues:**
* Deployment completed successfully (check Vercel dashboard)
* You're testing the production URL (e.g., `yoursite.vercel.app` or custom domain)
* Environment variables are set correctly (if using)
* Not testing preview deployment URLs (`*-username.vercel.app`)
* Changes were pushed and deployed (check latest deployment in Vercel)
**General issues:**
* Script ID matches your project in Humblytics
* View page source (right-click → View Page Source) and search for "humblytics"
* Open Developer Tools (F12) → **Network** tab and search for `hmbl.min.js`
* No ad-blockers or browser extensions are blocking the script
**Debug in Vercel:**
1. Check deployment logs for build errors
2. View deployment URL and inspect source code
3. Check if environment variables are available: Vercel logs will show if missing
### 6 · Explore & optimize
* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated visual insights
* **Experiments** – run A/B tests directly from Humblytics