# 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.humblytics.com/how-to-get-started/vercel-v0.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.