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:

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:

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

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:

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:

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:

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:

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

🛠️ Configure custom events

A custom event should include, when available:

Use stable event names without trailing spaces. For example:

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:

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:

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:

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:

Categorization helps distinguish:

📊 Configure error dashboards

Create a portlet using:

From an error instance, provide access to:

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:

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:

📈 Analyze feedback

Go to:

Germain Workspace -> Settings → Dashboards -> All

Search for:

Analyze feedback by:

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:

For each process, define:

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

🔔 Configure alerts and reports

Configure alerts for actionable conditions such as:

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:

✅ Validation checklist

After configuration, confirm that:

📚 Related documentation

ℹ️ Get More Information

GermainUX can help determine which monitoring, analytics and automation capabilities are appropriate for your Salesforce Experience Cloud environment.

Contact GermainUX Support.