Shopify
Track purchase conversions from your Shopify store automatically via webhooks. No JavaScript in the checkout, no pixel, no sandbox limitations.
How It Works
Customer completes purchase on Shopify checkout
|
Shopify sends webhook (server-to-server)
|
TraceLog API receives and stores conversion event
|
Purchase appears in your TraceLog dashboard
Prerequisites
- A TraceLog account with a project configured for your store domain
- Admin access to your Shopify store
Step 1: Install the Tracking Script
Add the TraceLog script to your Shopify theme to track browsing behavior. In your Shopify admin, go to Online Store > Themes > Edit Code and add the following before </head> in theme.liquid:
<script src="https://cdn.jsdelivr.net/npm/@tracelog/lib@latest/dist/browser/tracelog.js"></script>
<script>
tracelog.init({
integrations: {
tracelog: { projectId: 'PROJECT_ID' }
}
});
</script>
Replace PROJECT_ID with your actual project ID from the TraceLog dashboard.
Use the data-tlog-ignore attribute on any form fields that contain sensitive customer data (e.g., email, phone, address). TraceLog's PII sanitization catches most cases automatically, but this attribute provides an explicit guarantee.
Step 2: Configure the Webhook in Shopify
- Go to Shopify Admin > Settings > Notifications
- Scroll down to Webhooks and click Create webhook
- Configure:
- Event:
Order payment - Format:
JSON - URL:
https://api.tracelog.io/webhooks/shopify/orders/paid
- Event:
- Click Save
- Copy the Webhook signing secret that Shopify displays
- In the TraceLog dashboard, go to Project Settings > Shopify Webhook Secret and paste the signing secret
Step 2b: Create the Refund Webhook
- In the same Webhooks section, click Create webhook again
- Configure:
- Event:
Order refund - Format:
JSON - URL:
https://api.tracelog.io/webhooks/shopify/orders/refunded
- Event:
- Click Save (uses the same signing secret)
Refunds (full and partial) will be subtracted from revenue automatically.
Step 3: Configure Conversion Tracking in TraceLog
For purchases to appear in your conversion KPIs and revenue dashboards:
- Go to the Events page in your project dashboard
- Find the
purchaseevent (it appears after the first order is received) and set its type to Conversion - Go to Revenue Tracking and configure:
- Event name:
purchase - Value source: Event field >
value
- Event name:
Step 4: Enable Session Linking (Recommended)
Session linking connects purchases to the customer's browsing session. This is what powers session-based analytics like conversion rate by traffic source, revenue by channel, and buyer segments.
Without session linking, purchases are stored as events but will not appear in conversion KPIs, revenue dashboards, or session-based analytics. They remain queryable via raw events and AI insights.
With session linking, purchases attach to the customer's browsing session and appear in all conversion and revenue metrics.
Add this snippet before </body> in theme.liquid:
<script>
// Save TraceLog session ID to cart before checkout
document.addEventListener('submit', function(e) {
var form = e.target;
if (form && form.action && form.action.indexOf('/cart') !== -1) {
var sessionId = typeof tracelog !== 'undefined' && tracelog.getSessionId ? tracelog.getSessionId() : null;
if (sessionId) {
fetch('/cart/update.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ attributes: { tracelog_session_id: sessionId } })
});
}
}
});
</script>
This stores the session ID in Shopify's cart attributes, which the webhook receives automatically.
This snippet only captures form submissions targeting /cart (the standard add-to-cart and checkout flow). It will not capture the session ID in these cases:
- "Buy Now" buttons that skip the cart and go directly to
/checkout - AJAX/dynamic carts in modern themes that don't use form submissions
- Accelerated checkouts (Shop Pay, Apple Pay, Google Pay buttons)
Purchases from these flows will still be recorded as conversion events, but without session linking. To cover these cases, the snippet can be extended to write cart attributes on page load or on click events for buy-now buttons. Evaluate after initial deployment by checking the ratio of linked vs unlinked sessions.
What Gets Tracked
Each purchase creates a custom event with name purchase containing:
| Field | Example |
|---|---|
value | 89.99 |
order_id | 5123456789 |
order_name | #1042 |
total_price | 89.99 |
currency | EUR |
item_count | 3 |
items | Array with name, quantity, price, sku, product_id |
financial_status | paid |
shipping_country | ES |
Domain Matching
TraceLog matches the webhook to your project using the shop domain. The www. prefix is stripped automatically -- www.my-store.com and my-store.com resolve to the same project.
- If you use a custom domain (e.g.,
my-store.com), configure that as your project domain in TraceLog - If you use the default Shopify domain (e.g.,
my-store.myshopify.com), configure that instead
You can check what Shopify sends by looking at the webhook delivery logs in Shopify Admin > Settings > Notifications > Webhooks.
Verification
After setup, place a test order and check:
- Shopify side: Go to Settings > Notifications > Webhooks and verify the delivery shows
200 OK - TraceLog side: The purchase event should appear in your dashboard as a custom event named
purchase
If the webhook returns 404, verify the domain in your TraceLog project matches the Shopify shop domain.
Idempotency
The same order will never be recorded twice. Each order and refund is deduplicated automatically using Shopify's identifiers. Duplicate webhook deliveries (which Shopify may send on retries) are safely ignored. Multiple partial refunds on the same order are supported.
Currency
TraceLog logs a warning when the webhook currency does not match the project's configured revenue currency. Ensure your Shopify shop currency matches the currency configured in Revenue Tracking settings to avoid mismatched revenue data.