What are Interactive Events, and How to Use Them

Adding Interactive Events to UserLeap

Interactive Events

Please reach out to success@userleap with any questions or via in-app help chat.

 

UserLeap has 3 different ways in which you can track user behavior:

Please note that in order to trigger surveys, you must first deploy our UserLeap SDK

  1. Page URL Events - uses regular expressions to target page URLs on your web-app
  2. Programmatic Events - adds existing events from the UserLeap JavaScript SDK via the UserLeap(‘track’, ‘event_name’) method.
  3. Interactive Events - a method of tracking user clicks on specific parts of your web application without modification to your existing codebase(read below)

Interactive Events can be found on the Events Page, here

 

There are two options for Interactive Events:

  1. By looking for specific text content ( known as InnerText)
    • Accounts for most cases 
  2. By looking at for specific HTML element attributes (known as CSS Selectors)
    • Requires some knowledge of HTML and CSS

 

Interactive Events - InnerText

Here’s documentation from W3 regarding the InnerText CSS property 

 

Adding Event using InnerText

Step 1: Click Add

 

 

Step 2: Select “Interactive Event” 


Step 3: Type in the inner-text, add in the URL pattern (regular expression) where this click-text behavior occurs (required), enter in an event name (this is what it’ll show up as in UserLeap), give it a description (optional, but recommended)

Not sure where/how to find InnerText? See  the "Finding InnerText" section below.

 

Step 4: Click “Save”

You’ve now created a new event to Track in UserLeap. Please note that events can take up to 15 mins to begin showing usage diagnostics.

 

Finding InnerText:

InnerText is the easiest way to add interactive events to UserLeap. InnerText lets you track most button clicks by simply specifying the text content of an element.

You can test to see if you’re adding in the correct value by taking the snippet of code and pasting it into your Chrome Developer Console (video below)

In this video, we are using the “Add New Event” InnerText from the earlier example. 

 

 

To open the developer console in Chrome, right-click anywhere on the page, and select “Inspect.”  You can also do ‘Option’ + ‘Cmd’ + ‘i’.

 

Step 1: Copy the snippet to your clipboard

Step 2: Open the Chrome Developer Console, navigate to the “Console” tab

Step 3: Paste the snippet, and hit “Enter”

Step 4: If it matches any InnerText on that page, it’ll return all cases that are true

Step 5: When you hover over the matches, look on the right side to see it turns “blue”. This will indicate the portion of the webpage that matches your criteria.

 

Interactive Events - CSS Selector

⚠️ some knowledge of CSS and HTML is required

Similar to the InnerText option , CSS Selectors let you target specific elements on your website and track those events in UserLeap. There are many options available, but we’ll try to cover two of the most common ones below. If you are still experiencing issues or have questions, reach out to success@userleap.com.

 

For a more comprehensive list of CSS Selectors, see here.

Before you get started, you’ll want to first find and open the Chrome Developer Console (‘Option’ + ‘Cmd’ + ‘i’) and then click on the “Element Selector” in the top left. 



id Example

 

Id’s are HTML attributes that will always be unique on a given page. For this example, we’ll explore a portion of Slack’s homepage: 

 

Step 1: After clicking on the Chrome Element Selector (pictured above), select the element on your screen you want to track. If done correctly, the various parts of your page (on the right in the image above) should start to highlight 

 

Step 2: Determine the element you want to track in UserLeap; in this example we’ll be using the “Download Slack for Mac” button as seen in the earlier image. After clicking on that button (with the Chrome Element Selector enabled) you’ll be redirected to the portion of the HTML code that identifies the specific element

 

Step 3: In the highlighted section, we’re looking for the id attribute (id=”some_id”). If we look towards the end, we’ll notice that it says id=“download_page_mac_ddl”. To create the corresponding CSS selector, take the portion in quotes and prepend the “#” symbol (shown below)

#download_page_mac_ddl

 

 

Here’s a quick test to see if it’s working

 

A more advanced example

 



Step 1: After clicking on the Chrome Element Selector (pictured above), select the element on your screen you want to track. If done correctly, the various parts of your page (on the right in the image above) should highlight

  • HTML elements correspond to the general area as well as specific buttons and clicks within that area, a good rule of thumb is to select the outer part of any button/click element

Step 2: Determine the element you want to track in UserLeap, in this example, we’ll be using the “Programmatic Event” button as seen in the image below. You’ll notice that there’s a larger area selected as well, we’ll get into that in the next step

Since we ONLY want the “Programmatic Event” button, and not the others in line, we have to specifically find the selector that corresponds to that element. Most often, in CSS similar elements (or elements on the same line) are more likely than not to have the same “general” classifier.

As expected, when we select just the “Programmatic Event” we realize the same class is applied to the other two buttons in the row. 



Step 3: To account for the above, let’s first select the “Programmatic Event” using the element selector. It should take you to the corresponding element in your HTML. From there, we’ll need to go up and find its direct parent element.

 

Direct parent element 


This is how you find the child element, with an identifier of e1cdhl952 css-8gs3on e1cyc7cw0

 

The direct parent element looks as follows (it's one above the child) 

Let’s copy and paste the CSS selector for the direct parent element (the video above highlights the child: e1cdhl952 css-8gs3on e1cyc7cw0)

Here's the direct parent:

Css-ltfh7c e1cdhl950

The CSS Selector for an element with these classes (from above) is as follows:

.css-ltfh7c.e1cdhl950

Let’s give the selector above a test…

 

 

If all goes as intended, at the very end you should be able to hover over the console, and it will only select the part you targeted (in this case, the larger element)

 

 

Step 5: Since we want to select the first child of that parent element, we’ll have to add to the syntax from above to hone in on that area. Again using guidelines from W3 Schools, we’ll see that one way to accomplish this is by using the “>” syntax. 

 

We’ll go back to the elements tab in Chrome to find the next progression...

 

 

.css-ltfh7c.e1cdhl950 > .e1cdhl952

(from the video above)

 

When you test this in the console, you should see three active selections - “Programmatic Event”, “Page URL Event”, “Interactive Event”

 

Step 6: Finally, to get from the three selected above to JUST the “Programmatic Event” button we need to add one more path classifier. This time we’ll use the “nth-of-type(x)” syntax to drill in on that button

Because it’s the first button, but shares the same selectors as the other two, the specific syntax will be. 

.css-ltfh7c.e1cdhl950 > .e1cdhl952:nth-of-type(1)

 

Let's test to see if it works as expected.