Configure Monitoring for Shopify

ComponentsEngineJS ProfilerMobile AppRPA Bot RecorderRUM JS

Availability2023.3 or later

Configure the Shopify UX monitoring profile

Choose the store profile

Configure Shopify events

Commerce events tied to sessions

Configure third-party checkout monitoring

Extend to external checkouts

Configure error monitoring

Customer-impacting errors only

Overview

Configure GermainUX to capture, correlate, and analyze Shopify customer journeys across the storefront, cart, checkout, third-party services, and supporting integrations. This guide assumes that you have already deployed monitoring for Shopify.

Configuration overview

Configuration area	Purpose	Primary component
UX monitoring profile	Controls storefront RUM, Session Replay, clicks, pages, requests, privacy, and user identification	RUM JS
Shopify events	Captures product, collection, cart, checkout, and custom commerce events	RUM JS / Shopify App
Third-party checkout	Extends monitoring to supported checkout providers outside the Shopify storefront	RUM JS
Error monitoring	Detects, categorizes, prioritizes, and analyzes customer-impacting failures	RUM JS / Engine
User feedback	Collects feedback and correlates it with the affected customer session	RUM JS
Business processes	Measures conversion, completion, abandonment, and delays across customer journeys	Engine
API and integration monitoring	Monitors Shopify APIs, webhooks, and connected services	Engine
Alerts and automation	Detects abnormal conditions and initiates notifications or authorized actions	Engine

Configure the Shopify UX monitoring profile

Go to: Germain Workspace -> Settings → Analytics -> UX Monitoring Profiles Select the profile created for your Shopify store. The default profile is typically named Shopify, although your environment may use a store- or environment-specific name.

Application identification

Configure:

Application name
Store name
Production, test, or development environment
Primary storefront domain
Alternate domains
Locale- or country-specific domains
Checkout and third-party domains, where applicable

Use separate application or environment values when multiple stores or environments must be analyzed independently.

URL matching and page identification

Configure URL rules for the monitored Shopify pages, including:

Home page
Collection pages
Product pages
Search results
Cart
Customer account

Show all 10

Checkout
Order confirmation
Contact and support pages
Custom landing pages

Normalize dynamic URL values that would otherwise split the same logical page across many records, such as:

Product and variant identifiers
Collection handles
Order identifiers
Search terms
Locale prefixes
Query parameters
Tracking and campaign parameters

Retain marketing parameters such as UTM values as dimensions when they are required for attribution analysis, but do not allow them to create separate logical page names.

Session configuration

Review:

Session inactivity timeout
Guest-session identification
Authenticated-customer identification
Guest-to-authenticated session continuity
Cross-tab correlation
Cross-domain correlation
Application and environment naming
Session sampling, if enabled

A shopper’s storefront, cart, checkout, and confirmation activity should remain connected to the same journey whenever the deployed integrations permit it.

Session Replay

Enable Session Replay when detailed reconstruction of customer journeys is required. Configure:

Replay sampling
Maximum capture duration
Text masking
Input masking
Element exclusion
Page exclusion

Show all 10

Network capture
Resource capture
Consent requirements
Retention

Session Replay reconstructs the monitored browser experience from captured browser events. It is not a video recording. Configure privacy controls before enabling production collection. Mask or exclude:

Passwords
Payment-card information
Security codes
Authentication tokens
Customer names and contact details, when required
Billing and shipping addresses

Show all 11

Order identifiers
Form inputs
Free-text comments
Request bodies, parameters, and headers
Any organization-specific sensitive data

Validate the behavior when consent is granted, denied, changed, or withdrawn. Monitoring should follow the store’s consent-management and privacy policies.

Configure Shopify events

GermainUX can collect Shopify commerce events and correlate them with the customer session, Session Replay, conversion funnel, product, and affected user. Common events include:

Event	Purpose
Product Viewed	Measures product interest
Collection Viewed	Measures collection engagement
Search Submitted	Analyzes product discovery
Cart Viewed	Identifies cart engagement
Product Added to Cart	Measures purchase intent
Product Removed from Cart	Identifies cart changes or friction
Sold Out	Identifies unavailable-product encounters
Checkout Started	Marks the beginning of checkout
Checkout Completed	Identifies successful conversion

Preconfigured GermainUX KPIsinclude:

Shopify Product Cart Addition
Shopify Product Cart Removal
Shopify Collection View
Shopify Product Viewing
Shopify Cart View

Additional events can be created for actions or outcomes specific to the store.

Configure custom events

A custom event should include, when available:

Event name
Store and application
Page URL
Product name and identifier
Variant
Collection

Show all 13

Quantity
Price
Currency
Cart or checkout identifier
Success state
Customer or session correlation
Timestamp

Use stable event names without trailing spaces. For example:

AddToCart
RemoveFromCart
SoldOut
DiscountApplied
CheckoutStarted
PurchaseCompleted
SearchNoResults

Avoid placing personal or payment information in custom event attributes. For detailed configuration, see Configure Shopify Events.

Display events in Session Replay

Shopify and custom events can appear as insights on the Session Replay timeline. To add a custom timeline insight:

Open the GermainUX configuration interface

Locate the User Session Replay dashboard configuration

Open the target portlet

Add the event to timelineEvents

Configure its matching criteria, label, and display properties

Save the configuration

Generate the event in a test session

Confirm that it appears at the correct point in the replay timeline

Configuration paths may differ by GermainUX version. Use the supported Workspace editor instead of the low-level Configuration Console whenever the setting is available there.

Configure third-party checkout monitoring

When the customer leaves the Shopify storefront for a third-party checkout, deploy GermainUX on the external checkout where the provider supports custom scripts. Use the same Shopify application name so the checkout data can be associated with the storefront journey.

Monitoring script

The supported third-party checkout integrations use the following pattern:

<script
  type="text/javascript"
  async
  crossorigin="anonymous"
  src="https://GERMAIN_UX_HOSTNAME/config/download/file/agents%2Fwebux%2Fgermainapm.js?appName=SHOPIFY_APP_NAME&defaultProfileName=Shopify"->
</script->

Replace:

GERMAIN_UX_HOSTNAME with your GermainUX hostname
SHOPIFY_APP_NAME with the application name used for the Shopify store

Encode the application name if it contains spaces or reserved URL characters.

Checkify

Open the Checkify administration interface

Go to Advanced Settings -> Scripts

Create a header script

Select Both to apply it to checkout and Thank You pages

Name the script GermainUX

Add the GermainUX monitoring script

Replace the hostname and application-name placeholders

Save the changes

Complete a test checkout and verify the resulting session

Funnelish

Open Funnelish

Go to All Funnels

Select the funnel to monitor

Open Custom Codes

Create a custom code

Select Page Head

Add the GermainUX monitoring script

Save the changes

Test every monitored funnel page

Recharge custom checkout

Go to Storefront -> Checkout

Open the custom-code configuration

Add the GermainUX monitoring script to the Thank You Page field

Save the configuration

Complete a test transaction and confirm that the event is collected

This placement monitors the Thank You page only. It does not provide full visibility into every Recharge checkout step unless GermainUX can also be deployed on those pages. For detailed instructions, see Configure Third-Party Checkout Monitoring.

Validate cross-domain journeys

For each third-party checkout:

Confirm that RUM JS loads.
Verify that the same application name is used.
Confirm whether session continuity is maintained.
Test consent behavior on both domains.
Verify that payment fields are excluded.
Confirm which checkout steps are actually monitored.
Distinguish genuine abandonment from a loss of monitoring coverage.

Contact GermainUX Support for checkout providers that do not allow custom scripts or are not listed above.

Configure error monitoring

Configure error monitoring to identify failures that affect customers or business processes while filtering expected or insignificant conditions. GermainUX should distinguish among:

Classification	Example
User-facing application error	Add-to-cart fails and displays an error
Silent application error	Background inventory request fails silently
User validation	Required address field is missing

Do not combine user validation with application failures. They have different operational meaning and should normally use separate KPIs.

Sources of Shopify errors

Monitor:

JavaScript errors
Unhandled promise rejections
Failed HTTP and fetch requests
Timeouts
Incorrect HTTP responses
Application error messages

Show all 14

Failed product searches
Missing pages
Add-to-cart failures
Discount-code failures
Checkout errors
Payment or integration failures
Inventory and fulfillment errors
API and webhook failures

Detect errors returned in successful HTTP responses

Some applications return HTTP 200 even when the response body represents a functional failure. Use a response processor only when the failure can be identified reliably. Example:

settings.plugins.network.requestAndResponseBodyProcessor = function (fact) {
    if (
        fact.myClassName === "OutboundDocumentRequest" &&
        fact.responseBody
    ) {
        const notFound =
            fact.responseBody.includes("404 Not Found") ||
            fact.responseBody.includes("Page Not Found") ||
            fact.responseBody.includes("page not found") ||
            fact.responseBody.includes(
                "page you were looking for does not exist"
            );

        if (notFound) {
            fact.success = false;
            fact.http.status = "404";
            fact.http.message = "404 - Not Found";

            germainApm.api.createEvent("Page Not Found", {
                success: false,
                http: fact.http
            });
        }
    }
};

Review the matching text for each store because Shopify themes can customize missing-page content. Avoid capturing and storing the full response body unless it is necessary and approved. Response bodies may contain personal, order, or payment-related information.

Categorize recurring and new errors

Use GermainUX categorization to group errors by stable characteristics such as:

Error name
Normalized message
Page or route
Request endpoint
Shopify operation
Third-party service
Product or checkout stage
Application version

Categorization helps distinguish:

Known recurring errors
Newly introduced errors
Increasing errors
Errors affecting many customers
Errors associated with lost conversion
Benign events that can be excluded

Configure error dashboards

Create a portlet using:

Setting	Recommended values
KPIs	Browser Event, Outbound HTTP Request, JavaScript Error, or a custom error KPI
Measures	Count, Unique Users, Sessions, Revenue Impact, or Conversion Impact
Pivots	Name, Message, Page, Request, Checkout Stage, Product, Browser, or Release
Filters	Application error, silent error, user validation, success state, environment, or store

From an error instance, provide access to:

Affected session
Session Replay
Page and customer journey
Related clicks
Network activity
Stack or technical details

Show all 9

Business-process step
Conversion outcome
Similar occurrences

For detailed configuration, see Configure Error Monitoring for Shopify.

Configure user feedback

Customer feedback can be captured directly from the Shopify storefront and correlated with the customer’s session and technical context.

Prerequisite

RUM JS must already be deployed through the GermainUX Shopify App or the storefront theme.

Enable feedback

In the Shopify UX monitoring profile, enable the feedback plugin and configure:

Positive and negative feedback options
Prompt and labels
Comment field
Popup position
Colors and styling
Display conditions

Show all 10

Target pages
Excluded pages
Consent requirements
Parent selector, when the popup must be placed inside a specific element

Example initialization:

const settings = germainApm.getDefaultSettings(loaderArgs, agentConfig);
settings.plugins.feedback.enabled = true;
germainApm.start(settings);

Feedback privacy

Feedback comments can contain personal or confidential information. Configure masking, access control, and retention accordingly. Consider disabling comments on:

Payment pages
Authentication pages
Pages displaying sensitive customer data
Embedded third-party checkout pages

Analyze feedback

Go to: Germain Workspace -> Settings → Dashboards -> All Search for:

Shopify
Feedback
Insights for UX

Analyze feedback by:

Page
Product
Collection
Journey stage
Browser and device
Error

Show all 9

Performance
Conversion outcome
Customer session

For detailed configuration, see Configure User Feedback for Shopify.

Configure business-process monitoring

Define the Shopify journeys that matter to conversion and customer experience. Recommended processes include:

Landing page to product view
Search to product selection
Product view to add-to-cart
Add-to-cart to checkout
Checkout to purchase
Registration and login

Show all 10

Discount-code application
Order tracking
Return request
Support contact

For each process, define:

Start condition
Completion condition
Ordered or optional steps
Failure conditions
Abandonment timeout
Expected duration

Show all 9

Customer and session correlation
Store and environment
Relevant product, cart, checkout, and revenue attributes

Validate that each step appears only once and in the correct order.

Configure alerts and reports

Configure alerts for actionable conditions such as:

New application error
Checkout failure
Increase in cart abandonment
Conversion-rate degradation
Failed product search
Sold-out product activity

Show all 10

Slow page or request
Third-party checkout outage
API or integration failure
Increase in negative feedback

Avoid creating alerts for every individual browser error. Establish a representative baseline and alert on new, severe, increasing, or business-impacting conditions. Reports can summarize:

Conversion and abandonment
Customer feedback
Error trends
Slow customer journeys
Product and collection engagement
Checkout performance
Revenue impact
New or increasing issues

Validation checklist

After configuration, confirm that:

Storefront and checkout data use the intended application name.
Production and non-production data are distinguishable.
Product, cart, checkout, and purchase events are collected.
Event attributes contain the correct product, value, and currency.
Guest and authenticated sessions correlate as intended.
Cross-domain checkout coverage is understood.

Show all 15

Session Replay includes the expected pages and actions.
Sensitive elements and values are protected.
Consent choices are respected.
User validation is separate from application errors.
Known errors are categorized correctly.
New errors can be identified.
Feedback appears on the intended pages.
Business-process steps appear in the correct sequence.
Dashboards and alerts use the correct store and environment filters.

Get Help

Contact GermainUX Support

The GermainUX team helps you get up and running faster, empower your team, turn data into actionable insights, and optimize performance to deliver measurable business outcomes.

Can't find what you need?

Search all GermainUX docs with Ctrl + K, or use the feedback buttons at the bottom of this page to tell us what is missing.

The content of this document is proprietary to GERMAIN SOFTWARE.

Configure the Shopify UX monitoring profile

Configure Shopify events

Configure third-party checkout monitoring

Configure error monitoring

​Overview

​Configuration overview

​Configure the Shopify UX monitoring profile

​Application identification

​URL matching and page identification

​Session configuration

​Session Replay

​Privacy and consent

​Configure Shopify events

​Configure custom events

​Display events in Session Replay

​Configure third-party checkout monitoring

​Monitoring script

​Checkify

​Funnelish

​Recharge custom checkout

​Validate cross-domain journeys

​Configure error monitoring

​Sources of Shopify errors

​Detect errors returned in successful HTTP responses

​Categorize recurring and new errors

​Configure error dashboards

​Configure user feedback

​Prerequisite

​Enable feedback

​Feedback privacy

​Analyze feedback

​Configure business-process monitoring

​Configure alerts and reports

​Validation checklist

​Related documentation

​Get Help

Contact GermainUX Support

Can't find what you need?

Overview

Configuration overview

Configure the Shopify UX monitoring profile

Application identification

URL matching and page identification

Session configuration

Session Replay

Privacy and consent

Configure Shopify events

Configure custom events

Display events in Session Replay

Configure third-party checkout monitoring

Monitoring script

Checkify

Funnelish

Recharge custom checkout

Validate cross-domain journeys

Configure error monitoring

Sources of Shopify errors

Detect errors returned in successful HTTP responses

Categorize recurring and new errors

Configure error dashboards

Configure user feedback

Prerequisite

Enable feedback

Feedback privacy

Analyze feedback

Configure business-process monitoring

Configure alerts and reports

Validation checklist

Related documentation

Get Help