# Configuring Key pages

**Key pages** divide a web application into relevant parts based on URL patterns, and events detected based on CSS selectors and/or browser tab titles. This way, you can gain insights on business-critical points of end-users journey by allowing you to:

* Tag page view events, even if you disable[ URL collection](#keypages-discoveringkeypagesbycollectingurlsurlcollect) for specific applications for privacy reasons. Upon detecting an event, [Nexthink browser extension](https://docs.nexthink.com/platform/configuring_nexthink/bringing-data-into-your-nexthink-instance/deploying-nexthink-in-non-vdi-environment/installing-the-nexthink-browser-extension) tags the page view or usage event with the pre-defined key pages.
* Track the usage of different parts or elements of an application, unlike URLs, which are not available on `web.events` table.
  * Detect soft navigation events where URLs remain unchanged.
* Indicate specific business operations when adequately defined. For some business applications such as Oracle NetSuite ERP or SAP S/4 HANA ERP, the URLs change according to the application functionality.
* Provide insights into which pages are loaded for various business transactions, how often, and what their page load time is.
* Filter the **Applications** dashboard based on specific key pages.

***

## Configuring Key pages for web applications <a href="#configuring-key-pages" id="configuring-key-pages"></a>

After [configuring the fields in the General tab](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications) of the web application configuration, follow these steps to configure the **Key pages** tab:

{% stepper %}
{% step %}
[Discover key pages](#keypages-discoveringkeypagesbycollectingurlsurlcollect) specific to the target web application by collecting URLs.
{% endstep %}

{% step %}
[Add key pages](#keypages-definingkeypages) for the web application.
{% endstep %}

{% step %}
Optionally, [define CSS selectors](#defining-css-selector) for **Key page detection** based on page elements.

CSS key-page identifier detection works even when the web application URL remains unchanged.

If needed, use defined CSS selectors as identifiers when [adding key pages](#keypages-definingkeypages).
{% endstep %}

{% step %}
[Order key pages](#ordering-key-pages) to ensure proper URL matches.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Alternative option**—requires [Nexthink Adopt](https://docs.nexthink.com/platform/user-guide/adopt):

Import predefined and non-customizable key pages from [built-in default configuration](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/..#configuringwebapplications-understandingurlpatterns-1) templates available for specific web applications. This feature is different from applications installed from Nexthink Library.
{% endhint %}

### Discovering key pages by collecting URLs <a href="#keypages-discoveringkeypagesbycollectingurlsurlcollect" id="keypages-discoveringkeypagesbycollectingurlsurlcollect"></a>

The [Collect URLs option](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/..#configuringwebapplications-collectingurls) is enabled by default for general application configuration&#x73;**.** Therefore, to discover key pages specific to an application:

1. Click on the **Troubleshoot** tab of the chosen application dashboard page.
2. View the **Key pages & URLs** table to identify URLs with the most significant number of **Frustrating page loads** for end-users.

You can map these URLs into key pages as Nexthink displays them in descending order for page load times.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-a3b721f0c8e4bb5ac1b1d85cb5038813e5bab83e%2Fkeypages-1704794538.png?alt=media" alt="KeyPages-1704794538.png" width="760"><figcaption></figcaption></figure>

### Adding key pages <a href="#keypages-definingkeypages" id="keypages-definingkeypages"></a>

To create a new key page from the selected web application configuration page, under the **Key pages** subtab:

1. Click the **Add key page** button to open **Edit key page** pop-up and fill in the fields:
   * The **Key page name** can be composed of any standard safe character combination separated by a space, up to 100 characters long. It must be unique across an application.
2. Add at least one **identifier to use**:
   * The **URL path** to detect the key page. The system supports the use of `*` [wildcards](#considerations-when-defining-url-paths-for-key-pages).
     * The **Base URL pattern** restricts key-page URLs to the application's URL patterns defined under the [General tab](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/..#configuringwebapplications-understandingurlpatterns). Therefore, key-page patterns can match more than one base application pattern.
   * **Tab title** with full name—or partial name using `*` wildcards—displayed on your browser tab for the specific webpage.
     * This method enables you to detect soft navigation events where URLs remain unchanged.
   * [Configured CSS selectors](#defining-css-selector) of page elements that Nexthink uses to consistently identify the key page whenever the element is present on the webpage.
     * This method enables you to detect soft navigation events where URLs remain unchanged.
3. **Save** after all fields are defined.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-14a80cbf5bc730ae063b750134ed8c897527ffc8%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

#### Considerations when defining URL paths for key pages

When defining key pages, it's important to consider the following points:

* The path pattern can contain any character allowed in URLs, as well as the wildcard character `*`.
* The path pattern can contain more than one `*` wildcard.
* Any wildcards `*` need to be specified. If you do not define the `*` as a prefix for the path, the system appends it to the application’s URL pattern without any `*`. See the [examples](#keypages-examplesofkeypagepatternskeypatternexample) below.
* The same path pattern and application pattern name pair cannot appear more than once in the current application definition. As a workaround, select more than one application pattern for the given key page path.
* The key page name needs to be unique per application.

<details>

<summary>Examples of Key page URL patterns</summary>

Key page path `*page1*`which belongs to the application URL pattern `*://www.example.com/foo/*`

* This translates into `*://www.example.com/foo/*page1*`

Key page path `page2` which belongs to the application URL pattern `*://www.example.com/foo/*`

* This translates into `*://www.example.com/foo/page2`

</details>

### Defining CSS selectors for k**ey pages**—optional <a href="#defining-css-selector" id="defining-css-selector"></a>

{% hint style="info" %}
In addition to URL-based tracking, Nexthink **Key pages** also capture events using browser tab titles and CSS element selectors. These methods identify soft navigation events where URLs remain unchanged.
{% endhint %}

To define CSS selectors for **Key page detection** based on page elements, from the selected web application configuration page under the **Key pages** subtab:

1. **Add a new key page identifier** to open a popup window and fill in the fields:
   * **Name** for the target web page element.
   * **CSS selector** of the page element that Nexthink uses to consistently identify key pages whenever the element is present on the webpage.
     * **CSS selector** supports complex selectors, for example: `#id > .class div[attr=value]`
     * Extract **CSS selector** from the web application page using your[ browser developer tools](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/transactions#transactions-usingthechromedevelopertoolsdevtools) or [Nexthink browser extension](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/transactions#transactions-usingthenexthinkbrowserextensionbrowser)—the extension does not currently support Firefox.
2. **Save** the CSS key page identifier for future use when [adding key pages](#keypages-definingkeypages).

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-5ee936d4cf68c589e09e4d63ea4fd15af540ca60%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Organizing key pages in the correct order <a href="#ordering-key-pages" id="ordering-key-pages"></a>

You can overlap key page match patterns by following the appropriate order in the Nexthink web interface.

When reviewing a set of key pages, matching operations start at the top of the list and move towards the bottom to find a match. If the system finds a match, the process stops, and other patterns are not checked.

For example, the pattern `/a/b/*` should be listed above `/a/*`; otherwise a page `/a/b/c` would match `/a/*` and not `/a/b/*`. Below you can find an image with an explanation of the correct order.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-b04dd98a61234b2928af36025c25d89830d2069c%2FKey%20pages%20order_NOPROCESS.jpg?alt=media" alt="Key pages order for URL macthing."><figcaption></figcaption></figure>

In the example above, the ideal configuration would be the first option. In the second one, Outbound and Dispatch Shipment are tagged with the first key page, as it has a more generic tag.

To change the order of key pages from the selected web application configuration page:

1. Under the **Key pages** tab, hover an item from the list and open the action menu.
2. Click one of the possible options: **Move up**, **Move down**, **Move to top**, or **Move to bottom**.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-1ca41d76cff5ea02fd87e8eeb5f93cd1701958ad%2Fimage.png?alt=media" alt="Organizing key pages."><figcaption></figcaption></figure>

## FAQ

<details>

<summary>How can I view the key pages currently configured for a web application?</summary>

To view the key pages currently configured for a web application:

1. Open to **Applications** > **Manage applications** from the main navigation.
2. From the **Applications** table, open the [application configuration](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/..#managingapplications-configuringapplications) page of the target web application.
3. Go to the **Application settings** > **Key pages** tab to examine the list of configured key pages.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-b21916bca6194966a4f9026694dc03069615efcd%2Fimage%20(591).png?alt=media" alt=""><figcaption></figcaption></figure>

</details>

***

RELATED TASKS

* [transactions](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/transactions "mention")
* [application-licenses](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/application-licenses "mention")
* [thresholds](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/thresholds "mention")

RELATED TRAINING

* [How to configure the Applications module](https://learn.nexthink.com/courses/how-to-configure-applications-module)