How to add product analytics to a Shopify store

A Shopify shopper can inspect an offer without adding anything to the cart. Product analytics lets you compare that first action with the commerce events that follow.

In this tutorial, I'll add one storefront click event and check it beside the official app's product and cart activity.

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. Keep the shared app and offer section

Use the app connection and offer section from the Shopify web analytics tutorial. 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.

# Existing installation and this page's additions
App-owned analytics: unchanged
sections/amplitude-build-offer.liquid: keep all data attributes
assets/amp-shopify-events.js: add
layout/theme.liquid: add one asset tag near the closing body

The app reference lists Product viewed and Product added to cart. First locate those actual events in your test project's taxonomy. This page adds a different action, the offer link click, instead of recreating the app's commerce events.

2. Add the delegated offer handler

Create assets/amp-shopify-events.js. It uses Shopify's Customer Privacy API, requests version 0.2, and checks analytics permission at the moment of the click. A nested span still counts as the link. The global guard avoids repeated registration when a script is evaluated again.

// assets/amp-shopify-events.js
// Keep the app installation, replay privacy, guide registration, and experiment target.
(() => {
  if (window.__ampShopifyEvents) return;
  window.__ampShopifyEvents = true;
  let privacyReady = false;
  const allowed = () => privacyReady &&
    window.Shopify?.customerPrivacy?.analyticsProcessingAllowed() === true;
  window.Shopify?.loadFeatures?.([{ name: 'consent-tracking-api', version: '0.2' }], error => {
    privacyReady = !error;
  });
  document.addEventListener('click', event => {
    if (!(event.target instanceof Element)) return;
    const link = event.target.closest('[data-amp-shopify-offer]');
    if (!link || !allowed() || typeof window.amplitude?.track !== 'function') return;
    // This is a link click, not a cart or purchase confirmation.
    window.amplitude.track('Shopify Offer Clicked', {
      placement: 'build-offer', page_path: location.pathname
    });
  }, false);
})();

Add this tag once before </body> in layout/theme.liquid. Preserve all existing scripts, content_for_header, and the guide addition if present.

{% comment %} layout/theme.liquid: add once near the closing body; preserve other scripts. {% endcomment %}
<script src="{{ 'amp-shopify-events.js' | asset_url }}" defer></script>

The handler never cancels the link or submits a cart request. If the privacy API or SDK is unavailable, navigation still works and this custom event is skipped. It sends no customer identity, price, or form value. This check only governs this handler; verify the app's own consent behavior separately.

3. Compare a click with a native add-to-cart action

On the actual storefront, grant the intended test consent and wait for the app to load. Click the offer's nested text once. On the selected product page, use the theme's existing add-to-cart control and confirm the cart changed before calling the result a cart addition.

// Browser Console after the offer click and a native cart addition
window.amplitude.getDeviceId();
window.amplitude.flush();

Expect one Shopify Offer Clicked with placement=build-offer and page_path for the source page. Separately find the app's Product added to cart event and inspect its documented product, quantity, SKU, price, and currency fields. A CTA click or submitted form alone is not evidence of a saved cart or purchase. Don't synthesize an app event when the native event is missing.

4. Check refusal, withdrawal, and duplicates

Refuse analytics permission, reload, and click the offer. Grant permission and repeat with the SDK ready. Withdraw permission and repeat. Verify that the custom handler skips collection when the privacy API returns false and that the link still navigates.

// Browser Console: inspect the current Shopify permission decision
window.Shopify.customerPrivacy.analyticsProcessingAllowed();

Repeat script evaluation in a test environment and confirm a single event per click. Check the app's own page and commerce traffic as a separate consent test. Keep this storefront measurement separate from any checkout or order verification.

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.

Verify the app-provided commerce event on a real test store as well as the custom event.

Troubleshooting

The link works but the custom click is missing

Check that the section retains data-amp-shopify-offer, the privacy feature loaded, permission is true, and the app exposes track. The handler deliberately skips a click while the SDK is unavailable.

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

Is Shopify Offer Clicked an Amplitude default event?

It is the custom event defined in this file. The Shopify app's standard events are separate.

Does this count a successful purchase?

It counts a storefront link click. Verify the store's commerce events and their delivery before choosing a purchase metric.

Full code reference

Unchanged from earlier pages; keep your versions: App installation, sections/amplitude-build-offer.liquid, assets/amp-shopify-guides.js, assets/amp-shopify-experiment-consent.js.

// assets/amp-shopify-events.js
// Keep the app installation, replay privacy, guide registration, and experiment target.
(() => {
  if (window.__ampShopifyEvents) return;
  window.__ampShopifyEvents = true;
  let privacyReady = false;
  const allowed = () => privacyReady &&
    window.Shopify?.customerPrivacy?.analyticsProcessingAllowed() === true;
  window.Shopify?.loadFeatures?.([{ name: 'consent-tracking-api', version: '0.2' }], error => {
    privacyReady = !error;
  });
  document.addEventListener('click', event => {
    if (!(event.target instanceof Element)) return;
    const link = event.target.closest('[data-amp-shopify-offer]');
    if (!link || !allowed() || typeof window.amplitude?.track !== 'function') return;
    // This is a link click, not a cart or purchase confirmation.
    window.amplitude.track('Shopify Offer Clicked', {
      placement: 'build-offer', page_path: location.pathname
    });
  }, false);
})();

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 product 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