Shopify App

Who can use this feature?
- Shopify App available with all Fullstory plans for web sessions (native mobile apps not currently supported).
- Fullstory Revenue Insights available with Fullstory Enterprise or Advanced plans.
- Session replay on Storefront pages + standard Shopify events on Checkout pages available on all Shopify plans.
- Session replay on Checkout pages available to Shopify Plus customers.

Fullstory’s Shopify app allows all customers to seamlessly deploy Fullstory across their Shopify Storefront pages (e.g. homepage, product pages) as well as capture standard Shopify events on Checkout pages within Fullstory.

Additionally, our app will allow Shopify Plus customers to be able to capture session replay for Checkout pages. While Shopify customers on lower plans will not be able to see session replay for their checkout flow, they can still pull in standard Shopify events to get more insight about how their customers are engaging with their checkout flow, even though session replay will render blank.

Configuration Steps

Step 0 - Remove the existing custom web pixel (if applicable)

Note: This step only applies to Fullstory customers who had previously set up the Shopify integration using the custom web pixel. If you were not previously using the custom web pixel, skip to Step 1 below.

Customers who may have implemented their own customizations via the web pixel may wish to add these back in. See below for additional information.

For customers that were previously capturing standard Shopify events via our custom web pixel, you will first need to deactivate this pixel by completing the steps below to ensure duplicate events that occur on Checkout pages are not indexed:

  1. Log into your Shopify Admin account.
  2. Navigate to the Customer Events page.
  3. Click the (...) button > Disconnect next to the Fullstory pixel. 

Step 1 - Setup Session Replay (Shopify Plus Only) & Standard Shopify Events for Checkout Pages

Sensitive Data Warning for Shopify Plus Customers: Since it’s possible to use a number of third-party payment providers and apps throughout your checkout flow, we highly recommend conducting an audit of your checkout flows to ensure that any sensitive information (such as credit card numbers or bank account information) has been successfully excluded prior to enabling session capture on your checkout pages.

Additionally, If your business is unable to capture PII in Fullstory (e.g. name, address, email), you’ll want to ensure you’re auditing your checkout flows for where this information is displayed as well or consider enabling Private by Default.
  1. Locate the Fullstory app in the Shopify App Store.
  2. Click 'Install.'
  3. Review the app’s required permissions, then click ‘Install.’
  4. Enter your Org ID in the ‘Fullstory Org ID’ field on the app configuration page.
  5. Optional: For customers using Fullstory Relay or a custom endpoint, enter the domain you’ve configured in the ‘Custom Endpoint (Optional)’ field. Otherwise, please leave this field blank.
  6. Select the ‘Use Order Completed Event’ checkbox to capture Shopify's Checkout Completed event as an Order Completed event in Fullstory. If your Shopify developers are sending this event over to Fullstory server side, you’ll want to deselect this option to prevent duplicate events being captured.
  7. Click ‘Connect App Pixel.’
  8. In Fullstory, an Admin user will need to toggle data capture On for ‘All other domains’ on the Settings > Data Capture and Privacy > Data Capture page in order to begin tracking standard Shopify events.

    Fullstory Data Capture Settings

Step 2 - Setup Session Replay for Storefront Pages

Capture user sessions on your Storefront pages by adding your Fullstory data capture snippet to your Shopify store's theme, using one of the methods below.

Need to access app settings after initial setup?
If you need to return to modify your Fullstory app configuration (including Identify settings), navigate to Shopify Admin > Online Store > Themes, click Customize on your active theme, then select the App embeds icon in the left-hand sidebar.

Method 1 - Add the snippet to your store’s theme via Fullstory’s Shopify App (Recommended Approach)

      1. From the app configuration page of Fullstory’s Shopify App, click on the ‘Enable Fullstory Snippet Theme.’
      2. Enter your Org ID in the ‘Fullstory Organization ID’ field on the left side of your screen.
      3. Most customers will not need to modify the Fullstory Host, Fullstory Script, or Fullstory Namespace fields from the default settings. However, if you are using Fullstory Relay, a custom endpoint, or a different Fullstory Namepace, you will need to adjust the defaults accordingly.

        Customers with European data residency will need to set the Fullstory Script value to http://edge.eu1.fullstory.com/s/fs.js and the Fullstory Host value to http://eu1.fullstory.com/.
      4. Next to the theme you want to edit, click on the ellipsis (...) button > Edit Code.
      5. To automatically identify logged in users based on the Shopify customer.id, toggle this setting on. When available, this setting will also pull in the customer’s Name, Email Address and Order Count as user properties.
      6. Important note: To ensure your company complies with end-user data deletion requests through Shopify's platform, you must pass the customer.id from Shopify as the uid in Fullstory’s Identify Users API. When identifying customers via our Shopify app, it will default to the customer.id.

        If you were previously using our Identify Users API with a different uid, switching to the customer.id will split the user's session and create a new user card under the customer.id uid.
        Additional Note: For customers that cannot capture end user PII including Name and Email Address information in Fullstory, you’ll want to ensure this setting is toggled Off and add code to identify your users directly within your theme.liquid file using our Identify Users API.
      7. Click ‘Save’ near the top right corner of your screen to apply the change.

Method 2 - Manually add Fullstory snippet to the theme in Shopify

      1. Login to your Shopify account, and open your Admin panel.
      2. Navigate to Online Stores > Themes
      3. Next to the theme you want to edit, click on the ellipsis (...) button > Edit Code.
        Shopify - Edit Code Step.png
      4. Locate theme.liquid in the Layout folder, paste your Fullstory data capture snippet (learn how to find it here) into the <head> of the theme, and click Save.
        Shopify - Edit Theme.png
    Note: If you're using a custom theme, it's possible that the theme file has a name other than theme.liquid. Check with the Shopify theme's developer to verify.
    Identifying Users

    When using Method 2, to automatically identify logged in users, you'll need to add code to your theme.liquid file using the Identify Users API.

    Important note: To ensure your company complies with end-user data deletion requests through Shopify's platform, you must pass the customer.id from Shopify as the uid in Fullstory's Identify Users API.

    If you were previously using our Identify Users API with a different uid, switching to the customer.id will split the user's session and create a new user card under the customer.id uid.

Method 3 - Add Fullstory snippet via a Tag Manager (e.g. Google Tag Manager)

First, you’ll need to ensure that your tag manager has been installed on your Shopify store. To do this, please follow the steps below:

  1. In Shopify Admin, navigate to Online Stores > Themes.
  2. Find your current theme, click the (...) button >  Edit Code.
  3. In the Layout folder, open theme.liquid.
  4. Check to see if your tag manager snippet is there. If not, paste your tag manager snippet just before the closing </head> tag.

Next, you'll want to install your Fullstory data capture snippet within your tag manager. You can find more detailed instructions for deploying using a tag manager here.

Identifying Users

When using Method 3, to automatically identify logged in users, you'll need to add code to your theme.liquid file using the Identify Users API.

Important note: To ensure your company complies with end-user data deletion requests through Shopify's platform, you must pass the customer.id from Shopify as the uid in Fullstory's Identify Users API.

If you were previously using our Identify Users API with a different uid, switching to the customer.id will split the user's session and create a new user card under the customer.id uid.

Step 3 - Configure a Revenue Event in Fullstory (Requires Fullstory Enterprise or Advanced)

For customers on a Fullstory Enterprise or Fullstory Advanced plan, an Admin or Architect user can follow the steps below to configure a revenue event in Fullstory:

  1. Go to Settings > Data Management > Events
  2. Scroll down to ‘Configure Revenue Insights’
  3. Click ‘Update Revenue Event’

Select the ‘Order Completed’ event as well as total_price_real or totalPrice_real as the revenue property.

Are there any limitations with session replay for checkout pages?

While Fullstory can unlock valuable data for Shopify Plus customers when it comes to analyzing your checkout flow, there are some restrictions on the data available from Shopify. These limitations affect most third-party analytics and session replay tools due to Shopify's security architecture.

  • Accelerated Checkout Flows (e.g. Apple Pay, PayPal, etc) in their entirety may not be captured. While some events might be captured before the redirect to an accelerated checkout, the subsequent steps within the accelerated checkout environment itself are generally outside the scope of the merchant's control and the Advanced DOM Pixel Events API.
  • Fullstory's Browser APIs will not work on Shopify Checkout pages due to Shopify's security restrictions. This means you will be unable to instrument our browser APIs, such as our Identify Users API, Analytics Events API, Set Page Properties API, Shutdown & Restart APIs, and other Fullstory Browser APIs.
  • Core Web Vital Metrics are not available through Shopify's APIs, which means customers cannot view or analyze these metrics for Shopify Checkout pages. Keep in mind, Shopify extensively monitors checkout page performance for all merchants.
  • Dev Tools Functionality will be limited as console logs and network calls are not made available to Fullstory via Shopify’s API. This includes information such as uncaught exception errors, HTTP request/response details, timings, and network error URLs.
  • Shop Pay checkout sessions cannot be captured as those sessions take place on a different domain (e.g. shop.app).
  • Shopify User Consent Permissions can prevent a session from being captured. If your end user has opted out of Marketing & Analytics permissions via Shopify, Fullstory will be unable to capture their session.
  • Fullstory Watched Elements cannot be captured at this time.

Frequently Asked Questions

If my checkout flow has customizations, will Fullstory still be able to capture this?

Other than the limitations noted above, we should be able to capture your flow even if you have customizations. If you find this is not working as expected, please reach out to our Support team so we can take a closer look.

Why is session replay for checkout pages only available to customers on a Shopify Plus plan?

In order to capture sessions that occur on your Checkout pages, you must be on a plan that includes access to Shopify’s Advanced DOM Pixel Events API. At this time, Shopify has limited this API to their Shopify Plus plan.

What standard Shopify events will be captured in Fullstory?

All Shopify app customers will be able to capture any standard Shopify events that occur on Checkout pages in Shopify, including:

Any standard Shopify events that occur on pages outside of the Shopify Checkout flow will not be captured. 

If we previously implemented additional code within the web pixel code that Fullstory provided us with in order to capture additional data, can we still pull that data in?

Generally, yes, keeping in mind that you'll want to exclude standard Shopify events that occur on Checkout pages to prevent duplicates. Any code that your Shopify developers had previously implemented should still work.

Here's what we recommend:

  1. Remove the existing custom web pixel, as outlined in Step 0 above.
  2. Complete the rest of the Shopify App setup.
  3. Create a new web pixel that includes your customizations, but without reference to the standard Shopify events which occur on Checkout pages.

Please note, Fullstory’s Support team is unable to provide specific code recommendations. We’d recommend working directly with your Shopify developers regarding instrumenting any custom code.

Why am I unable to see Express Checkout buttons (e.g. PayPal, Venmo, etc) or credit card fields rendering in Fullstory?

Since these elements are being rendered through a third-party iframe, Fullstory is unable to capture these due to standard browser security controls. You can learn more about capturing iframes here.

Is it possible to capture Account pages in Shopify?

The ability to capture the Customer Accounts page in Shopify will depend on which version you are using. You can verify what version you’re using by heading over to the Customer Accounts page in your Shopify account and seeing which option is selected under the ‘Choose which version of customer accounts to link to’ text.

New Customer Accounts: These pages typically appear on an account.yourstore.com subdomain and are hosted by Shopify, not on your store's infrastructure. Because Shopify hosts these pages, Fullstory is unable to capture activity on them—even though the URL includes your store's domain name. In contrast, pages hosted directly on your store's domain (such as yourstore.com/checkout/) will be captured normally.

Classic Customer Accounts (Legacy): These pages are always hosted on your Shopify store's domain, which means you'll be able to fully capture user sessions on these pages as long as you've completed Step 1 in this help article.

Why am I unable to locate a Shopify customer’s session in Fullstory?

In addition to the reasons highlighted in our Why can't I locate a user's session in Fullstory? help article, Shopify’s user consent preferences could also play a factor. In order for Fullstory to receive data via the Shopify App, users need to consent to Marketing, Analytics & Preferences tracking. If consent isn't given, Fullstory won’t be able to capture the user’s activity.

Why does my Shopify revenue data differ from what Fullstory is reporting?

By default, Fullstory can only report revenue for captured sessions (see limitations section above). We cannot track revenue changes that happen after purchase, such as order cancellations or refunds. We also cannot track orders that bypass the client-side checkout flow, including manually created orders, recurring subscriptions, and POS system purchases.

Additionally, if end users or their sessions are permanently deleted in Fullstory, this would also affect revenue reporting accuracy. Because of these factors, some differences between Shopify and Fullstory revenue data are expected.

If you are noticing a large discrepancy (e.g. most of your customers purchase products through the Shop app), Fullstory is able to ingest data via our server APIs. You could work with your Shopify developer to pass this Order Completed event over to Fullstory server-side, using a tool like Shopify Flow. Since every Shopify store is different, the exact implementation steps will vary, which is why we'd recommend working with your Shopify developer directly. 

How can I locate the corresponding order in Shopify based on the order_number_str I see passed into Fullstory within the Order Completed event?

The order_number_str is an internal Order ID that is available via Shopify’s APIs as it's the most reliable and consistent identifier for programmatic use. However, this Order ID is not typically visible within the Shopify UI.

In order to locate the corresponding order in Shopify, you can search for the order_number_str within your Shopify account and it will display the matching order complete with the Order Name/Number visible within your Shopify account.

When should I use the Identify toggle for the app?

If your team is not already identifying users using our API call then this option should be toggled on. You can create a segment looking for users where the signed-up status is signed up to check if the API is being used currently. If you have any questions around this, please reach out to the support team so we can take a look to advise further.

How does the app work with my cookie banner?

Fullstory's Shopify App uses the consent settings provided via Shopify. If you're looking to use a cookie banner (e.g. OneTrust), you may have a separate app installed to manage this, or have Customer Privacy settings defined in your Shopify Admin portal. You will need to check how your cookie banner is integrated to work with Shopify to make sure the consent / permissions are configured as expected.

What if my stores uses the Headless framework?

You will still need to follow the installation instructions by making sure the Fullstory data capture snippet is added to your main store front, the app is installed, and "All other domains" is toggled on in your account settings. This ensures that Fullstory can capture data from the checkout side.

Will Fullstory's Shopify App work when my store and checkout are on different domains?

If the URLs have the same second-level domain, e.g. `yoursite.com` and `checkout.yoursite.com`, the Fullstory Shopify App will work fine. If you have a staging or developer store environment where the guest checkout flow is on an unrelated domain, e.g. `yoursite.com` and `testcheckout.com`, the Fullstory Shopify App won't be able to work alongside the data capture snippet, which means Fullstory won't receive session replay or event data.


Was this article helpful?

Got Questions?

Get in touch with a Fullstory rep, ask the community or check out our developer documentation.