# How to Add Custom Click Tracking for Framer Sites

Humblytics automatically tracks click events and form events on Framer projects—no setup required. Add custom attributes to your Framer elements when you want to label specific click events (e.g., to distinguish a particular CTA from other links).

**Adding Custom Attributes in Framer**

1\. **Open Code Overrides**

• Click on the provided link in your project.

• Scroll down on the right toolbar.

• Click on **Code Overrides**.

2\. **Add a Code Override**

```javascript
import { type ComponentType } from "react"

export function withHumblyticsAttribute(Component): ComponentType {
    return (props) => {
        return <Component {...props} data-humblytics="your-event-name" />
    }
}
```

**Note:** Replace `withHumblyticsAttribute` with your own function name and `"your-event-name"` with a descriptive name for the event you want to track (e.g., `"nav-pricing"`, `"hero-cta"`, `"footer-signup"`).

‍**‍**Using Custom Attributes in Humblytics

1\. **Log in to Humblytics**

• Open your Humblytics dashboard and log in.

2\. **Navigate to Links under Analytics**

• Go to **Analytics → Links** to review click event data.

3\. **Monitor Custom Attributes**

• Look for the custom attribute event name (e.g., humblytics="hero-nav-btn") once it has been triggered.

• Use the real-time insights and reports to analyze data linked to your custom attributes.

• Track specific interactions and gather detailed analytics based on the custom attributes added to your Framer elements.

<figure><img src="/files/bmK4mOFqJJSo7VkaIucj" alt=""><figcaption></figcaption></figure>

**Track FAQ Click Events**

No more second guessing, track your most-clicked FAQs in Framer without any custom code or attributes. Install the script, and we’ll show you which questions your visitors are interacting with. This functionality is also available for Webflow using custom attributes.

<figure><img src="/files/7ZOOSwSDrl0PUkS0KnjY" alt=""><figcaption><p>FAQ elements are automatically tracked with Humblytics</p></figcaption></figure>


---

# 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-add-custom-event-tracking-for-framer-sites.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.