A click event property is a type of custom event property that allows you to collect data from UI elements and events during a Feature click. This helps you tag your app and gain additional context without requiring coding or Track Events to collect additional parameters. The click event property captures the targeted object and its value.
Pendo admins can add up to five properties per Feature using CSS selectors to capture UI elements or JavaScript to capture objects and their properties. If Pendo finds multiple matches for the CSS selector at the time of a click event, we prioritize matching the clicked element.
Click event property data is typically used to understand the context for a user click when variables on the page or user selections change during their workflow. Common examples include collecting the value of a text field or dropdown menu when a form is submitted, collecting query terms in a search bar to identify the most common search terms, or collecting the name or SKU of an item when it's added to a cart.
When viewing Feature details, you can access the event property values that have been recorded for that event. You can also use click event properties in segments and in Data Explorer to filter or group your analysis by common values using event property filters and groupings.
Important: Be mindful when setting up click event properties, as they can collect text from the UI (including user-entered text), even if text collection is disabled in the agent. This information can be valuable for understanding user behavior in detail, but it could raise a security concern if Personally Identifiable Information (PII) is present in the UI. Pendo only collects click event property data once an admin tags them, and data collection doesn't begin until then.
Requirements
Note the following requirements before proceeding with the instructions below:
- Pendo admin to activate and tag click event properties
- Agent version 2.45.0 or later (Learn how to upgrade your version)
Once click event properties are tagged, any Pendo user can use click event properties to create segments or run Data Explorer reports. Your subscription can have up to 10,000 unique custom event property keys, including Track Event properties.
Enable click event properties
You can turn click event properties on or off by navigating to Settings > Subscription Settings and selecting the checkbox for Click event properties within the Information section. This setting controls click event properties for all apps in your subscription.
To turn on for your subscription, select the empty checkbox, then read the disclosure and confirm that you want to activate click event properties. Enter I understand to confirm, then select Enable.
After you enable, any Pendo admin can tag click event properties when tagging Features in the Visual Design Studio.
If you need to disable click event properties, select the Click event properties checkbox, then select Disable in the confirmation dialog. This change impacts all apps in the subscription.
When you turn off click event properties, this stops all click event property data collection and removes click event properties from the Pendo UI. Previously collected data is still visible. Re-enabling click event properties resumes data collection and access to previously tagged click event properties, but there are no retroactive analytics for disabled click event properties.
Note: To permanently delete click event property data, contact Pendo Support.
Add a click event property
Add click event properties while tagging new Features or editing existing Features in the Visual Design Studio. You can tag up to five event properties for each Feature.
Note: Click event properties are only supported within the same frame. If a click event occurs outside of the frame where the property is set, the value won't be captured.
- Navigate to Product > Features, then select Tag Features.
- Enter your app URL, and choose a tagging mode: Tag side-by-side orTag in an overlay.
- Select Launch Designer to open the Visual Design Studio.
- If the Feature you'd like to define an event property for isn't already tagged, select Tag Feature and select the appropriate element in your app. Once selected, skip to step 6. For more detailed tagging guidelines, see Tagging and viewing Features.
- If the Feature you'd like to define an event property for is already tagged, select Tagged Features, find the relevant Feature, then hover over the Feature name and select the edit icon.
- At the bottom of the window, select the Event Properties dropdown, then select + Event Property.
- Enter a Name for the property you want to collect. This is a required field and should be unique across all apps. Below are a few tips on naming:
- Names must use lowercase letters, numbers, or underscores only and can't start or end with two underscores, such as __name__. This format results in an error message.
- A feature that uses multiple words like "language selector", should be entered as language_selector.
- If you have identical property names like “country” in different apps, it’s important to give the event property an app-specific name like app1_country so that you can properly report on data from multiple apps.
- Next, tag the Source. You can use CSS targeting to narrow down the list of properties for the value, or you can select Advanced (JS) to use Javascript and target a property directly. The value populates with a list of available properties for the tagged Feature or targeted CSS element. Below are a few tips:
- Unless you're comfortable with using your browser's developer console, we recommend using Standard (CSS) to target an element. This option allows you to easily select the correct properties, like input fields. For more information on custom CSS tagging, see Advanced Feature tagging.
- If you're collecting an input field property, selecting the correct value is easier if something is entered into the actual field since a preview shows what will be collected in the dropdown.
- The most commonly used value options, like value and innerText, display at the top of the list. Choose the option that gives you the preview that matches what you want to collect.
- The Select a value for the element field supports modifiers to the selected property. For example, innerText returns the text contained in the element, while innerText.length returns the number of characters in the text.
- Common element values for text collection are innerText or textContent.
- If using the Advanced (JS) option, you must specify the path to a value referencing window object properties. You can't invoke functions; the value must already be populated.
- View the Preview to see an example of the value collected by your selected property if it's currently visible in the Visual Design Studio.
- To save the event property, select Apply. The event property name populates as an existing event property in the Edit Feature window.
In the following example image, configuring the Type field to collect #add-new-select-type as the click event property captures this dropdown selection after a visitor submits the Add New form.
- To add another event property to the Feature, repeat steps 6 to 10. You can add up to five total event properties per Feature.
- After you add all the click event properties you want, select Save or Save Changes to start collecting data for the added event properties.
Notes: Values with more than 512 bytes appear as event properties
JSON too large in the Pendo UI. This limit applies to the whole property’s JSON, not a single event property value. Your subscription can have up to 10,000 unique custom event property keys, including Track Event properties.
Edit or delete an existing click event property
You can edit or delete click event properties from the same Event Properties section when editing a tagged Feature in the Visual Design Studio.
- Select the edit icon next to the relevant event property to open the details and make any necessary changes.
- Select the delete icon next to the relevant event property to permanently delete it. When you delete an event property, the data is no longer available in analytics.
If you delete by mistake, select Restore to undo the deletion. This option isn't available after you save your changes.
After you edit or delete an event property, select Save Changes to update the Feature.
Modify the event property type
Four different data formats are supported for click event properties: string, number, boolean, and time/date. By default, click event properties are collected as strings. It's important to categorize click event properties properly, as you can't create accurate segments or reports using improperly categorized data.
It's best practice to categorize a newly tagged property immediately after tagging it through Settings > Event Properties.
You can find and categorize all custom event properties on the Event Properties page. Select an event property name to see the Features or Track Events associated with it.
To update the event property type, find the relevant event property in the table and select the corresponding dropdown menu in the Type column, then choose the correct categorization value from the dropdown list.
Warning: Make sure you choose the correct category the first time. Changing the category overwrites any previously collected property data. This is why it’s best to properly categorize the event property immediately after tagging it for the first time.
Segment with click event properties
After tagging a click event property, you can add it to a segment by opening the segment builder anywhere in Pendo and following these instructions:
- Update the Name and Visibility as needed.
- Select + Add Rules, then choose Feature for Filter by.
- Open the Select Feature dropdown menu, then select the Feature that's associated with the click event property you'd like to query.
- Specify the Number of Clicks. If you want to segment all visitors who've interacted with the Feature within a time period, set this to greater or equal to 1.
- Specify the date range during which the Feature was clicked, then select + Use Event Property.
- Select the event property from the dropdown menu, then choose the appropriate value from the Select Option dropdown menu.
- Click Create Segment to save the segment.
View click event property data in reports
You can filter and group usage data by click event property values in Data Explorer. For more information on how to use event property data in Data Explorer, see our articles on Event properties and Data Explorer.
Frequently asked questions
What’s the difference between click event and Track Event properties?
Click event and Track Event properties differ in the types of events they're associated with. Here are some of the key differences:
- Click events. Related to Feature clicks, such as a Submit button or menu selection. The Feature must be tagged in Visual Design Studio. Properties are captured at the time a Feature is clicked.
- Track Events. Related to custom point-in-time events, such as an API call or an error. The Track Event must be set up by a developer. Properties are captured programmatically. For more information, see Track Events.
Can I use event properties in segments I’m using for guide targeting?
Not at this time. To learn more about segments and guide eligibility, see Segments.
Are click event property analytics retroactive?
No, Pendo captures click event properties after you create them in the Visual Design Studio. This ensures you're collecting intended properties that exclude any sensitive or personal data.