Deploy Monitoring for BigCommerce

Deploy Monitoring for BigCommerce

Overview

Deploy GermainUX RUM JS on a BigCommerce storefront to monitor:

• Real users and sessions

• Customer navigation and actions

• Storefront performance

• JavaScript and browser errors

• Network requests

• Product discovery

• Cart and checkout journeys

• Conversion and abandonment

• User feedback

• Heatmaps

• Session Replay

GermainUX can monitor BigCommerce-hosted storefront pages and customer-controlled headless storefronts wherever the monitoring script is permitted to execute.

Monitoring Scope

BigCommerce is a managed SaaS platform. GermainUX cannot directly access BigCommerce-managed databases, servers, or internal logs. It can analyze browser telemetry, API and webhook data, and telemetry from customer-controlled services.

Prerequisites

Before deployment:

1. Identify the BigCommerce stores, channels, storefronts, and environments to monitor.

2. Obtain permission to manage storefront scripts.

3. Confirm that browsers can reach GermainUX through HTTPS.

4. Define application and environment names.

5. Identify the storefront and checkout domains.

6. Review consent and privacy requirements.

7. Define masking, Session Replay, and retention rules.

8. Identify test, bot, administrator, and synthetic traffic to exclude.

9. Test the deployment on a nonproduction storefront or theme.

Create the BigCommerce Monitoring Profile

1. Go to Workspace > Settings > Wizards.

2. Select BigCommerce.
   

   

3. Enter the application name and storefront URL.
   

   

4. Configure the environment and privacy settings.
   

   

5. Complete the wizard.

6. Copy the generated GermainUX RUM JS loader.

To retrieve the installation instructions later:

1. Go to Workspace > Analytics > UX Monitoring Profiles.
   

   

2. Select the BigCommerce profile.

3. Open the configuration editor.

4. Select Installation.

Deploy Through BigCommerce Script Manager

For a standard BigCommerce storefront:

1. Sign in to the BigCommerce control panel.

2. Open Storefront > Script Manager.

3. Create a script.

4. Enter a clear name, such as GermainUX RUM.

5. Select the storefront pages and script location specified by the GermainUX wizard.

6. Select the appropriate consent category.

7. Paste the generated GermainUX loader.

8. Save the script.

9. Open the storefront and validate monitoring.

Use the broadest page scope required for complete customer-journey monitoring, subject to privacy and consent requirements.

Do not load GermainUX more than once through Script Manager, theme files, tag management, or another application integration.

Deploy Through a Stencil Theme

Use theme deployment when Script Manager is unavailable or when the organization manages monitoring through its theme-release process.

1. Add the generated loader to the common storefront layout.

2. Load it early enough to capture the initial page experience.

3. Ensure it appears only once on each page.

4. Rebuild and test the theme.

5. Publish the approved theme.

6. Confirm that RUM JS remains present after future theme updates.

Theme changes can be overwritten during upgrades or replacements. Include the GermainUX deployment in the theme’s source control and release checklist.

Deploy on a Headless Storefront

For a customer-controlled React, Angular, Vue, Next.js, or other headless storefront:

1. Add RUM JS to the top-level application document or common layout.

2. Configure the BigCommerce store, channel, site, and environment context.

3. Initialize monitoring once.

4. Configure client-side route monitoring.

5. Normalize product, category, cart, and checkout URLs.

6. Instrument business events that cannot be derived reliably from browser activity.

7. Validate server-side rendering and client-side navigation where applicable.

A script running inside a cross-origin iframe cannot inspect its parent or other protected frames.

Configure Consent

Align GermainUX collection with the storefront’s consent mechanism.

Depending on the organization’s policy:

• Prevent RUM JS from loading until consent is granted.

• Load GermainUX with restricted collection before consent.

• Disable Session Replay until the required consent is available.

• Stop or update collection when consent changes.

• Exclude users or regions requiring different treatment.

Classify the script correctly in BigCommerce Script Manager and test consent behavior for new, returning, accepted, rejected, and withdrawn-consent scenarios.

Configure Customer-Journey Events

Configure or instrument important commerce events such as:

• Storefront viewed

• Search submitted

• No search results

• Category viewed

• Product viewed

• Product option selected

• Product added to cart

• Product removed from cart

• Cart viewed

• Checkout started

• Checkout step completed

• Checkout error

• Order confirmed

Use stable event names and approved attributes.

Do not include:

• Payment-card information

• Authentication tokens

• Customer-entered text

• Full addresses

• Sensitive personal information

• Complete request or response payloads

Browser events describe the customer journey. Use authoritative BigCommerce order data for confirmed orders, revenue, refunds, and financial reporting.

Checkout and Payment Monitoring

Checkout visibility depends on where GermainUX is permitted to execute.

GermainUX can monitor:

• Cart-to-checkout navigation

• Checkout steps visible in the monitored context

• User actions

• Performance

• Browser and network errors

• Abandonment

• Order confirmation

For third-party or cross-origin payment pages:

• The parent storefront cannot inspect protected third-party content.

• GermainUX must be separately authorized and deployed in that context.

• Some payment providers do not permit custom monitoring.

• The journey can still be analyzed before leaving and after returning to the storefront.

• Server-side order and payment status can be incorporated through approved APIs or webhooks.

Do not attempt to bypass iframe, checkout, browser, or payment-provider security controls.

Configure Privacy and Session Replay

Before enabling production monitoring:

• Mask passwords and authentication fields.

• Exclude payment and address fields.

• Mask customer names, emails, and phone numbers.

• Remove tokens and sensitive query parameters.

• Exclude confidential account pages where required.

• Restrict access to Session Replay.

• Configure sampling and retention.

• Review product and cart attributes.

• Apply appropriate regional consent rules.

Validate privacy on product, cart, login, account, checkout, payment, and order-confirmation pages.

Configure API and Webhook Monitoring

Deploy a GermainUX Engine when server-side BigCommerce data is required.

Depending on the available APIs and permissions, GermainUX can collect:

• Orders

• Carts

• Customers or customer segments

• Products

• Store and channel context

• Webhook events

• API availability and response time

• Integration errors

Use a dedicated, least-privilege API account. Store credentials in an approved credential mechanism.

Do not claim direct access to BigCommerce-managed databases or internal application logs.

Configure Synthetic Monitoring

Use the GermainUX RPA Bot Recorder and Engine to execute critical storefront scenarios, such as:

• Homepage availability

• Product search

• Product-detail navigation

• Add to cart

• Cart update

• Customer login

• Checkout start

• Approved test checkout

Use dedicated test accounts, controlled products, and an approved payment strategy. Prevent synthetic tests from creating unintended orders, inventory changes, customer communications, or financial transactions.

Validate the Deployment

After deployment:

1. Open the storefront.

2. Confirm that RUM JS loads once.

3. Verify that a user session appears in GermainUX.

4. Browse categories and products.

5. Perform a search.

6. Add and remove a product from the cart.

7. Start checkout.

8. Complete an approved test order where permitted.

9. Confirm that events use the correct store, channel, and environment.

10. Verify browser errors and network requests.

11. Open Session Replay.

12. Confirm that sensitive values are masked.

13. Test consent acceptance, rejection, and withdrawal.

14. Test desktop and mobile storefronts.

15. Confirm that bot and synthetic traffic is categorized correctly.

Troubleshooting

No storefront telemetry appears

Verify that:

• The script is enabled in Script Manager or the active theme.

• The correct storefront and page scope are selected.

• The browser can reach GermainUX.

• Content Security Policy permits the required connections.

• Consent has been granted when required.

• The storefront URL matches the UX Monitoring Profile.

• Filters do not exclude the session.

Events are duplicated

Confirm that GermainUX is not deployed simultaneously through:

• Script Manager

• Theme files

• Tag management

• A headless application

• The RUM Browser Extension

Checkout telemetry is missing

Check whether:

• The checkout page permits the custom script.

• Checkout uses another domain or cross-origin frame.

• A third-party payment provider owns the page.

• Consent settings differ during checkout.

• The GermainUX script is enabled for checkout pages.

Orders and browser conversions do not match

Browser events can be blocked, interrupted, duplicated, or abandoned before the order is finalized. Use authoritative order data from BigCommerce APIs or webhooks to confirm completed transactions and revenue.

Deployment and configuration

Component requirements and feature availability depend on the BigCommerce storefront architecture, checkout ownership, consent configuration, API permissions, and desired monitoring depth.

ℹ️ Get Help

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