Guiding the clickstream: Browser user flow exploration and oversight

A user flow, also known as a user journey, is a path an end user or customer navigates through a website to perform a specific action or task using a product or an application’s features. This flow consists of the actual web pages the user has visited for various purposes.

Understanding the user flows and experience is crucial for meaningful interactions, business outcomes, and revenue growth. A few benefits of analyzing user flows include:

• Understanding your actual user personas
  • By analyzing every action and page the end user visits on your website, you can better understand who your customers are, how they benefit from your products and services, and what they want.
  • These insights enable product and engineering teams to spend their resources on the right set of features.
• Improve user adoption
  • For any enterprise product, user adoption and experience are of utmost importance as they signify improved user experience and product engagement.

Customers often spend a good amount of money and time in defining the most important user flows, which are often based on the understanding of the business segment, product knowledge, and personas. While some products in the market focus on providing this information, they often require additional implementation steps, analytical capabilities, and the integration of numerous tools for the team to manage. Additionally, these tools don’t provide performance insights that DevOps teams can leverage to identify and address issues within a user flow.

The New Relic user flows app consolidates user flow details and performance impacts into one screen, with just a couple of clicks. 

One-click simple setup

• User flows are derived by culminating existing browser interaction performance data captured by our browser agent.
• There’s no dependency on engineers to determine customer flows and their acceptable performance limits.
• This simple setup saves time and resources.

Business value

• Capture end-user flows based on real user site interactions (via browser agent).
• Provides funnel conversion of flows with one click.
• Shows how end users drop off through each stage.
• Capture the step-by-step performance of real users.
• Improved adoption of your product with increased user experience and loyalty.

Prerequisites

There are a couple of requirements that must be met before you can use the New Reli user flow app: 

1. The browser application must be developed in single-page application (SPA) architecture.
2. The browser application must be instrumented with the latest version of browser agent and configured in PRO + SPA mode.

Setup guide

This user flow app is available from the New Relic catalog.

To enable the user flow app in your account:

1. Go to Integrations and Agents, click on the Apps & visualizations link, and then search for user flows.

1. Click the User Flows card, and then click the Add this App button to add it to your account(s).
2. Click Open App to launch the app. Note: On the first time accessing the app, you may be prompted to enable it.

Once you’ve enabled the app, the user flows app can be accessed:

1. In the Your Apps section, find and click on the User Flows card to open the app.
2. In the browser application left-hand navigation menu item. Note: You may need to click on the Add More ellipsis if it doesn't show up by default.

Read our documentation to learn about Nerdpack permissions, if you have trouble accessing the app.

Upon opening the app, you’ll be asked to select a browser entity to analyze. Note that the available list of entities is derived from the account selected in the platform account dropdown, and that the flow analysis will be generated for the period selected in the platform timepicker.

Once you’ve selected the desired account, browser entity, and a time range, the app will:

• Display the top 5 landing pages of the users for this browser entity. 
• Further from each landing page, user flows are automatically derived and visualized as flow diagrams.
• The app avoids cyclic paths at multiple levels.
• The app also provides information about unique browser interactions and browser sessions.

Each flow map provides the following information:

• Browser interaction names and page views through which the users have navigated through your website.
• Number of page views on the landing page. (This does not represent unique users, as user names are not captured by the browser agent).
• Number of visitors (page views) across each path.
• On the top-right corner of each flow map, the average end-to-end duration from all paths is calculated. For example, in the above image, there are two possible paths. The average displayed is the average of both paths.
• The domain name is displayed only on the first landing page.
• Click on the title of the browser interaction card to rearrange each of the browser page view cards.
• Click on the body of the browser interaction card to view the performance page.

Click on the "click here" link to view all the individual journey details, after which a pop-up window will display all the flows the end users have taken. Each record provides the actual flow path taken by a user.

Click on each open query builder, which provides the New Relic Query Language (NRQL) to

1. E2E duration query: Calculates the overall end-to-end flow duration.
2. Stepwise query: A time-series-based line graph to quickly identify which step takes longer duration. This is very useful to quickly identify and troubleshoot the step  if there are performance issues.

3. Funnel query: Funnel analysis (conversion rates) for each user flow.

4. Within the query builder you can create an alert or add this widget to a dashboard, which can help DevOps, site reliability engineers (SRE), and business owners.

Click on the body of the browser interaction card to view the browser interaction performance page view to investigate any performance-related issues that could be hindering the user experience.

Conclusion

The New Relic user flows app is a powerful tool, one with which businesses can make data-driven decisions to enhance user satisfaction, drive conversions, and ultimately achieve their business objectives.