From the list of Event Streams sources, select Shopify.
Assign a name to your source and click Continue.
Ignore the Disable client side identifier in the Legacy Shopify Tracker App setting as it only pertains to the Legacy Shopify integration.
Your Shopify source is now configured. Go to the Setup tab and note the source Write key. Also, note your workspace’s data plane URL. These are required while configuring the RudderStack Pixel app in your Shopify store.
Setup: Shopify
Go to the RudderStack Pixel app in the Shopify App Store. Then, download it to your Shopify store.
Enter the data plane URL and the source write key obtained above in the app’s settings page.
The Subscribed to Webhook Events setting will be turned on by default.
Turn on the Track Events via Shopify App Pixel setting. It is required to successfully trigger events from the web pixel.
Enable the theme app extension by clicking the Connect button next to RudderStack App Embed Script. You will then be directed to a new tab which opens the theme app editor screen.
On the left side in the App embeds section, turn on the toggle for script and then click Save button on the top right hand side.
The setup is complete once you save the changes. You can close the tab and return to the RudderStack Pixel app screen.
Pros and cons
Pros
As your store is fully based on a Shopify template, using the RudderStack Pixel app is the quickest way to set up comprehensive tracking for both app pixel events and webhook events.
RudderStack automatically handles the identity stitching between the pixel events from the client and the webhook events from the Shopify backend.
Cons
You cannot customize any of the event tracking done through the app. Also, you cannot add any custom events.
Because this solution leverages the RudderStack Pixel app, you cannot load the RudderStack JavaScript SDK on your Shopify store. Therefore, you cannot use device mode integrations. Only cloud mode integrations are supported with this solution.
You will not be able to leverage other features available in the JavaScript SDK.
2. Hybrid headless store with Shopify-hosted checkout
Follow the guidelines in this section to set up your Shopify solution if your store meets the following conditions:
Your online store is partly a custom site and not hosted by Shopify.
Your online checkout is hosted by Shopify.
You manage customers, orders, and inventories through Shopify’s backend.
From the list of Event Streams sources, select Shopify.
Assign a name to your source and click Continue.
Ignore the Disable client side identifier in the Legacy Shopify Tracker App setting as it only pertains to the Legacy Shopify integration.
Your Shopify source is now configured. Go to the Setup tab and note the source Write key. Also, note your workspace’s data plane URL. These are required while configuring the RudderStack Pixel app in your Shopify store.
Setup: Shopify
Go to the RudderStack Pixel app in the Shopify App Store. Then, download it to your Shopify store.
Enter the data plane URL and the source write key obtained above in the app’s settings page.
The Subscribed to Webhook Events setting will be turned on by default.
Turn off the Track Events via Shopify App Pixel and verify the Off label.
You do not need to connect the RudderStack App Embed Script as this setting is applicable only for the Fully Shopify-hosted store setup.
Click the Submit button to complete the app installation process.
Custom pixel setup
Click the Settings icon at the bottom left of the dashboard.
In the resulting Settings pop-up, click Customer Events.
Click the Add custom pixel button at the top.
Assign a name of your choice to this pixel. Then, click Add pixel.
Make sure to update the data plane URL and source write key in the script before pasting it.
Click Connect to connect the custom pixel to your store.
Pros and cons
Pros
Because of the relaxed permissions for the custom pixels, you can load the RudderStack JavaScript SDK on your Shopify store. Also, your first-party cookies that RudderStack loads and uses in the non-Shopify part of the site are accessible from the Shopify-hosted checkout part as well.
You can add custom events to the custom pixel code script and edit the tracking script as required.
This solution supports sending pixel events to both cloud mode and device mode integrations.
Cons
Identity stitching between the pixel events from the client and the webhook events from the Shopify backend is not guaranteed. You must deploy a manual HTTP request so that these events can be stitched together. See the Identity Stitching guide for more information on how to do this.
3. Fully headless store with Shopify backend
Follow the guidelines in this section to set up your Shopify solution if your store meets the following conditions:
If your store is completely custom and not hosted by Shopify.
You manage customers, orders, and inventories through Shopify’s backend.
This is a rare scenario given the recent Checkout Extensibility changes by Shopify.
From the list of Event Streams sources, select Shopify.
Assign a name to your source and click Continue.
Ignore the Disable client side identifier in the Legacy Shopify Tracker App setting as it only pertains to the Legacy Shopify integration.
Your Shopify source is now configured. Go to the Setup tab and note the source Write key. Also, note your workspace’s data plane URL. These are required while configuring the RudderStack Pixel app in your Shopify store.
This Shopify source must be different from the source collecting events from your online store.
Setup: Shopify
Go to the RudderStack Pixel app in the Shopify App Store. Then, download it to your Shopify store.
Enter the data plane URL and the source write key obtained above in the app’s settings page.
The Subscribed to Webhook Events setting will be turned on by default.
Turn off the Track Events via Shopify App Pixel and verify the Off label.
You do not need to connect the RudderStack App Embed Script as this setting is applicable only for the Fully Shopify-hosted store setup.
This solution gives you access to the reliable backend events from the Shopify webhook topics.
Cons
Because this solution only sends webhook events, it only supports cloud mode integrations. However, your fully headless website will likely have a normal setup and can leverage device mode integrations and all the features from the RudderStack JavaScript SDK.
Identity stitching between the pixel events from the client and the webhook events from the Shopify backend is not guaranteed. You must deploy a manual HTTP request so that these events can be stitched together. See the Identity Stitching guide for more information on how to do this.
Additional scenarios
This section covers some more scenarios around setting up and using the RudderStack Shopify solution based on your store setup and event tracking requirements.
Custom pixel only
You may have a scenario where you only want to track client-side events via the Shopify Custom Pixel.
You may want to do this for the following reasons:
You require the RudderStack JavaScript SDK to be loaded on the website to leverage the SDK’s features.
You may not want to track any webhook events due to the additional event volume or complexity when it comes to stitching user identities.
If your situation fits into any of the above scenarios, you can follow these instructions (starting from Step 4) to set up the custom pixel on your store.
Note that:
If your store is based on a fully-hosted Shopify template, then this custom pixel will be able to load the RudderStack JavaScript SDK and track all the standard pixel events that Shopify offers for the customer’s ecommerce journey.
If you are using a hybrid headless Shopify store setup, then the custom pixel will only track the checkout events. You will need to instrument event tracking for the part of the website that is not hosted by Shopify.
As the RudderStack Pixel app is not loaded in this scenario, you will not receive any server-side webhook events.
Pros and cons
Pros
You gain access to the advantages of the Shopify Custom Pixel, like having the flexibility to customize event tracking and add/remove events from being tracked. Also, you have the ability to load the RudderStack JavaScript SDK on your website and utilize all its features.
You do not need to be concerned about identity stitching for any webhook events.
Cons
As server-side webhook events are not tracked, your solution lacks the enhanced data that these events provide.
Fully-hosted Shopify template with custom pixel and RudderStack Pixel
Make sure that your custom pixel points to the JavaScript source set up in RudderStack and not the Shopify source.
Pros and cons
Pros
You gain access to the advantages of the Shopify Custom Pixel, like having the flexibility to customize event tracking and add/remove events from being tracked.
You have the ability to load the RudderStack JavaScript SDK on your website and utilize all its features.
Cons
As you are using the Shopify Custom Pixel for this implementation, you will need to maintain the code for any future updates.
This site uses cookies to improve your experience while you navigate through the website. Out of
these
cookies, the cookies that are categorized as necessary are stored on your browser as they are as
essential
for the working of basic functionalities of the website. We also use third-party cookies that
help
us
analyze and understand how you use this website. These cookies will be stored in your browser
only
with
your
consent. You also have the option to opt-out of these cookies. But opting out of some of these
cookies
may
have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This
category only includes cookies that ensures basic functionalities and security
features of the website. These cookies do not store any personal information.
This site uses cookies to improve your experience. If you want to
learn more about cookies and why we use them, visit our cookie
policy. We'll assume you're ok with this, but you can opt-out if you wish Cookie Settings.
