Velcel 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

<!-- Start Humblytics Tracking Code -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
<!-- End Humblytics Tracking Code -->

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

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router (Next.js 12 and older):

Open pages/_app.tsx:

tsx

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
        strategy="afterInteractive"
      />
    </>
  )
}

For React/Vite

Open index.html (in root or /public):

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

For Vue

Open index.html:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

For Static HTML

Open your index.html or main HTML file:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    <!-- Your content -->
</body>
</html>

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

<Script
  src={`https://app.humblytics.com/hmbl.min.js?id=${process.env.NEXT_PUBLIC_HUMBLYTICS_ID}`}
  strategy="afterInteractive"
/>

Vite:

html

<script async src="https://app.humblytics.com/hmbl.min.js?id=import.meta.env.VITE_HUMBLYTICS_ID"></script>

4 · Deploy to Vercel

Push your changes to trigger a deployment:

bash

git add .
git commit -m "Add Humblytics analytics"
git push

Or deploy manually:

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

PreviousBoltNextReplit

Last updated

Was this helpful?