How to add web analytics to a Shopify store

Shopify serves a store through an Online Store theme and connects commerce tools through apps. Web analytics helps you follow how a visitor reaches the storefront and moves between its pages.

In this tutorial, I'll connect the official app, add a reusable offer section, and trace a tagged storefront visit into Amplitude.

What you'll build

Prerequisites

• An Online Store Shopify test store and permission to install the Amplitude app and edit a duplicated theme. These tutorials target a Liquid theme, not a headless Hydrogen storefront.
• A test product and an Amplitude test project. Get its public API key in Settings > Projects > your project > General > Manage next to API Key. Admins and Managers can view it.
• A storefront privacy configuration that permits this synthetic test. Check initial refusal, grant, and withdrawal on the actual store. The custom code below controls only its own additions; it does not configure or stop the app's collection.
• Before using browser snippets, confirm the app exposes Browser SDK 2 methods on window.amplitude in the top storefront window. Check the installed version in Instrumentation Explorer. Do not add another initializer to make a missing global appear.

An Amplitude account and Shopify test store are required. Sign up for Amplitude; check the product limits for your project before testing.

1. Connect the official app

Follow the Shopify installation reference. Install Amplitude: Customer Analytics from the Shopify App Store. In its Amplitude Settings screen, enter your existing test project's API key and click Connect. Check the project and data-storage region before connecting.

# Shopify app connection checklist
App: Amplitude: Customer Analytics
Project: your Amplitude instrumentation test project
Credential: public project API key
Store: your Shopify test store

The official Shopify app owns the Browser SDK installation and initialization. Use one Amplitude project for this hub. The app also includes session replay and Web Experiment, so inspect capture and consent settings before you send real traffic. The project API key is public; secret keys never belong in theme files.

Keep the app installation and the theme's existing content_for_header. Add the files this tutorial names without replacing theme.liquid, its head, or another app's scripts. Use a duplicated, unpublished Online Store theme for edits and a test store with synthetic data.

2. Add the shared offer section

Create sections/amplitude-build-offer.liquid below. In the duplicated theme's editor, add Amplitude Build offer to the home template and select your test product. The section schema exposes the heading and product picker. This is an ordinary product link; the app remains responsible for analytics installation.

{% comment %}
sections/amplitude-build-offer.liquid
Keep the analytics, experiment, and guide attributes added by sibling tutorials.
{% endcomment %}
{% if section.settings.product != blank %}
  <section data-amp-build-section="{{ section.id | escape }}">
    <h2>{{ section.settings.heading | escape }}</h2>
    <a href="{{ section.settings.product.url }}"
       data-amp-shopify-offer data-experiment="shopify-offer" data-guide="shopify-offer">
      <span>Explore this product</span>
    </a>
  </section>
{% endif %}
{% schema %}
{
  "name": "Amplitude Build offer",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Find your next favorite" },
    { "type": "product", "id": "product", "label": "Test product" }
  ],
  "presets": [{ "name": "Amplitude Build offer" }]
}
{% endschema %}

The offer's data attributes give later pages a stable click, experiment, and guide target. Keep them when changing styles. The section renders only after you choose a product. Its product URL comes from that selection; keep your theme's existing product and cart templates.

3. Make one campaign-tagged visit

Open the storefront home page with a synthetic campaign, replacing the example host with your store's domain. Complete the test store's consent flow before inspecting collection. Follow the offer to the selected product without adding campaign parameters to the internal link.

# Browser address bar
https://YOUR-TEST-STORE.myshopify.com/?utm_source=build_qa&utm_medium=test&utm_campaign=shopify-build-qa

The app documents page-view and marketing-attribution capture. Inspect the actual event labels and attribution user properties; do not send a second page-view event from the offer click handler. Record storefront attribution separately from checkout behavior.

4. Check identity across storefront documents

Run this on the home page and selected product page, then refresh. Compare IDs on the same hostname and browser, using the top storefront context.

// Browser Console on the actual storefront
window.amplitude.getDeviceId();
window.amplitude.flush();

Use Instrumentation Explorer to confirm a page event for each document and the tagged landing properties. Repeat host changes as a separate identity test. The app can set a known user ID from checkout contact information; this tutorial does not add customer email or phone to theme code.

MCP: Ask your coding agent to inspect the project's event taxonomy with the Amplitude MCP server before adding custom events. Reuse an existing name when it describes the same action.

Verify it worked

1. Storefront: Open the actual storefront URL while logged out. Inspect the app's script and any theme additions. Use one app-owned analytics installation; a pixel sandbox and the top storefront window are different contexts.
2. Delivery: In browser Network, confirm event POSTs return HTTP 200 from api2.amplitude.com for US or api.eu.amplitude.com for EU. Compressed requests are not a reliable place to read event contents.
3. Instrumentation Explorer: Inspect event names, properties, counts, and device_id in the Chrome extension. Compare one action with one expected event.
4. User Profiles: Search that device ID in Users > User Profiles and inspect its event stream. The docs describe ten seconds to one minute for events. Ingestion Debugger provides request and event counts, not individual payloads.

Confirm attribution and identity on the actual storefront, not only in the theme editor.

Troubleshooting

Nothing appears after connecting the app

Check the connected project key, storefront privacy decision, app installation, script requests, and browser blockers. Use the storefront's top window when checking window.amplitude; a sandboxed custom pixel is a separate environment.

Events appear twice

Look for a second SDK in a custom pixel, tag manager, theme snippet, or older integration. Remove the duplicate installation through its supported configuration. Keep the app-owned SDK and the existing theme code.

Theme editing changes the result

Test the actual storefront URL as well as the duplicated theme preview. Confirm the same product, template, hostname, and privacy state. Theme editor rendering alone is not a hosted-store verification.

FAQ

Should I paste the Browser SDK snippet into Customer events too?

Keep the official app as the installation owner. A separate pixel can create another analytics path and identity. Inspect an existing pixel before deciding how to remove a duplicate.

Does this install session replay too?

The official app includes replay and Web Experiment. Set capture and sampling for your test project before real traffic, even when this page's goal is page views.

Full code reference

Sibling additions; keep them if already installed: App installation, assets/amp-shopify-events.js, assets/amp-shopify-guides.js, assets/amp-shopify-experiment-consent.js.

{% comment %}
sections/amplitude-build-offer.liquid
Keep the analytics, experiment, and guide attributes added by sibling tutorials.
{% endcomment %}
{% if section.settings.product != blank %}
  <section data-amp-build-section="{{ section.id | escape }}">
    <h2>{{ section.settings.heading | escape }}</h2>
    <a href="{{ section.settings.product.url }}"
       data-amp-shopify-offer data-experiment="shopify-offer" data-guide="shopify-offer">
      <span>Explore this product</span>
    </a>
  </section>
{% endif %}
{% schema %}
{
  "name": "Amplitude Build offer",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Find your next favorite" },
    { "type": "product", "id": "product", "label": "Test product" }
  ],
  "presets": [{ "name": "Amplitude Build offer" }]
}
{% endschema %}

Hand it to your agent

Give your agent this tutorial and the existing theme files. Keep the app installation, all sibling theme additions, and the selected test product.

Agent task: Shopify web analytics.
Use the official Amplitude Shopify app as installation owner. Merge only this page's additions; preserve content_for_header, product/cart templates, replay privacy, offer attributes, custom event handlers, and consent. Confirm actual Browser SDK methods before using snippets. Test consent and the promised outcome on a real Shopify test store. Report SDK delivery, native Shopify behavior, product configuration, and processed results separately. Do not call another analytics init or claim checkout behavior from a storefront test.

What this unlocks

Product analytics compares Shopify Offer Clicked with the app's observed product and cart events after both are verified.

Session replay shows the storefront interaction after capture, identity, and privacy checks pass.

Web Experiment uses the observed Shopify Offer Clicked event as the offer-copy test's primary metric.

Guides and surveys can ask what product information a visitor needs after the separate SDK and targeting are configured.

Next steps