> ## Documentation Index
> Fetch the complete documentation index at: https://docs.germainux.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Monitoring for Shopify

> Configure GermainUX to capture, correlate, and analyze Shopify customer journeys across the storefront, cart, checkout, and third-party services.

Components
[`Engine`](https://docs.germainux.com/main/germain-ux-engine)
[`JS Profiler`](https://docs.germainux.com/main/germain-ux-js-profiler)
[`Mobile App`](https://docs.germainux.com/main/germain-ux-mobile-app)
[`RPA Bot Recorder`](https://docs.germainux.com/main/germain-ux-rpa-bot-recorder)
[`RUM JS`](https://docs.germainux.com/main/germain-ux-rum-js)

Availability
2023.3 or later

> [card] [Configure the Shopify UX monitoring profile](#configure-the-shopify-ux-monitoring-profile)
>
> Choose the store profile

> [card] [Configure Shopify events](#configure-shopify-events)
>
> Commerce events tied to sessions

> [card] [Configure third-party checkout monitoring](#configure-third-party-checkout-monitoring)
>
> Extend to external checkouts

> [card] [Configure error monitoring](#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](https://docs.germainux.com/main/deploy-monitoring-for-shopify.md).

### 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

> [accordion] 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

> [accordion] 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.

### Privacy and consent

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

> [accordion] 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 **KPIs**include:

* 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

> [accordion] 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](https://docs.germainux.com/main/configure-shopify-events-add-to-cart-remove-from-c.md).

### Display events in Session Replay

Shopify and custom events can appear as insights on the Session Replay timeline.

To add a custom timeline insight:

**1. Open the GermainUX configuration interface**

**2. Locate the User Session Replay dashboard configuration**

**3. Open the target portlet**

**4. Add the event to `timelineEvents`**

**5. Configure its matching criteria, label, and display properties**

**6. Save the configuration**

**7. Generate the event in a test session**

**8. 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:

```html theme={null}
<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

**1. Open the Checkify administration interface**

**2. Go to Advanced Settings -> Scripts**

**3. Create a header script**

**4. Select Both to apply it to checkout and Thank You pages**

**5. Name the script GermainUX**

**6. Add the GermainUX monitoring script**

**7. Replace the hostname and application-name placeholders**

**8. Save the changes**

**9. Complete a test checkout and verify the resulting session**

### Funnelish

**1. Open Funnelish**

**2. Go to All Funnels**

**3. Select the funnel to monitor**

**4. Open Custom Codes**

**5. Create a custom code**

**6. Select Page Head**

**7. Add the GermainUX monitoring script**

**8. Save the changes**

**9. Test every monitored funnel page**

### Recharge custom checkout

**1. Sign in to Recharge**

**2. Go to Storefront -> Checkout**

**3. Open the custom-code configuration**

**4. Add the GermainUX monitoring script to the Thank You Page field**

**5. Save the configuration**

**6. 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](https://docs.germainux.com/main/3rd-party-checkouts-monitoring-for-shopify-configu.md).

### 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

> [accordion] 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:

```javascript theme={null}
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

> [accordion] Show all 9
>
> * Business-process step
> * Conversion outcome
> * Similar occurrences

For detailed configuration, see [Configure Error Monitoring for Shopify](https://docs.germainux.com/main/error-monitoring-for-shopify-configure.md).

## 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

> [accordion] Show all 10
>
> * Target pages
> * Excluded pages
> * Consent requirements
> * Parent selector, when the popup must be placed inside a specific element

Example initialization:

```javascript theme={null}
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

> [accordion] Show all 9
>
> * Performance
> * Conversion outcome
> * Customer session

For detailed configuration, see [Configure User Feedback for Shopify](https://docs.germainux.com/main/user-feedback-for-shopify-configure.md).

## 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

> [accordion] 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

> [accordion] 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

> [accordion] 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.

> [accordion] 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.

## Related documentation

* [Deploy Monitoring for Shopify](https://docs.germainux.com/main/deploy-monitoring-for-shopify.md)
* [Configure Third-Party Checkout Monitoring](https://docs.germainux.com/main/3rd-party-checkouts-monitoring-for-shopify-configu.md)
* [Configure Error Monitoring](https://docs.germainux.com/main/error-monitoring-for-shopify-configure.md)
* [Configure Shopify Events](https://docs.germainux.com/main/configure-shopify-events-add-to-cart-remove-from-c.md)
* [Configure User Feedback](https://docs.germainux.com/main/user-feedback-for-shopify-configure.md)
* [KPIs for Shopify Monitoring](https://docs.germainux.com/main/kpis-for-shopify-monitoring.md)

## Get Help

> [card] [Contact GermainUX Support](https://docs.germainux.com/main/support.md)
>
> 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.

> [card] 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.