Shopify: Shopify でチェックアウト完了を追跡する

Shopify のチェックアウトはストアフロントの他の部分とは別ドメインで動くため、通常のトラッカースクリプトでは訪問者をチェックアウト全体で追跡できません。チェックアウト完了を取得するには、以下の 2 つの Shopify ネイティブフックのいずれかを使ってください。

アプローチ 1 — Customer Events ピクセル (推奨)

Shopify の Customer Events API は、成功ステップを含むすべてのチェックアウトページでサンドボックス化された iframe で動作します。2026 年において追跡ピクセルを追加するためのサポートされた方法です。

1. Shopify 管理画面で Settings → Customer events → Add custom pixel に移動します。
2. 「Zenovay tracker」と命名します。
3. このコードを貼り付けます:

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;

  // Zenovay トラッカーをピクセルサンドボックス内にロード
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.defer = true;
  script.onload = () => {
    // ('revenue', amount, currency, properties)
    window.zenovay('revenue',
      Number(checkout.totalPrice.amount),
      checkout.totalPrice.currencyCode,
      {
        order_id: checkout.order.id,
        item_count: checkout.lineItems.length
      }
    );
  };
  document.head.appendChild(script);
});

4. Save して Connect をクリックします。これで Customer Events はすべてのチェックアウトで自動的に動作します。

アプローチ 2 — Order Status JS (レガシー)

Shopify Plus ストアや、移行していない古いテーマでは、依然として Settings → Checkout → Order status page → Additional scripts にスクリプトを注入できます:

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.defer = true;
  script.onload = function() {
    window.zenovay && window.zenovay('revenue',
      {{ checkout.total_price | money_without_currency | replace:',','.' }},
      '{{ shop.currency }}',
      { order_id: '{{ checkout.order_id }}' }
    );
  };
  document.head.appendChild(script);
})();
</script>

二重中括弧の Liquid プレースホルダーは、注文確認時に Shopify が埋めます。

重要: 放棄されたカートはどうなるか

どちらのアプローチも放棄されたカートでは発火しません — これは設計上、完了した購入のみをカウントしたいからです。放棄カートのファネル離脱を追跡するには、ストアフロントに通常のトラッカーをインストールし、ファネル /cart → /checkouts/... → ゴール purchase を作成します。

動作の検証

1. ストアでテスト注文を行います (実際のカードを使いたくない場合は dev モードで Bogus Gateway を使用)。
2. Zenovay でウェブサイトのダッシュボードを開き、Live View タブに切り替えます。~30 秒以内に、新しいセッションとコンバージョンが表示されるはずです。
3. revenue は Revenue タブにも反映されます。

イベントが表示されない場合:

• 注文ステータスページを DevTools → Network タブで開き、api.zenovay.com へのリクエストを探します。なければスニペットが実行されていません。
• YOUR_TRACKING_CODE が正しい値か確認します。これはウェブサイトのインストールスニペット (data-tracking-code 属性) から見つけることができます — 表示される場所については Shopify 統合概要 をご覧ください。
• アプローチ 1 では、Customer Events → [あなたのピクセル] → Test でライブピクセルプレビューを表示します。

プラン提供状況

Revenue 追跡は Pro プラン以上で利用可能です。Free プランのユーザーは、どちらのアプローチでも purchase ゴールを送信できますが、Revenue タブと revenue 帰属はアップグレードするまでロックされたままです。

関連記事

• Shopify 統合概要
• E コマース revenue 追跡
• ゴール作成