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:
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:
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)
Using the Nexthink browser extension
Refer to the Installing the Nexthink browser extension documentation.
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.
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
Nexthink recommends using the Nexthink browser extension to identify page elements. The Nexthink Toolbox is no longer supported and will soon be deprecated.
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.
RELATED TASKS
Last updated