3rd-Party Checkouts Monitoring for Shopify (Configure)

⚙️ Configure Monitoring for Third-Party Shopify Checkouts

Configure GermainUX RUM JS on supported third-party checkout platforms to extend monitoring beyond the Shopify storefront.

This enables GermainUX to capture supported checkout activity, errors, performance, and Session Replay after a shopper leaves the Shopify-hosted storefront.

📦 Supported checkout platforms

This guide provides configuration instructions for:

Contact GermainUX Support if you use another checkout provider.

Third-party platforms can change or restrict their custom-script capabilities. Confirm that your provider still permits JavaScript in the required checkout pages before beginning the configuration.

📋 Prerequisites

Before configuring a third-party checkout, verify that:

✨ GermainUX monitoring script

Use the following script unless GermainUX generated a store-specific version for your environment:

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

Replace:

For example:

<script
  type="text/javascript"
  async
  crossorigin="anonymous"
  src="https://mycompany.germainux.com/config/download/file/agents%2Fwebux%2Fgermainapm.js?appName=My%20Shopify%20Store&amp;defaultProfileName=Shopify">
</script>

URL-encode spaces and reserved characters in the application name.

Use the same application name across the Shopify storefront and third-party checkout when both parts should appear under the same application in GermainUX.

🔧 Configure Checkify monitoring

☁️ Add the script

1. Sign in to the Checkify administration interface.

2. Go to Advanced Settings > Scripts.

3. Create a new script.

4. Select the header placement.

5. Select Both to apply the script to the checkout and Thank You pages.

6. Enter GermainUX as the script name.

7. Add the GermainUX monitoring script.

8. Replace the hostname and application-name placeholders.

9. Save the changes.

✅ Validate Checkify

1. Start a new Shopify storefront session.

2. Add a product to the cart.

3. Continue to the Checkify checkout.

4. Complete a test order.

5. Open GermainUX and locate the session.

6. Verify that the Checkify checkout and Thank You pages appear in the journey.

7. Confirm that checkout errors, requests, and replay data are captured as expected.

If the storefront and checkout appear as separate sessions, review the cross-domain and session-correlation configuration.

🧭 Configure Funnelish monitoring

Funnelish custom code must be configured separately for each funnel that you want to monitor.

📃 Add the script

1. Sign in to Funnelish.

2. Open All Funnels.

3. Select the funnel to monitor.

4. Open Custom Codes.

5. Create a new custom code.

6. Select Page Head as the placement.

7. Enter GermainUX as the code name.

8. Add the GermainUX monitoring script.

9. Replace the hostname and application-name placeholders.

10. Apply the code to every required funnel page.

11. Save the configuration.

🔍 Validate Funnelish

1. Open the monitored funnel in a new browser session.

2. Navigate through every funnel step.

3. Submit only safe test information.

4. Complete the funnel when permitted.

5. Confirm in GermainUX that all expected pages and actions were collected.

6. Verify that the funnel uses the intended Shopify application and environment.

7. Confirm that excluded payment and personal information is not captured.

Repeat this validation for every configured funnel.

🔁 Configure Recharge Custom Checkout monitoring

The configuration described below adds GermainUX to the Recharge Thank You page. It does not provide visibility into the entire Recharge checkout unless Recharge also allows the script to run on the preceding checkout pages.

Add the script

1. Sign in to the Recharge administration interface.

2. Go to Storefront > Checkout.

3. Open the custom-code configuration.

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

5. Replace the hostname and application-name placeholders.

6. Save the configuration.

📋 Validate Recharge

1. Begin a test subscription or purchase from the Shopify storefront.

2. Continue through Recharge checkout.

3. Complete the test order.

4. Confirm that the Recharge Thank You page appears in GermainUX.

5. Verify that the purchase or completion event correlates with the intended Shopify journey.

Because this configuration monitors only the Thank You page, do not interpret missing intermediate Recharge activity as customer abandonment. Those checkout steps may simply be outside the monitoring scope.

📁 Configure the GermainUX monitoring profile

Go to:

Germain Workspace > Analytics > UX Monitoring Profiles

Select the Shopify profile and review the following settings.

🔗 Allowed domains and URL matching

Add the relevant third-party checkout domains and configure URL rules for:

Use logical page names instead of storing full dynamic URLs containing cart, checkout, customer, or order identifiers.

🔁 Session correlation

Configure the storefront and checkout to use:

Depending on browser privacy controls and the checkout provider’s security model, complete session continuity may not always be possible. Validate the behavior in every supported browser.

📈 Business-process monitoring

Define the checkout as part of a complete Shopify conversion process.

Example steps:

Configure separate outcomes for:

A missing event should not automatically be classified as abandonment unless monitoring is known to cover the relevant step.

🔒 Privacy and security

Third-party checkout pages can contain highly sensitive information. Apply strict capture controls before enabling monitoring in production.

Configure:

Where possible, exclude payment fields and embedded payment iframes entirely rather than relying only on masking.

⛔ Embedded checkout content

Content rendered inside a cross-origin iframe cannot normally be inspected by RUM JS running in the parent page. This commonly applies to payment fields and hosted payment widgets.

GermainUX can monitor the surrounding checkout page, but not necessarily the internal content or interactions of a protected third-party iframe.

🧪 Validate the complete journey

Test the integration before production rollout.

✅ Successful-checkout test

Verify that:

💔 Failure tests

Where safe, validate:

• Missing required information

• Invalid discount code

• Unavailable shipping method

• Declined test payment

• Checkout application error

• Third-party request failure

• Abandoned checkout

Keep the following classifications separate:

🔧 Troubleshooting

❌ No checkout data appears

Confirm that:

Use the browser developer tools to confirm that germainapm.js loads successfully.

↔️ Storefront and checkout are separate sessions

Review:

If correlation cannot be maintained directly, use a permitted non-sensitive journey identifier or event-based correlation. Never place customer, payment, or authentication information in URLs for this purpose.

🎞️ Session Replay is incomplete

Check whether:

• Only the Thank You page contains the script.

• Earlier checkout pages prohibit custom JavaScript.

• Checkout content is rendered inside cross-origin iframes.

• Elements or pages are excluded by privacy rules.

• Consent is granted only after part of the journey.

• The shopper moves between multiple checkout domains.

• The provider dynamically removes or replaces custom scripts.

🔁 Data is duplicated

Confirm that GermainUX is not loaded more than once through:

• The checkout provider’s global script configuration

• Funnel-specific custom code

• A Shopify web pixel

• The storefront theme

• A tag manager

• Another analytics integration

Retain only the intended deployment on each page unless GermainUX has explicitly configured deduplication.

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