# Clicked Element Filters

Clicked Element Filters allow you to analyze user behavior by filtering session data based on specific elements on your website or application.&#x20;

By applying this filter, you can:

* **Understand user intent:** Gain insights into why users click or do not click certain elements and understand their navigation patterns.
* **Troubleshoot issues:** Identify broken or unresponsive elements that users frequently attempt to interact with.
* **Perform A/B testing:** Compare the number of users that clicked on a button vs another to understand what works better with your users and make design decisions accordingly

You can use the text of a clicked element or its ID or CSS selector to filter the data.

### **Clicked Element Text Filter**

#### **How to Use the Clicked Element Filter**

1. Select **"Clicked Element Text"** from the filters

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FWo3wMuTzG14ZorOHce7X%2Fimage.png?alt=media&#x26;token=0f4a0a6a-8165-460f-b20d-47c5926aeb61" alt=""><figcaption></figcaption></figure>

2. **Select the operator as per your requirement**

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FbENJPovQKCS7Ff4OzjB0%2Fimage.png?alt=media&#x26;token=0c7854a1-e8ea-4448-81f2-f25b8f9335ff" alt=""><figcaption></figcaption></figure>

3. Specify **the** **element**/ select the element from **Dropdown**

> Input the unique identifier of the element (e.g., button text, link text...).

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FwjhM84JWXXXWyMvmEvhB%2Fimage.png?alt=media&#x26;token=34965c45-9d0b-4b97-9cf2-bcb7118308c5" alt=""><figcaption></figcaption></figure>

4. Additionally, you can add a URL filter (Optional)

> If not specified all pages where the particular element was clicked, are considered.&#x20;

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FD0Ww4fojks5pQWaCixy5%2Fimage.png?alt=media&#x26;token=aa8e41cb-d436-4756-8995-22b66b95aa21" alt=""><figcaption></figcaption></figure>

#### **Use Cases for Clicked Element Filter**

* Monitor clicks on specific call-to-action buttons.
* Analyze interactions with navigation menus.
* Track clicks on promotional banners or key features.

***

### **CSS Selector Filter**

**CSS Selector Filter** provides an alternate way to filter click interactions based on CSS selectors or click element IDs. This is particularly useful when targeting elements dynamically or when identifiers are not unique.

#### **How to Use the CSS Selector**

1. Select **"Clicked Element Text"** from the filters

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FYYqqPpWtB91KvFIOw89p%2Fimage.png?alt=media&#x26;token=87674f37-3d0d-4ce4-9142-c88bb8cb9450" alt=""><figcaption></figcaption></figure>

2. **Select the operator as per your requirement**

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2F8AlAwB408CTMPxVjYLI0%2Fimage.png?alt=media&#x26;token=2590b0fb-78df-4b68-a9fd-7506881b6252" alt=""><figcaption></figcaption></figure>

3. Select the **CSS selector** from the dropdown. Preferably do a "contains" on the element ID because the CSS selector that Zipy captures in real time might vary from what appears on your live site.&#x20;

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FYFNicW9v5xrOmaH5cQFc%2Fimage.png?alt=media&#x26;token=5f12d977-9f48-418b-9e72-ebbd46893804" alt=""><figcaption></figcaption></figure>

4. Additionally, you can add a URL filter (Optional)

> If not specified allwhere the CSS Selector element was clicked, are considered.  pages&#x20;

<figure><img src="https://3440602746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcCYilc27NCELgnKQNPVF%2Fuploads%2FWOs07I13TBQqiQpK7wEF%2Fimage.png?alt=media&#x26;token=066040fb-02f6-4a4a-ab67-5a25a66c5e04" alt=""><figcaption></figcaption></figure>

#### **Use Cases for CSS Selector Filtering**

* Debugging issues with dynamic elements.
* Analyzing interactions on elements styled with specific classes or IDs.

### **Best Practices**

* **Use Specific Selectors:** Narrow down your focus by providing unique identifiers or detailed selector patterns to avoid noise in your data.
* **Combine Filters:** Pair Clicked Element or CSS Selector filters with other session filters like user details, location, or device for deeper insights.
