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, such as errors, out of the box. This additional context can then be used in the Dynatrace web UI to enhance finding, filtering, and aggregating 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. Among other things, this means that end users don't always trigger full page reloads when they navigate from one page to another.

To learn how to get to performance details on your web application's route changes (AKA soft or in-page navigation) with only three clicks, see our Optimize modern web applications with automatic insights into pages and page groups blog post.

To illustrate, our sample app is EasyTravel, a holiday 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 details pages is the journey identifier.

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

Instead of comparing journeys, it'd make more sense to start one level up and see into the performance of groups of technically identical pages. The is where page groups come in. Page groups are based on the path and IDs that Dynatrace automatically detects. Here is the relationship between pages and page groups from the 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 them.

Define your own page names and page grouping

If automatic grouping doesn't cover all of your application's cases, use the Dynatrace 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 JavaScript monitoring code 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" 
    });
    

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, in a Single Page Application, when you trigger a soft navigation through an XHR action.
  • Happen on the page, such as when you select a button, causing an XHR action that fetches new data and updates a chart while staying on the same page.

Note: A route change in the Dynatrace web UI isn't a new and true user action type. Instead, it is a convenient way to aggregate XHR user actions that caused a route change in your Single Page Application.

What's the difference between pages and load actions?

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 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 in Dynatrace

To review monitoring data on pages and page groups in the Dynatrace web UI, start with the Application overview page (go to Applications and select an application name).

  • The Application overview page displays a Top 3 pages section, which includes tabs for Page groups and Pages. Choose the tab that displays the granularity you want.
  • The Page groups tab lists the top three page groups, with the views per minute for each group.
    • Select a group Name to go directly to the Page group overview for the selected group.
    • Select View all page groups to display Multidimensional analysis for all page groups.
  • The Pages tab lists the top three pages, with the views per minute for each page.
    • Select a page Name to go directly to the Page overview for the selected page.
    • Select View all pages to display Multidimensional analysis for all pages.

Multidimensional analysis offers a particularly useful overview of all pages or page groups, with answers to questions such as:

  • Which are the most viewed?
  • Which are the most visited?
  • Which are busy pages, where lots of actions happen?
  • Which contain the most errors?
  • Which are slow on their initial page load?
  • Which are slow on a route change?

And from the multidimensional analysis, you can go any page or page group overview.

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 the Data explorer to chart the metric on a dashboard of your choice.

To create a calculated metric for a page or page group

  1. Go to Applications and select the application to display the application overview page.
  2. In the Impact of user actions on performance section, select Analyze performance.
  3. In the Detail analysis for selected timeframe section:
    • Select a Performance metric.
    • Set a filter for Page name or Page group.
    • Select Create metric. For details on creating and charting calculated metrics, see Calculated web application metrics. Calculated metrics