Shopify Capture (Shopify App)

LogRocket makes it easy to capture valuable data from your Shopify checkout pages, including custom events and session replay. Shopify has specific restrictions on how data can be sent to other tools from their checkout pages, which may limit the tracking options you’re used to. However, by following the simple steps below, you can collect checkout data and send it to LogRocket for deeper insights into customer behavior.

📘
In order for LogRocket to capture video replay on checkout pages the store must be on a Shopify Plus plan. If your shop is not currently on a Shopify Plus plan then on checkout pages LogRocket will only capture standard Shopify events without any video replay.

Step 1 - Install the LogRocket App from the Shopify App Store

Shopify limits the ability for scripts to run on checkout pages. Instead, they make it possible to capture some events from the checkout process for tracking user behavior on these pages. To enable this capture, follow these steps:

Go to the LogRocket App in the Shopify App Store.
Click Install
Review the information that the LogRocket App requires access to and then click Install.
Fill in the App ID field on the LogRocket App configuration page with your LogRocket project's App ID and then click Save.
Your store is now configured to capture additional Shopify events throughout user sessions, including on checkout pages.

⚠️
If you have previously installed LogRocket on your Shopify store using the Custom Pixel approach, then be sure to deactivate and delete the custom pixel after installing the LogRocket App. If you leave the custom pixel activated then this will lead to duplicate Shopify events being captured in LogRocket sessions.

Step 2 - Add the LogRocket snippet to your Shopify theme

In order to capture user activity across your entire Shopify store using LogRocket, the LogRocket script snippet must be added to your store's Shopify theme.

Option A - Use the LogRocket Script Initializer app embed block

This is the Recommended approach to adding the LogRocket snippet to your Shopify theme.

From the configuration page of the LogRocket App click on the link to the Script Initializer app embed block in the Required Settings section. This should take you directly to the theme customization screen in your store with the LogRocket Script Initializer app embed selected and opened up.
Fill in the App ID field with your LogRocket project's App ID.
Optional: Fill in any LogRocket configuration options as a JavaScript object in the Options field.
Toggle the Script Initializer app embed on.
Save the changes to your theme.

Option B - Manually install the snippet

Review the Quickstart instructions to get the LogRocket script tag.
Edit the code of your store's theme and at the start of the <head> tag in your Shopify site's theme.liquid layout insert the LogRocket script tag.
Save the changes to your theme.

Step 3 - Identify your customers in LogRocket (Optional)

We recommend adding code similar to this into your theme.liquid template to identify the customer when they create an account with your store:

var customerOrders = {{ customer.orders | json }} || [];
var customerData = {
id: "{{ customer.id }}",
email: "{{ customer.email }}",
name: "{{ customer.name }}",
phone: "{{ customer.phone }}",
totalSpent: "{{ customer.total_spent | money }}",
customerOrders: customerOrders.length,
};

if (customerData.id !== '') {
window.LogRocket && window.LogRocket.identify(customerData.id, customerData);
}