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)
- Step 1 - Setup Session Replay (Shopify Plus Only) & Standard Shopify Events for Checkout Pages
- Step 2 - Setup Session Replay for Storefront Pages
- Step 3 - Configure a Revenue Event in Fullstory (Requires Fullstory Enterprise or Advanced)
Step 0 - Remove the existing custom web pixel (if applicable)
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:
- Log into your Shopify Admin account.
- Navigate to the Customer Events page.
- Click the (...) button > Disconnect next to the Fullstory pixel.
Step 1 - Setup Session Replay (Shopify Plus Only) & Standard Shopify Events for 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.
- Locate the Fullstory app in the Shopify App Store.
- Click 'Install.'
- Review the app’s required permissions, then click ‘Install.’
- Enter your Org ID in the ‘Fullstory Org ID’ field on the app configuration page.
- 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.
- 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.
- Click ‘Connect App Pixel.’
-
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.
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.
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)
-
- From the app configuration page of Fullstory’s Shopify App, click on the ‘Enable Fullstory Snippet Theme.’
- Enter your Org ID in the ‘Fullstory Organization ID’ field on the left side of your screen.
- Next to the theme you want to edit, click on the ellipsis (...) button > Edit Code.
-
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. - Click ‘Save’ near the top right corner of your screen to apply the change.
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 tohttp://edge.eu1.fullstory.com/s/fs.jsand the Fullstory Host value tohttp://eu1.fullstory.com/.Important note: To ensure your company complies with end-user data deletion requests through Shopify's platform, you must pass thecustomer.idfrom Shopify as the uid in Fullstory’s Identify Users API. When identifying customers via our Shopify app, it will default to thecustomer.id.
If you were previously using our Identify Users API with a different uid, switching to thecustomer.idwill split the user's session and create a new user card under thecustomer.iduid.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 yourtheme.liquidfile using our Identify Users API.
Method 2 - Manually add Fullstory snippet to the theme in Shopify
-
- Login to your Shopify account, and open your Admin panel.
- Navigate to Online Stores > Themes.
-
Next to the theme you want to edit, click on the
ellipsis (...) button > Edit Code.
-
Locate
theme.liquidin the Layout folder, paste your Fullstory data capture snippet (learn how to find it here) into the<head>of the theme, and click Save.
Note: If you're using a custom theme, it's possible that the theme file has a name other thantheme.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.liquidfile 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 thecustomer.idfrom 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 thecustomer.idwill split the user's session and create a new user card under thecustomer.iduid.
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:
- In Shopify Admin, navigate to Online Stores > Themes.
- Find your current theme, click the (...) button > Edit Code.
-
In the Layout folder, open
theme.liquid. -
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.
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:
- Go to Settings > Data Management > Events
- Scroll down to ‘Configure Revenue Insights’
- 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:
- checkout_address_info_submitted
- checkout_completed
- checkout_contact_info_submitted
- checkout_shipping_info_submitted
- checkout_started
- payment_info_submitted
- ui_extension_errored
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:
- Remove the existing custom web pixel, as outlined in Step 0 above.
- Complete the rest of the Shopify App setup.
- 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.