Replit

Add Humblytics Analytics to a Replit Site

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 Replit domain:

    • Default: projectname.username.replit.dev

    • Or your custom domain if configured

  • Site Name – internal label (e.g. Replit-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 Replit project

For Static HTML

Best for: HTML/CSS/JS template

  1. Open your Replit project

  2. Open index.html in the file tree

  3. Add your Humblytics script before </head>:

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>
    <h1>Hello World</h1>
</body>
</html>

  1. Click Run at the top

For Node.js/Express

Best for: Node.js template with Express

  1. Open your main template file (usually views/index.ejs or views/layout.ejs)

  2. Add script before </head>:

html

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    <%- body %>
</body>
</html>

For React

Best for: React template

  1. Open public/index.html

  2. Add script before </head>:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React 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>
  </body>
</html>

For Python/Flask

Best for: Python template with Flask

  1. Open templates/index.html (or templates/base.html)

  2. Add script before </head>:

html

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Site{% endblock %}</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Using Replit Secrets (recommended)

Best for: Keeping tracking ID secure and managing multiple environments

  1. In your Replit, click Tools → Secrets (lock icon in left sidebar)

  2. Add new secret:

    • Key: HUMBLYTICS_ID

    • Value: Your tracking ID (just the ID, not the full script)

  3. Access in your code:

Node.js/Express:

javascript

const humblytics = process.env.HUMBLYTICS_ID;

app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <script async src="https://app.humblytics.com/hmbl.min.js?id=${humblytics}"></script>
    </head>
    <body>
      <h1>Hello World</h1>
    </body>
    </html>
  `);
});

Python/Flask:

python

import os

@app.route('/')
def index():
    humblytics_id = os.environ.get('HUMBLYTICS_ID')
    return render_template('index.html', humblytics_id=humblytics_id)

Then in template:

html

<script async src="https://app.humblytics.com/hmbl.min.js?id={{ humblytics_id }}"></script>

Note: Replace YOUR_ID_HERE with your actual project ID from Humblytics.

4 · Deploy your Replit

⚠️ Important: Running in the Replit editor (dev mode) vs deploying are different.

Option 1: Run in development mode

  • Click Run at the top

  • Your site runs at https://projectname.username.replit.dev

  • ⚠️ Site goes to sleep when you close the tab (unless you have Always On)

Option 2: Deploy (recommended for production)

  1. Click Deploy button (rocket icon in top right)

  2. Choose Autoscale deployment or Static deployment

  3. Wait for deployment (1-2 minutes)

  4. Your site gets a permanent URL: https://projectname.username.replit.app

Always On (optional):

  • For dev mode to stay running 24/7

  • Requires paid Replit plan

  • Not needed if using Deployments

5 · Verify installation

  1. Return to Humblytics and click Verify Website

  2. Open your Replit site in a private/incognito window

    • Dev mode: projectname.username.replit.dev

    • Deployed: projectname.username.replit.app

  3. Refresh once

  4. Within ~30 seconds you should see a green Verified badge and live visitor count

If verification fails, check:

Replit-specific issues:

  • You clicked Run (for dev mode) or Deploy (for production)

  • Site is actually running (not sleeping)

  • Testing correct URL:

    • ✓ projectname.username.replit.dev (dev)

    • ✓ projectname.username.replit.app (deployed)

    • ✗ replit.com/@username/projectname (editor URL)

  • Domain in Humblytics matches your Replit URL exactly

  • For dev mode: Repl hasn't gone to sleep (refresh if it has)

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

  • Check Replit console for errors (in Shell or Console tab)

  • No ad-blockers or browser extensions are blocking the script

Replit sleeping issue: If your dev repl keeps going to sleep:

  • Use Replit Deployments instead (permanent, always on)

  • Or upgrade to paid plan for Always On in dev mode

6 · Explore & optimize

  • Dashboard – view real-time traffic and top pages

  • Heatmaps – auto-generated visual insights

  • Experiments – run A/B tests without extra libraries

PreviousVelcel v0NextAstro

Last updated

Was this helpful?