# 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
```html
```
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 ``:
html
```html
My Site
Hello World
```
4. 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 ``:
html
```html
<%= title %>
<%- body %>
```
#### For React
**Best for:** React template
1. Open `public/index.html`
2. Add script before ``:
html
```html
React App
```
#### For Python/Flask
**Best for:** Python template with Flask
1. Open `templates/index.html` (or `templates/base.html`)
2. Add script before ``:
html
```html
{% block title %}My Site{% endblock %}
{% block content %}{% endblock %}
```
#### 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
```javascript
const humblytics = process.env.HUMBLYTICS_ID;
app.get('/', (req, res) => {
res.send(`
Hello World
`);
});
```
**Python/Flask:**
python
```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
```html
```
**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