Skip to main content

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.

tip

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

  1. Go to Shopify Admin > Settings > Notifications
  2. Scroll down to Webhooks and click Create webhook
  3. Configure:
    • Event: Order payment
    • Format: JSON
    • URL: https://api.tracelog.io/webhooks/shopify/orders/paid
  4. Click Save
  5. Copy the Webhook signing secret that Shopify displays
  6. In the TraceLog dashboard, go to Project Settings > Shopify Webhook Secret and paste the signing secret

Step 2b: Create the Refund Webhook

  1. In the same Webhooks section, click Create webhook again
  2. Configure:
    • Event: Order refund
    • Format: JSON
    • URL: https://api.tracelog.io/webhooks/shopify/orders/refunded
  3. 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:

  1. Go to the Events page in your project dashboard
  2. Find the purchase event (it appears after the first order is received) and set its type to Conversion
  3. Go to Revenue Tracking and configure:
    • Event name: purchase
    • Value source: Event field > value

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.

info

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.

Limitations

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:

FieldExample
value89.99
order_id5123456789
order_name#1042
total_price89.99
currencyEUR
item_count3
itemsArray with name, quantity, price, sku, product_id
financial_statuspaid
shipping_countryES

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:

  1. Shopify side: Go to Settings > Notifications > Webhooks and verify the delivery shows 200 OK
  2. TraceLog side: The purchase event should appear in your dashboard as a custom event named purchase
tip

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

warning

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.