Shopify

PostHog makes it easy to get data about traffic and usage of your Shopify store. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, A/B testing, and more.

This guide walks you through integrating PostHog into your Shopify store using either the PixieHog Shopify app or a manual option.

Option 1: PixieHog Shopify app

PixieHog is a Shopify app that sets up PostHog with Shopify Customer Privacy API and Shopify Web Pixels API. To do this:

1. Install PixieHog from the Shopify App Store
2. Get your PostHog project API key and client host from your project settings and enter these into the account setup section. We also recommend setting up a reverse proxy to capture more usage data

3. Go to Web Pixels Events, turn on the channel, and choose the relevant events for your use case. You can find events documentation in the Shopify docs -> Web Pixels API -> Standard Events.

4. Go to JS Web Config, turn on the channel, enable PixieHog app embed on your live theme, and make sure to save the theme editor session.
5. Set ui_host to match your PostHog Cloud region.
6. Choose the relevant config for your use case. You can find these in PostHog's JavaScript Web configuration docs.

For more details, see the PixieHog documentation or check out the source code on GitHub. PixieHog is also self-hostable if you prefer.

Option 2: Installing PostHog manually into the theme

1. You should now be seeing a code editor. Click on theme.liquid under 'Layout' on the left sidebar
2. Navigate until you see the closing </head> tag. Paste your snippet there, before that tag:

3. Click the green save button on the top right and you're good to go - PostHog should now be capturing events on your Shopify store!

To confirm PostHog is configured correctly, visit your store and then check if the events from your session appear in the PostHog activity tab. This may take a few minutes.

Tracking conversions

Shopify's checkout flow doesn't allow arbitrary JavaScript to be run, so the PostHog JavaScript snippet cannot be used directly on the checkout page or post-purchase page. However, you can still track conversions by using a custom web pixel.

Setting up a custom web pixel

To set this up, first, go to the customer events tab in your store settings, click "Add custom pixel," and give your pixel a name.

Next, add code that contains:

1. The customer events you want to subscribe to. You can find a complete list in Shopify's Web Pixels API documentation.

2. Your PostHog JavaScript snippet which you can get from your project settings.

3. The rest of your PostHog capture logic.

As an example, here is the code for subscribing to a checkout_completed event. Every time a user checks out, we capture an event. We also call posthog.identify() so that we can track the user across different sessions:

analytics.subscribe("checkout_completed", (event) => {
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
  posthog.init('<ph_project_api_key>',{api_host:'https://us.i.posthog.com'})
  const checkout = event.data.checkout;

  posthog.identify(checkout.email, {
      email: checkout.email,
      first_name: checkout.billingAddress.firstName,
      last_name:  checkout.billingAddress.lastName,
    }
  )
  posthog.capture('merch store order submitted', {
    value: checkout.totalPrice.amount,
    created_at: event.timestamp,
    order_number: checkout.order.id,
    userId: event.clientId,
    order_id: checkout.order.id,
    products: checkout.lineItems.map((item) => {
      return {
        product_id: item.id,
        title: item.variant.product.title,
        quantity: item.quantity,
        price: item.variant.price.amount,
        currency: item.variant.price.currencyCode,
        sku: item.variant.sku,
        size: item.variant.product.size
      };
    }),
  })
});

In the above code, we capture the event with details like userID, order_number, and the product array with product_id, price, and more. This is then viewable in PostHog:

We recommend only using a Shopify pixel for tracking conversions. If using a pixel for other events (like collection_viewed or product_viewed), you may see CORS errors when viewing those webpages. While it doesn't affect the functionality of the pixel, everything else can be done using PostHog installed globally on your site.

Tracking items added to the cart

To track which product a user adds to their cart, we can use a data-ph-capture-attribute on the 'Add to cart' button (generally in product.liquid in Shopify). While this still requires adding code, it's less involved than creating a custom event. For example, capturing the product title and price (divided by 100) looks like this:

<input type="submit" class="add-to-cart-button" value="{{ 'products.product.add_to_cart' | t }}" 
    data-ph-capture-attribute-product-name="{{product.title}}" 
    data-ph-capture-attribute-product-price="{{product.price | divided_by: 100 }}"
/>

Once set up, the Add to cart button autocapture event in PostHog will include the properties for each of the attributes prefixed with data-ph-capture-attribute- and their values.

What can you do with this data?

You can use this data to answer questions like:

• Which products are being left in the cart most often?
• Which products are being purchased together most often?
• Which marketing campaigns are driving sales of different products?
• How does regionality of shoppers affect the products they buy?