Configure Monitoring for Shopify

⚙️ Configure Monitoring for Shopify

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

🔧 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

• 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

• 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

• 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:

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

• 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:

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:

<script
  type="text/javascript"
  async
  crossorigin="anonymous"
  src="https://GERMAIN_UX_HOSTNAME/config/download/file/agents%2Fwebux%2Fgermainapm.js?appName=SHOPIFY_APP_NAME&amp;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.

🧭 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:

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

• 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:

From an error instance, provide access to:

• Affected session

• Session Replay

• Page and customer journey

• Related clicks

• Network activity

• Stack or technical details

• 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

• 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

• 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

• 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

• 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

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

• 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

• Configure Third-Party Checkout Monitoring

• Configure Error Monitoring

• Configure Shopify Events

• Configure User Feedback

• KPIs for Shopify Monitoring

ℹ️ Get Help

The Germain Team can help you set this up. Contact GermainUX Support.