You can also record user journeys through your app as either “Features” or “Funnels”.
Features and Funnels track how many users completed one or more click or page view actions, each of which matches the template that was recorded when the feature/funnel was set up. They work in much the same way, the distinction is primarily in how they present their results.
Here's a video example of setting up a new Feature:
If you wanted to track how many people were updating their password you might add a new feature named “Changes Password” and record a session in which you navigate to the “/account/” page, type some new value in the password box, and click the “Update Password” button. That would look like this in Prodlytic's dashboard:
By default the template for any click action is based on a combination of the Page, Control Type, and Text values. Here is the default template for the click on the Update password button:
If you leave this as it is Prodlytic will look for click events on the /account/ page that have a control type of “Button” and a text value of “Update password”.
If there were multiple buttons labelled “Update password” throughout your site and you wanted to count clicks on any of them as counting towards this feature then you could untick the Match Page tickbox. Then any clicks on elements with a control type of “Button “ and a text value of “Update password” would be counted.
If you need more control over what the feature or funnel is tracking you can tick the DOM Pattern checkbox. For example, if there are multiple buttons on the page with the same text and you want to only track clicks on a particular one of them:
Default behavior is for Prodlytic's Feature/Funnel recorder to record the full DOM path of the clicked element when recording the session. You can leave this as it is or edit the DOM path down to a partial path. Or even just a single CSS class name.
Once the DOM Pattern checkbox is ticked Prodlytic will ignore the Control Type and Text value of clicks and only look for clicks that match the DOM pattern provided when counting how many times the Feature/Funnel has been completed.
The DOM Pattern is a comma separated list of element types, element IDs, and CSS class names that start with the clicked element and go up from there towards the HTML <body> element. The body element itself is not included.
For example, a click on the button element in this HTML:
<div id=”main” class=”container”>
Would result in the following DOM Pattern being recorded:
When manually configuring the DOM Pattern to match you do not need to leave it as the full path that's been recorded. Any combination of element types, element IDs, and CSS classes can be specified.
The following table contains example of DOM Patterns that could be used and what they would match against. Any of the following would match for a click on the button element in the example above.
If you have questions about how Prodlytic works even after reading this document then feel free to get in touch. We're happy to help you understand exactly how Prodlytic works.