Pages and page groups

Pages and page groups for web applications provide you with an extra layer of contextual information for your user actions and other entities. You can then use this additional context to enhance the finding, filtering, and aggregating of your end users' experience, performance information, and troubleshooting-relevant data.

  • Use pages to analyze your users' actions from a macro level.
  • Use page groups to automatically group load actions that lead to technically similar or equal pages while not losing the details of individual instances.

Formerly, you needed user action naming rules to achieve a similar outcome.

Analyze route changes of your web application

Single-page applications (SPAs) and progressive web applications (PWAs) are the de facto standard for building modern web applications. One distinctive feature of these apps is that end users don't necessarily trigger full page reloads when they navigate from one page to another.

To learn how to quickly get to the performance details of your web application's route changes—also known as "soft" or "in-page" navigation—see the blog post Optimize modern web applications with automatic insights into pages and page groups.

Let's have a look at our sample app EasyTravel, which is a travel-booking portal.

EasyTravel presents a number of journey offers.

  • Each offer has its own detail page.
  • The detail pages are identical technically; only the content differs. An example detail page would be /easytravel/journeys/123456. The only item distinguishing this page from other detail pages is the journey identifier.

Page groups

Where would you start analyzing the performance of such an application?

Instead of comparing journeys, it makes more sense to start one level up and see into the performance of groups of technically identical pages. This is where page groups come in. Page groups are based on the paths and IDs that Dynatrace automatically detects. Here is the relationship between pages and page groups for this example:

Pages and page groups

In general, page grouping works out of the box. Whenever you use Angular or Vue.js, Dynatrace automatically instruments your respective framework router, which then immediately provides you with developer-friendly, intuitive names and groups. If you use other frameworks, such as React, then Dynatrace uses intelligent cluster-side grouping based on path levels and automatic ID detection in the path of your page to group your web application pages.

User actions

A user action can:

  • Trigger a full page reload, such as when you select a navigation link on a server-side rendered page and cause a load action.
  • Start a route change, such as when you trigger a soft navigation through an XHR action in a single-page application.
  • Occur without a route change or a page reload, such as when you select a button that triggers an XHR action, which fetches new data and updates a chart, but you remain on the same page.

Note: A route change in the Dynatrace web UI isn't a new and true user action type. Instead, it's a convenient way to aggregate the XHR user actions that caused a route change in your single-page application.

Define your own page names and page groups

If the automatic grouping doesn't cover all of your application's use cases, use the RUM JavaScript API to set your own page and page group names.

  1. In your index.js file, make a call to dtrum.enableManualPageDetection(), which tells the RUM JavaScript to stop auto-detecting and auto-grouping your page change events.

  2. Use the following API command to set your desired page name and group:

    dtrum.setPage ({
        name: "My page", 
        group: "My page group" 
    });
    

What's the difference between load actions and pages?

Load actions

To group multiple load actions representing page loads of similar or technically equal pages, you first have to create a placeholder. Usually, you remove all IDs or individual details to make the resulting URL uniform, which is then used in a user action naming rule. These steps map user actions, such as Loading of page /journeys/62511135 and Loading of page /journey/61303030, to Loading of page /journeys/id.

While this allows you to look at aggregated performance data for one and the same page, you lose the details of individual pages.

Pages and page groups

With pages and page groups, you keep all of the individual details, so you can see and analyze your performance and troubleshooting information at the page level and the page-group level. The attribute page name preserves the individual detail, while the attribute page group can now be used to look at aggregates.

However, in terms of performance analysis, pages don't replace load actions; they complement them since the underlying performance data is still drawn from the underlying load actions.

Access pages and page groups

To review monitoring data on pages and page groups, start with the application overview page. To get there, go to Web in the Dynatrace menu, and select your application.

Application overview page

Page groups and Pages tabs

The application overview page displays the Top 3 pages section that includes the Page groups and Pages tabs. Choose a tab that displays the granularity you want.

The Page groups tab lists the top three page groups based on the number of page views per minute.

Page groups tab

  • Select a group to go to its overview page.
  • Select View all page groups to display Multidimensional analysis for all page groups.

Multidimensional analysis

The Multidimensional analysis page offers a particularly useful overview of all pages or page groups.

Multidimensional analysis for page groups

This page can help you find answers to the following questions:

  • Which page groups or pages are the most viewed?
  • Which are the most visited?
  • Which are the busiest page groups or pages where lots of actions occur?
  • Which contain the most errors?
  • Which are slow on their initial page load?
  • Which are slow on a route change?

Sessions display your detected page changes as an additional Page change event type, including page changes based on full page loads and route changes. Dynatrace User Sessions Query Language (USQL) allows you to query and count your Page change events.

Page group or page overview

On the Multidimensional analysis page, select a page or page group to go to its overview page. In the screenshot below, you can see the overview page for the ‎journeys/:id/book page group.

Chart page and page group performance

To chart the performance of a page or page group, create a calculated metric for the page or page group in the existing multidimensional analysis. You can then use Data explorer to chart the metric on a dashboard of your choice.

To create a calculated metric for a page or page group

  1. In the Dynatrace menu, go to Web.
  2. Select the application to display its application overview page.
  3. Under Impact of user actions on performance, select Analyze performance.
  4. In the Detail analysis for selected timeframe section, select a performance metric, and then set a filter for a page name or a page group.
  5. Select Create metric. Create a metric for a page group

For details on creating and charting calculated metrics, see Calculated web application metrics.