⚙️ GermainUX RUM JavaScript
GermainUX RUM JavaScript monitors the experience of real users as they interact with a web application. It captures performance, behavior, errors, and session-replay data directly from the user’s browser and sends it to GermainUX for real-time analysis.
Use RUM JavaScript when you control the monitored application and can add a JavaScript snippet to its pages.
🔍 What RUM JavaScript monitors
Depending on the selected UX monitoring profile and privacy configuration, GermainUX RUM JavaScript can capture:
|
Item |
|---|
|
Page views and navigation |
|
User sessions and journeys |
|
Clicks, scrolling, and other interactions |
|
Page and resource performance |
|
User-perceived response times |
|
JavaScript errors |
|
Browser freezes |
|
HTTP requests and service calls |
|
User and application errors |
|
Business-process activity |
|
Session-replay data |
|
Data used for click, movement, scroll, rage-click, dead-click, and error-click heatmaps |
This telemetry helps teams identify:
|
Use case |
|---|
|
Where users encounter errors or abandon a process |
|
Which pages and actions are slow |
|
Why a conversion or adoption workflow failed |
|
Which users and business processes are affected |
|
Whether an issue originates in the browser, application, service, or infrastructure |
|
What happened before and after a problem occurred |
🔁 RUM JavaScript or RUM Extension?
Choose the deployment method according to the level of control you have over the application.
|
Method |
Recommended when |
|---|---|
|
RUM JavaScript |
You control the application and can add the GermainUX script to its pages. |
|
RUM Extension |
You cannot change the application, JavaScript injection is restricted, or monitoring must operate from the browser extension context. |
The RUM Extension is commonly used for third-party SaaS applications such as Salesforce Lightning. RUM JavaScript is generally the preferred option for websites and applications whose source code or tag-management configuration you control.
⚙️ How it works
The RUM JavaScript runs in the monitored application’s browser context.
When a user opens the application:
-
The browser loads the GermainUX RUM JavaScript.
-
The script retrieves its monitoring configuration.
-
It captures the telemetry permitted by the UX monitoring profile.
-
Sensitive values are excluded, masked, or anonymized according to the configured privacy rules.
-
The browser sends the resulting telemetry to GermainUX.
-
GermainUX processes and correlates the data for dashboards, analysis, session replay, alerts, and automation.
The collected browser activity can also be correlated with server-side, database, infrastructure, and business-process telemetry.
✅ Requirements
Before deploying RUM JavaScript, confirm that:
|
Requirement |
|---|
|
JavaScript is enabled in the browser. |
|
Web Storage is available when required by the selected monitoring capabilities. |
|
The browser can connect to the GermainUX environment over HTTP or HTTPS. |
|
Content Security Policy permits the GermainUX script and its required connections. |
|
Proxy and firewall rules allow outbound traffic to GermainUX. |
|
The monitored application uses a supported browser. |
|
Privacy and security rules have been configured and tested. |
GermainUX supports current versions of major browsers, including:
|
Browser |
|---|
|
Google Chrome |
|
Microsoft Edge |
|
Mozilla Firefox |
|
Apple Safari |
|
Opera and other compatible Chromium-based browsers |
Validate the specific browser versions used by your organization before production deployment, particularly when supporting older or centrally managed browsers.
🚀 Deployment options
RUM JavaScript can be deployed through:
|
Option |
|---|
|
The application’s HTML templates |
|
A shared layout or master page |
|
A tag-management platform |
|
A content-management system |
|
An eCommerce platform |
|
A framework-specific integration |
|
A platform-specific customization mechanism |
The script should be loaded consistently on every page or application route that must be monitored.
For websites managed through Google Tag Manager, see Deploy RUM JavaScript with Google Tag Manager.
📋 General deployment process
The exact procedure depends on the application or framework, but the overall process is:
-
Define the monitored application in Germain Workspace.
-
Create or select the appropriate UX monitoring profile.
-
Configure privacy, masking, exclusion, and anonymization rules.
-
Obtain the RUM JavaScript snippet or deployment configuration.
-
Add it to the application or tag-management platform.
-
Deploy it to a non-production environment.
-
Open the application and perform representative user actions.
-
Confirm that sessions and telemetry appear in GermainUX.
-
Validate that sensitive data is handled correctly.
-
Deploy gradually to production.
🖥️ Supported platforms and frameworks
GermainUX provides deployment guidance or plugins for the following platforms and technologies:
|
Category |
Platforms and frameworks |
|---|---|
|
JavaScript frameworks |
Angular, React, Vue.js, Marko, HTML, and jQuery |
|
CRM and business applications |
Microsoft Dynamics 365, Oracle Siebel CRM, Salesforce Classic, Salesforce Lightning, and Salesforce Experience Cloud |
|
eCommerce |
BigCommerce, Magento, Shopify, and WooCommerce |
|
Content and website platforms |
Drupal, Squarespace, Webflow, Wix, and WordPress |
|
Analytics and application platforms |
Microsoft Power BI and Node.js |
A platform-specific integration may provide additional configuration, automatic instrumentation, business context, or framework-aware monitoring.
Follow the dedicated deployment page for your technology rather than applying a generic snippet when platform-specific instructions are available.
🔧 Configure the UX monitoring profile
The UX monitoring profile controls what RUM JavaScript captures and how it behaves.
Review settings related to:
|
Setting |
|---|
|
Session monitoring |
|
Session replay |
|
Page and route tracking |
|
User interactions |
|
Network requests |
|
JavaScript errors |
|
Performance measures |
|
Business-process detection |
|
Sensitive-data masking |
|
Element and page exclusions |
|
Sampling |
|
Data volume |
|
Debug logging |
Use separate profiles when QA and production require different monitoring, privacy, or diagnostic settings.
🔒 Privacy and security
RUM JavaScript can capture detailed information about how users interact with an application. Configure privacy controls before enabling it for production users.
Recommended practices include:
|
Practice |
|---|
|
Inform users about monitoring as required by company policy and applicable regulations. |
|
Do not capture passwords, authentication tokens, payment information, health information, or other restricted data. |
|
Mask or exclude sensitive form fields. |
|
Exclude pages containing information that should never be recorded. |
|
Anonymize user identifiers where individual identification is unnecessary. |
|
Restrict access to session replays and user-level telemetry. |
|
Define appropriate retention policies. |
|
Validate privacy controls using representative application workflows. |
|
Review the configuration after application changes. |
Privacy rules should prevent sensitive data from being collected whenever possible, rather than relying exclusively on controls applied after collection.
🛡️ Content Security Policy
Applications using Content Security Policy may need to explicitly permit GermainUX resources.
Depending on the deployment and enabled capabilities, review directives such as:
|
Directive |
|---|
|
|
|
|
|
|
|
|
|
|
|
|
Add only the GermainUX origins required by your environment. Avoid broad wildcard permissions.
Browser console messages normally identify the directive blocking a script or connection. Coordinate any production policy changes with your application-security team.
✅ Verify the deployment
After deploying the RUM JavaScript:
-
Open the monitored application.
-
Use the browser’s developer tools to confirm that the script loads successfully.
-
Check the console for JavaScript or Content Security Policy errors.
-
Confirm that requests are sent to the expected GermainUX URL.
-
Perform several representative user interactions.
-
Open GermainUX and locate the resulting user session.
-
Verify page views, interactions, performance, and errors.
-
Open the session replay, if enabled.
-
Confirm that masking and exclusion rules work as expected.
-
Repeat the test across supported browsers.
Test both authenticated and unauthenticated workflows when they use different application pages, domains, or security policies.
📊 Production rollout recommendations
Use a staged rollout for applications with substantial traffic:
-
Validate the integration in development or QA.
-
Test privacy rules and Content Security Policy.
-
Deploy to a limited group of internal users.
-
Review data quality and application overhead.
-
Adjust sampling and monitoring settings if necessary.
-
Expand deployment gradually.
-
Configure dashboards, SLAs, alerts, and automated analysis.
-
Continue monitoring data volume and coverage after release.
🔧 Troubleshooting
⛔ No telemetry appears in GermainUX
Confirm that:
|
Check |
|---|
|
The RUM JavaScript is present on the page. |
|
The script loaded without error. |
|
The GermainUX URL is correct. |
|
The monitored application and UX profile are enabled. |
|
Browser, proxy, and firewall rules allow the connection. |
|
Content Security Policy permits the script and outbound requests. |
|
Privacy tools or browser extensions are not blocking monitoring. |
|
The current application URL matches the configured scope. |
📃 Only some pages are monitored
Check whether:
|
Possible cause |
|---|
|
The script is included in every page template. |
|
Single-page application route changes are detected. |
|
Additional subdomains require configuration. |
|
Authentication redirects use different domains. |
|
Embedded frames require separate monitoring. |
|
Consent-management rules prevent the script from loading. |
🔁 Session replay is incomplete
Review:
|
Item |
|---|
|
Page and element exclusions |
|
Privacy rules |
|
Unsupported embedded content |
|
Cross-origin frames |
|
Dynamically rendered components |
|
Sampling settings |
|
Data-volume limits |
|
Application navigation that unloads the page prematurely |
🔕 The browser blocks the script
Open the browser console and inspect the reported Content Security Policy, mixed-content, certificate, or cross-origin error. Update only the policy or network rule responsible for the blocked GermainUX resource.
📈 Data volume is higher than expected
Review the monitoring profile for:
|
Cause |
|---|
|
Excessive interaction capture |
|
High-frequency application events |
|
Unnecessary network-request collection |
|
Session-replay sampling |
|
Duplicate script deployment |
|
Repeated initialization in single-page applications |
ℹ️ Feature information
|
Property |
Value |
|---|---|
|
Component |
RUM JavaScript |
|
Purpose |
Real-user monitoring and session replay for web applications |
|
Deployment |
JavaScript snippet, tag manager, or platform-specific integration |
|
Availability |
Depends on the selected platform integration and GermainUX version |
Component: RUM JS
Feature Availability: 2017.1