Shopify integration
Install Tapper on your Shopify store by hand, with the Monitoring script in your theme and the checkout pixel as a Shopify custom pixel.
Installing Tapper on a Shopify store by hand takes two scripts:
- The Monitoring script goes into your theme. It analyzes visitor behavior on every storefront page.
- The checkout pixel goes into a Shopify custom pixel. It captures cart and checkout events, including the purchase.
Shopify's checkout is sandboxed, so scripts in your theme never run there. That is why the checkout needs its own pixel.
Both steps are required. Without the custom pixel, Tapper cannot see checkout and purchase events on your store.
If you installed the Tapper Shopify app, skip Step 1: the app's Tapper Monitoring embed replaces the theme edit. Step 2 is still yours to do.
Step 1: Add the Monitoring script to your theme
In Tapper, open Setup > Website in the sidebar, then the Monitoring area and its Install script and consent tab. If you have several protected entities, first pick this store's entity in the switcher under your workspace name. Copy the Monitoring script, then add it to your Shopify theme.
Open the theme code editor
In your Shopify admin, go to Online Store > Themes, click the ⋯ button on your current theme, and select Edit code.
Open theme.liquid
In the file list, expand the Layout folder and open theme.liquid.
Paste the script
Paste the copied Monitoring script right after the opening <body> tag.
Save
Click Save. The script now runs on every storefront page.
Step 2: Add the checkout pixel as a custom pixel
On the same Install script and consent tab, scroll to the Conversion script section and select the Shopify tab. Copy the snippet in its third step, add the checkout pixel. The snippet starts Tapper with the ecommerce: "shopify-sandbox" setting:
var script = document.createElement("script");
script.src = "https://monitor.tapper.ai/bundle.js";
script.async = true;
script.onload = function () {
window.tapper.init("YOUR_TRACKING_ID", { ecommerce: "shopify-sandbox", analytics: analytics });
};
document.head.appendChild(script);The snippet you copy from Tapper already contains your tracking ID. The analytics object is provided by Shopify's pixel sandbox. Do not modify it.
Keep the Monitoring script in your theme as it is. The pixel works alongside it and does not replace it.
What the custom pixel captures
The pixel listens to Shopify's standard customer events and records the following, each with order value, currency, item count, and product IDs where available:
| Shopify event | Recorded as |
|---|---|
| Product viewed. | Product view. |
| Collection viewed. | Product list view. |
| Search submitted. | Search. |
| Product added to cart. | Add to cart. |
| Product removed from cart. | Remove from cart. |
| Cart viewed. | Cart view. |
| Checkout started. | Checkout started. |
| Payment info submitted. | Payment info added. |
| Checkout completed. | Purchase. |
A purchase carries your checkout's order value, currency and order ID, so there is nothing to map.
The pixel does not collect names, email addresses, or shipping details. It records the event type, order value, currency, and product IDs, plus the order ID on a purchase. It recognizes the visitor from Tapper's own first-party cookies and storage, and it never touches your cart attributes. The pixel runs inside Shopify's isolated sandbox and does not modify your theme, Google Analytics, or any other tag on your store.
Add it to Shopify as a custom pixel:
Open customer events
In your Shopify admin, go to Settings > Customer events.
Add a custom pixel
Click Add custom pixel and name it Tapper.
Paste the snippet
Paste the copied checkout pixel code into the code field.
Save and connect
Click Save, then click Connect to activate the pixel. Saving alone does not start it.
Verify
Visit your store, add a product to the cart, and start a checkout. In Tapper, confirm that visits and ecommerce events appear for this store's protected entity.