> For the complete documentation index, see [llms.txt](https://docs.nexthink.com/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nexthink.com/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/user-guide/applications/managing-applications/configuring-web-applications/transactions.md).

# Transactions

A transaction is an employee action or event in a web application that creates business value for the company. A service manager needs enough granularity to see if employees can efficiently perform specific actions on an application's web page.

The Nexthink web interface defines transactions by specifying start and end events:

* Start events are user-defined actions, such as clicking or keypressing on an element to which the action is applied to. For example, clicking on a save button.
* End events are page-defined elements that are added or changed. For example, a message or icon appears on the page, or on the contrary, an element disappears from the page.

Nexthink uses CSS selectors to define start and end elements on the application's web page.

{% hint style="info" %}
Nexthink allows configuring unlimited transactions per application, as long as the total number of transactions across all apps remains under 1000.
{% endhint %}

## Transaction Configuration <a href="#transactions-transactionconfigurationtrue" id="transactions-transactionconfigurationtrue"></a>

Use the configuration form to set up transactions by indicating the start and end of a transaction.

Some applications contain elements that are always a part of the web page. These elements may become visible or invisible with changes to the CSS:

* The `visible` attribute of the element can change.
* The class name of the element can change dynamically.
* The element might be obscured by another element that includes an attribute or class that can change dynamically.

### Adding a new transaction <a href="#transactions-addinganewtransaction" id="transactions-addinganewtransaction"></a>

To add a new transaction:

1. Select **Applications > Manage applications** from the main menu.
2. Click on a chosen application's name to access its configuration.
3. Click on the **Transactions** tab from the application's configuration page.
4. Click on the **Add transaction** button to open the **Add transaction** window.

From the **Add transaction** window, fill in the [Transaction start ](#transactions-definingthetransactionstarttransstart)and [Transaction end](#transactions-definingthetransactionendtransend) tabs.

<figure><img src="/files/Vg6zhTmvjYgFuXazvT5j" alt="Transactions tab" width="760"><figcaption></figcaption></figure>

### Defining the Transaction start <a href="#transactions-definingthetransactionstarttransstart" id="transactions-definingthetransactionstarttransstart"></a>

From the **Add transaction** window, click on the **Transaction start** tab and fill in the fields.

<figure><img src="/files/9w9CADhAqH7e6VQuQJxe" alt="Transaction start" width="760"><figcaption></figcaption></figure>

The following table displays the Transaction start fields and how to define them:

| Transaction start field               | Description                                                                                                                                                                                                                                   |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Transaction name                      | Enter a meaningful name for the transaction.                                                                                                                                                                                                  |
| Start event type                      | <p>Pick one of the options depending on how the user triggers the transaction.</p><p>A trigger can be clicking, pressing the return key on the keyboard or navigating to the page.</p>                                                        |
| Start event name                      | <p>Choose a name for the start element that is up to 100 characters long.</p><p>When writing the name, use the standard UTF-8 characters set.</p><p>Note that copying text from other sources might bring unsupported special characters.</p> |
| Start element CSS selector            | <p>Paste the CSS selector of the page element used to trigger the transaction.</p><p>Refer to the <a href="/pages/cxNto8lw7pknaC435WbM">CSS selectors</a> section on this page.</p>                                                           |
| Start element text pattern (optional) | <p>In addition to the CSS selector, you can narrow down the start element using a text pattern.</p><p>Note that the text might exist in multiple languages for some applications.</p>                                                         |
| Select all matching elements          | <p>Tick this box to select all elements matching the element id.</p><p>This can be useful, for instance, to trigger a transaction when a user clicks on any table row.</p>                                                                    |

### Defining the Transaction end <a href="#transactions-definingthetransactionendtransend" id="transactions-definingthetransactionendtransend"></a>

From the **Add transaction** window, click on the **Transaction end** tab and fill in the fields.

<figure><img src="/files/u2nsqFDGjI76emGE7sTf" alt="Automatic transaction end detection"><figcaption></figcaption></figure>

You can either choose to:

* Use automatic transaction end detection
* Untick the automatic option for filling in manual transaction end fields.

#### **Use automatic transaction end detection**

To simplify the process transaction end configuration, Nexthink Applications offers automatic detection.

The system enables this feature by default. When you select this option, the rest of the configuration options collapse as they are no longer required.

Nexthink recommends backing up your existing transaction end configuration before proceeding with the automatic transaction end detection.

{% hint style="info" %}
When editing an existing transaction end, you will lose the current configuration after ticking the checkbox and pressing **Done**.
{% endhint %}

#### **Manual transaction end fields**

Unticking the automatic transaction end detection option opens the manual tranesaction end fields.

<figure><img src="/files/mujO0YQ14gAvyJ8HIapT" alt="Transaction end"><figcaption></figcaption></figure>

The following table displays the manual transaction end fields and how to define them:

| Manual transaction end field        | Description                                                                                                                                                                                                                     |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| End event name                      | Choose a name for the start element using any standard safe character combination separated by a space, up to 100 characters long.                                                                                              |
| End event type                      | <p>Pick one of the options for the end of the transaction:</p><ul><li>Element appears</li><li>Element disappears</li><li>Element CSS class added</li><li>Element CSS class removed</li></ul>                                    |
| End element CSS selector            | <p>Paste the CSS selector of the page element used to end the transaction.</p><p>Refer to the <a href="#transactions-settingcssselectorsfortransactionsselectors">CSS selectors</a> section.</p>                                |
| End element text pattern (optional) | <p>In addition to the CSS selector, you can narrow down the end element using a text pattern.</p><p>Note that the text might exist in multiple languages for some applications.</p>                                             |
| Select all matching elements        | Do not tick the box for this field as it is deprecated and to be removed from Nexthink web interface.                                                                                                                           |
| Check for new elements only         | <p>Select this option for new elements that are generated with an existing element identifier after the transaction starts.</p><p>The system ignores the existing element already present and captures the transaction end.</p> |

### Editing an existing transaction <a href="#transactions-editinganexistingtransaction" id="transactions-editinganexistingtransaction"></a>

Created transactions are listed under the **Transactions** tab on the application's configuration page:

1. Hover over an existing transaction to reveal the action menu.
2. Click on the **Edit transaction** option to open the Edit transaction windows.

<figure><img src="/files/gMJksUNPQpv3vMTa6PXJ" alt="Transactions-1703773348 (1).png" width="760"><figcaption></figcaption></figure>

3. Edits the transaction fields. Refer to [Defining the Transaction start](#transactions-definingthetransactionstarttransstart) and [Defining the Transaction end](#transactions-definingthetransactionendtransend).
4. Click **Done** to save changes.

<figure><img src="/files/IokDXZaPGsoQ7PWN4a2r" alt="Transactions-1703773255.png" width="760"><figcaption></figcaption></figure>

## Importing and Exporting a transaction <a href="#transactions-importingandexportingatransactionimportexport" id="transactions-importingandexportingatransactionimportexport"></a>

Under the **Transactions** tab from the application's configuration page:

* To export a transaction, hover over an existing transaction to reveal the action menu.
  * Click on the **Export transaction** option to export the transaction in a JSON file format.
  * The file appears in your browser’s downloads folder.
* To import a transaction, click the **Import transaction** button to import a JSON-format transaction file.

<figure><img src="/files/55ZcSaCvuYAFACkklJVS" alt="Transactions-1703773348.png" width="760"><figcaption></figcaption></figure>

## Setting CSS selectors for transactions <a href="#transactions-settingcssselectorsfortransactionsselectors" id="transactions-settingcssselectorsfortransactionsselectors"></a>

CSS selectors identify specific elements on web pages. It is crucial to use the appropriate selectors when setting up transactions.

Keep in mind these special considerations:

* Selectors can change when the application is updated or upgraded.
* Selectors can change when the page is reloaded.
* One selector can reference more than one element of the page.

To work around these issues, analyze the following points for each transaction start and end event:

* If the application is available in multiple languages, avoid selectors containing text.
* Avoid selectors containing randomly generated strings of characters.
* Reload the page to make sure that the selector still works after the page reloads.
* Explore all page elements to ensure that other elements might not be selected when the page is in a different configuration.
  * For example, expanding a combo box or unveiling a hidden menu.
* Confirm that the selectors still work when the application gets updated or upgraded.

{% hint style="info" %}
If Nexthink fails to collect transactions after system maintenance, it may indicate the need for selector adjustment.
{% endhint %}

You can find the CCS selectors using the following options:

* [Nexthink browser extension ](#transactions-usingthenexthinkbrowserextensionbrowser)(recommended)
* [Nexthink toolbox extension](#transactions-usingthenexthinktoolboxextensiontoolbox)
* [Browser's developer tools](#transactions-usingthechromedevelopertoolsdevtools)

### Using the Nexthink browser extension <a href="#transactions-usingthenexthinkbrowserextensionbrowser" id="transactions-usingthenexthinkbrowserextensionbrowser"></a>

The Nexthink browser extension lets you detect individual transactions for the monitored web application or domain. The extension significantly simplifies and facilitates the process of setting up transactions by allowing you to:

* Determine the CSS selector of the element of interest.
* Test the transaction configuration and verify the CSS selector works
* Export the transaction as a JSON file to import it to Nexthink.

After installing and launching the Nexthink extension:

1. Locate and click on the extension in the browser toolbar.
2. Click on **Powered by Nexthink** five times in quick succession, to open the Nexthink extension window.
3. Click on the **Configure a transaction** button on the Nexthink extension window.

{% hint style="info" %}
Refer to the [Installing the Nexthink browser extension](/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/getting-started/installing-the-nexthink-browser-extension.md) documentation.
{% endhint %}

<figure><img src="/files/IByw7GAvq3sAQ6LSce9y" alt="Transactions-170368422544.png" width="760"><figcaption></figcaption></figure>

4. You can use the **auto-detect elements** mode and track the desired elements by clicking on them.
   * All elements you interact with on the web application are displayed in the pop-up.
   * Auto-detection of elements only works within monitored applications/websites.

<figure><img src="/files/oRdSSYMJLhCs54Ew4Esq" alt="Transactions-1703685644.png" width="760"><figcaption></figcaption></figure>

5. After auto-selecting the page elements, you can **Configure** the transaction directly from the Nexthink browser extension.

{% hint style="info" %}
The extension's configuration feature can only be used with automatic detection.
{% endhint %}

<figure><img src="/files/K9hgHalGLKaXxhomhzeZ" alt="Transactions-1703778148.png" width="760"><figcaption></figcaption></figure>

6. Click the **Test** button to verify the transaction configuration captures user interaction correctly. If needed, you can **Restart test**.
7. Click the **Export** button to download a JSON file that you can [import](#transactions-importingandexportingatransactionimportexport) as a transaction into Nexthink.

<figure><img src="/files/YN8vuiR3U6lWzbzSfK2I" alt="Transactions-1703778419.png" width="760"><figcaption></figcaption></figure>

#### **Manually selecting an element**

The Nexthink browser extension also offers manual element detection for advanced configuration scenarios requiring more precision to properly define an end element.

<figure><img src="/files/hoOCDTpHiHhKqOi8Yj7E" alt="Transactions-1703841873.png" width="760"><figcaption></figcaption></figure>

To cover these cases:

1. Click the **Select an element** button to enter a mode that allows you to select specific elements.
2. Manually click or interact with the desired element on the application's page.
3. Copy the element's **Selector** and use it to configure end elements in the Nexthink web interface.

{% hint style="info" %}
Manual selection of elements only works within monitored applications/websites.
{% endhint %}

<figure><img src="/files/u7scGLGVarJNQ81Y2VKl" alt="Transactions-1703842122.png" width="760"><figcaption></figcaption></figure>

### Using the Nexthink Toolbox extension <a href="#transactions-usingthenexthinktoolboxextensiontoolbox" id="transactions-usingthenexthinktoolboxextensiontoolbox"></a>

You can identify a CSS selector for a UI element of a webpage using the additional Toolbox extension provided by Nexthink through the Chrome Web Store on the [chrome.google.com](https://chrome.google.com/webstore/detail/nexthink-toolbox/clndcckcfbeokfnejgamfbeginbmbkgk/related) website.

After installing and launching the Nexthink Toolbox:

1. Navigate to the page where you want to find a selector, then click on the extension.

<figure><img src="/files/0VSbg4UWC6QcVkdH98at" alt="CSS selector picker" width="442"><figcaption></figcaption></figure>

2. Click the **Pick and element** button to initiate inspection mode.
3. Click on your area of interest on the web page, highlighted in light yellow, and automatically collect the CSS selectors you need.

<figure><img src="/files/YVmbVyx8PTuj6EOMKFvH" alt="Element CSS selector" width="442"><figcaption></figcaption></figure>

### Using the Chrome developer tools <a href="#transactions-usingthechromedevelopertoolsdevtools" id="transactions-usingthechromedevelopertoolsdevtools"></a>

The Chrome developer tools are available with every installation, allowing you to locate the relevant CSS selectors.

1. Load the web page of interest and open the Chrome developer tools.
2. Right-click anywhere on the page and select the ‘Inspect' option from Chrome’s popup.
3. Click on the select icon.

<figure><img src="/files/NVswKQlOUh6fNXS706Fh" alt="Transactions-1703690988.png" width="760"><figcaption></figcaption></figure>

4. Use your cursor to select a specific element on the webpage that triggers the functionality you are interested in monitoring.
5. Right-click on the portion of code highlighted inside the developer tools side panel.

<figure><img src="/files/dXcMpDQCcLVOTFwPoIHa" alt="Transactions-1703691255.png" width="760"><figcaption></figcaption></figure>

6. In the contextual menu, click on **Copy** > **Copy selector**.

<figure><img src="/files/DtGghgLeOtAmmGUZhVPz" alt="Transactions-1703691417.png" width="760"><figcaption></figcaption></figure>

### **Finding temporary CSS selectors**

You can also use Chrome’s developer tools to find CSS selectors of temporary elements.

1. Load the web page of interest and open the Chrome developer tools.
2. Right-click anywhere on the page and select the ‘Inspect' option from Chrome’s popup.
3. Switch to the **Sources** tab.

<figure><img src="/files/rII9P9SZhBE2Ip9YFN87" alt="Transactions-1703691626.png" width="760"><figcaption></figcaption></figure>

4. Trigger an action in the browser to get to the state you want to inspect.
5. Press F8 or fn+F8 for MacOS. This pauses the browser and the **Elements** tab does not update until you return to **Sources** and press F8 again.

<figure><img src="/files/ebXXGvmmYHUgHYxkQ4cQ" alt="Transactions-17036955550.png" width="760"><figcaption></figcaption></figure>

5. While **Paused**, switch back to the Elements tab and use the standard inspection tools.

## Transactions for nested and cross-origin iframes <a href="#transactions-transactionsfornestedandcross-originiframes" id="transactions-transactionsfornestedandcross-originiframes"></a>

Many critical business applications use iframes to embed external elements into their websites. Some of them use specific types called nested or cross-origin iframes.

You can identify iframes in code with the `<iframe></iframe>` tag, for example: `<iframe src="https://nexthink.com"></iframe>`

* A nested iframe is an iframe that contains a page with another iframe.
* A cross-origin iframe contains content outside of a website's domain.

Configure transactions for applications that utilize nested and cross-origin iframes with the current process of configuring transactions.

## Configuration tips <a href="#transactions-configurationtips" id="transactions-configurationtips"></a>

These two scenarios exemplify how to define the CSS selector for different situations.

<details>

<summary>Scenario 1: A button in a menu bar that varies according to the user's preferences.</summary>

A button in the menu bar is not necessarily positioned similarly for all users, and its location might depend on specific user rights or preferences.

Solution: Use one attribute of the HTML elements, for example, `link`. Use the `\` character for any `"` in the attributes.

CSS selector example: `a[href=\"/lightning/o/Account/home\"]`

</details>

<details>

<summary>Scenario 2: A generic selector for many elements.</summary>

A generic selector for many elements is described with `nth child`.

Solution: Remove `nth child` from the selector.

From `#js-work-quickfilters > dd:nth-child(4) > a`

To `#js-work-quickfilters > dd > a`

</details>

***

RELATED TASKS

* [Configuring web applications](/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/user-guide/applications/managing-applications/configuring-web-applications.md)
* [Key pages](/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/user-guide/applications/managing-applications/configuring-web-applications/key-pages.md)
* [Application licenses](/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/user-guide/applications/managing-applications/configuring-web-applications/application-licenses.md)
* [Thresholds](/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/user-guide/applications/managing-applications/configuring-web-applications/thresholds.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nexthink.com/platform/~/changes/Sh4xqs4GDClkDKT9Hvux/user-guide/applications/managing-applications/configuring-web-applications/transactions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.