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.

Nexthink allows configuring unlimited transactions per application, as long as the total number of transactions across all apps remains under 1000.

Transaction Configuration

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

To add a new transaction:

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

From the Add transaction window, fill in the Transaction start and Transaction end tabs.

Defining the Transaction start

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

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

Defining the Transaction end

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

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.

When editing an existing transaction end, you will lose the current configuration after ticking the checkbox and pressing Done.

Manual transaction end fields

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

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	Pick one of the options for the end of the transaction: Element appears Element disappears Element CSS class added Element CSS class removed
End element CSS selector	Paste the CSS selector of the page element used to end the transaction. Refer to the CSS selectors section.
End element text pattern (optional)	In addition to the CSS selector, you can narrow down the end element using a text pattern. Note that the text might exist in multiple languages for some applications.
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	Select this option for new elements that are generated with an existing element identifier after the transaction starts. The system ignores the existing element already present and captures the transaction end.

Editing an existing transaction

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

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

Edits the transaction fields. Refer to Defining the Transaction start and Defining the Transaction end.
Click Done to save changes.

Importing and Exporting a transaction

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.

Setting CSS selectors for transactions

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.

If Nexthink fails to collect transactions after system maintenance, it may indicate the need for selector adjustment.

You can find the CCS selectors using the following options:

Nexthink browser extension (recommended)
Nexthink toolbox extension
Browser's developer tools

Using the Nexthink browser extension

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:

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

Refer to the Installing the Nexthink browser extension documentation.

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.

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

The extension's configuration feature can only be used with automatic detection.

Click the Test button to verify the transaction configuration captures user interaction correctly. If needed, you can Restart test.
Click the Export button to download a JSON file that you can import as a transaction into Nexthink.

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.

To cover these cases:

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

Manual selection of elements only works within monitored applications/websites.

Using the Nexthink Toolbox extension

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 website.

After installing and launching the Nexthink Toolbox:

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

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

Using the Chrome developer tools

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

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

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

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

Finding temporary CSS selectors

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

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

Trigger an action in the browser to get to the state you want to inspect.
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.

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

Transactions for nested and cross-origin iframes

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

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

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

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\"]

Scenario 2: A generic selector for many elements.

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

RELATED TASKS