Shopify

Installing PostHog in a Shopify theme

To have unrestricted access to the features of PostHog in your Shopify store, you can install PostHog in your Shopify theme. To do this:

1. Get your PostHog JavaScript snippet from your project settings
2. Login to your Shopify dashboard
3. Go to 'Online Store' -> 'Themes'
4. On your theme, click 'Actions' -> 'Edit code'

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:

1. Click the green save button on the top right and you're good to go - PostHog should now 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?