# How to Track Click Events on Custom / Self‑Hosted Site

Tracking key user interactions—like CTA clicks or nav link taps—shouldn’t require a dev team or a tag manager. Humblytics makes it incredibly easy to track custom clicks on any website by using HTML attributes, just like you would in Webflow.

This works for:

* WordPress (via HTML blocks or page builders)
* Shopify (in Liquid templates)
* Static HTML sites
* Framer, Squarespace, Ghost, etc.

***

#### Step 1: Install the Humblytics Tracking Script

Add this to the \<head> of your site:

```
<script src="https://app.humblytics.com/optimize.min.js?id=YOURID"></script>
```

> Replace ID with your actual site ID from your Humblytics dashboard.

***

#### Step 2: Add a Custom Attribute to Any Clickable Element

To track a specific button or link, just add a custom attribute like this:

```
<a href="/signup" humblytics="hero-signup-btn">Sign up</a>
```

Or:

```
<button humblytics="pricing-cta">View Pricing</button>
```

No JavaScript. No configuration. Just pure, privacy-first tracking.

***

#### Step 3: See Results in Your Dashboard

1. Go to your Humblytics dashboard
2. Click on the Clicks tab
3. Look for your custom attribute value (e.g. hero-signup-btn)\\

You’ll see:

* Click counts
* Page breakdowns
* Traffic source filters
* Device segmentation

***

#### Best Practices

| What to Track         | Example Attribute           |
| --------------------- | --------------------------- |
| Hero CTA              | humblytics="hero-cta"       |
| Pricing button        | humblytics="pricing-btn"    |
| Navigation link       | humblytics="nav-about"      |
| Footer contact button | humblytics="footer-contact" |

Use clear and unique values to make reporting and filtering easy inside your dashboard.

***

#### Where to Add Attributes by Platform

| Platform   | How to Add the humblytics Attribute               |
| ---------- | ------------------------------------------------- |
| Webflow    | Use the “Custom Attributes” field in the Designer |
| WordPress  | In Gutenberg, use the HTML view or a Code block   |
| Shopify    | Add attributes in theme.liquid or section files   |
| Framer     | Use Embed blocks or custom components             |
| HTML sites | Add directly to your element’s tag                |


---

# 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-track-custom-click-events/how-to-track-click-events-on-custom-self-hosted-site.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.
