Analytics on Shopify

Installation

1. 1Open the theme code editor

   In the Shopify admin: Online Store → Themes, on the live theme click … → Edit code. To test first, duplicate the theme and edit the copy.

2. 2Paste the snippet in theme.liquid

   Under Layout, open theme.liquid and paste the snippet right before </head>. Save.

     <!-- before </head> -->
     <script src="https://cdn.jsdelivr.net/npm/@racoelho/analytics@0.2/dist/index.global.js"></script>
     <script>window.analytics = new Analytics.Analytics({ siteKey: 'YOUR_SITE_KEY' })</script>
   </head>

Events and goals

To count add-to-cart, paste this in theme.liquid, before </body>. It uses the product data Liquid already has on the page.

{% if template.name == 'product' %}
<script>
  // any "add to cart" form on the product page
  document.addEventListener('submit', function (event) {
    if (event.target.matches('form[action*="/cart/add"]')) {
      window.analytics && window.analytics.addToCart(
        '{{ product.id }}',
        {{ product.title | json }},
        {{ product.price | divided_by: 100.0 }},
        1
      )
    }
  })
</script>
{% endif %}

In the dashboard, create an add_to_cart event goal and a product → cart funnel to see which sources get there. Purchases: Shopify’s checkout doesn’t use theme.liquid, so the script doesn’t run there. To count orders, send a purchase event from your server (for example from an order webhook) using server-side ingestion.

Page navigation

Shopify storefronts reload the page on every navigation, and each load counts its own pageview. Nothing to configure.

Check that it works

1. Open the published site in a normal window, with no ad blocker.
2. In your browser devtools, Network tab, filter by v1/i: you should see a POST with status 200 within 3 seconds (or when you leave the page).
3. In the dashboard, events show up in about 30 seconds.
4. Open a product page, click add to cart and look for the add_to_cart event in the next POST.

Troubleshooting

I switched themes and data stopped

The snippet lives in the theme code. When you publish another theme, paste the snippet into its theme.liquid again.

I don’t see checkout events

That’s expected: checkout doesn’t load theme.liquid. Use server-side ingestion to record purchases.

The request returns 403 (origin_not_allowed)

Your domain isn’t in Allowed origins in the site settings. Add the exact origin — with https://, with and without www, plus test addresses like http://localhost:3000 if you want to measure in development.

No request shows up in the Network tab

The SDK honors Do Not Track by default: if your browser sends DNT, nothing is sent. Test in another browser or profile. Ad blockers can also block the script.

Pageviews show up twice

The SDK was initialized twice (for example, pasted in the theme and also added by a plugin). Keep a single instance per page.