# 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
<!-- 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

```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>
```

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 `</head>`:

html

```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

```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

```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

```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

```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
<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


---

# 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/replit.md?ask=<question>
```

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.
