››

How to Trigger a Nudge When an Element Is Clicked

With Qualaroo, you can show a nudge when the user clicks on a page element.

This can help you to:

Get feedback on specific elements.
Learn about user reactions to new website features.

Here's what the triggered nudge will look like when a user clicks a button:

Preview of Nudge getting triggered when the user clicks an element, i.e., a button

To trigger a nudge when an element is clicked:

Step 1: Locate the element on a page and copy the CSS selector. To do so,

Go to the page on which you want to trigger the nudge.
Right-click on the element and click Inspect.

Click Inspect on an element on the page where you want to trigger the nudge

Right-click on the highlighted HTML element in the Inspect window. Click on Copy > Copy selector.

Select "Copy Selector" under Copy after right-clicking on the element

NOTE: A CSS selector helps browsers to find elements on a page.

Step 2: Append JavaScript to your Qualaroo snippet

Enter the custom property: 'event': 'Clicked My Element' to the element with the CSS Selector. Here, #newsubmit.
Append the following script before the </body> tag in your HTML code.

var e = document.getElementById('newsubmit');
if(e){
e.onclick = function(){
console.log("clicked");
window._kiq.push(['set', { 'event': 'Clicked My Element' }]);
};
}

</script>

var e = document.querySelector("#newsubmit" > div);
if(e){
e.onclick = function(){
console.log("clicked");
window._kiq.push(['set', { 'event': 'Clicked My Element' }]);
};
}

</script>

Note: The selector can be lengthy, depending on the element you select to trigger a nudge. You can add & use "id" and use the <getElementById> method to display nudge.

This code will set the custom property 'event': 'Clicked My Element' when the element with the CSS Selector #newsubmit is clicked.

Step 3: Set up the targeting event

In the TARGETING section,

Click to expand Who and then expand the Advanced subsection.

Expand the Advanced subsection under Who

Check the box next to “When passed custom property is matched” in the advanced targeting.
Enter “event = "Clicked My Element" in the textbox.

Set Custom Property Targeting

Your survey is ready for targeting.

And that's it! If you encounter any issues or have any questions, don't hesitate to reach out to our support team.

Related Articles: