Shopify カスタムピクセルで注文IDと購入額を GA4 に送信する手順

はじめに

Shopify のカスタムピクセル機能を使って、購入完了（checkout_completed）時に注文IDと購入額（売上）を Google Tag Manager（GTM）経由で Google アナリティクス 4（GA4）に送信する方法を解説します。

 ShopifyからGA4へのデータの流れ

Shopify（カスタムピクセル） → window.dataLayer → GTM → GA4

 Shopify 側の設定

管理画面 > 設定 > カスタマーイベント > カスタムピクセル から新規ピクセルを追加します。

① 名前を入力（例: GA4ピクセル）
② コードエディタに下記サンプルコードを貼り付け
③ 保存して公開

カスタムピクセル サンプルコード

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXXXX');

analytics.subscribe("checkout_completed", (event) => {

  window.dataLayer = window.dataLayer || []; // Data Layer Objectを追加
  
  window.dataLayer.push({
    event: "test_event",
    order_id: event.data?.checkout?.order?.id,
    value: event.data?.checkout?.totalPrice?.amount,
    currency: event.data?.checkout?.currencyCode
  });
  
});

※GTM-XXXXXXXXはご自身のコンテナIDを記載ください。
※以降記載のある「test_event」は名称例となりますので、任意の名称でご利用ください。

Google Tag Manager の設定

1.変数 (Variables) の設定

以下 3 つの Data Layer 変数を作成します。

① 「order_id」 
• 名前: DLV -  order_id
• 変数タイプ: Data Layer 変数
• Data Layer 変数名: order_id
• Data Layer バージョン: 2
• 既定値: 空（任意）

② 「value」
• 名前: DLV -  value
• 変数タイプ: Data Layer 変数
• Data Layer 変数名: value
• Data Layer バージョン: 2
• 既定値: 0

③ 「currency」(任意)
• 名前: DLV - currency
• 変数タイプ: Data Layer 変数
• Data Layer 変数名: currency

2.トリガー (Triggers) の設定

■ 「test_event」カスタムイベントトリガー 
• 名前: CE - test_event
• トリガータイプ: カスタムイベント
• イベント名: test_event
• このトリガーの発生場所:
　- すべてのカスタムイベントに対して (既定)
　　または条件付きで「order_id が定義されている場合」などフィルタを追加しても可

3 タグ (Tags) の設定

■ 「test_event」イベントタグ
• タグタイプ: GA4 イベント
• 設定タグ: 既存の GA4 設定タグを選択
• イベント名: test_event
• パラメータ設定:
　– order_id = {{DLV - order_id}}
　– totalPrice = {{DLV - value}}
　– currency = {{DLV - currency}} (固定で "JPY" としても可)
• 送信時にパラメータを上書き: オフ (既定)
• トリガー: CE - test_event

GA4 側の設定

GA4 管理画面 > データの表示 > イベントで「test_event」をイベントとして登録します。
また カスタムピクセルを利用すると DebugView などを用いたイベントの確認が行えませんので、実際に公開しGA4のリアルタイムで受信されているか確認してください。

まとめ

カスタムピクセルとGTMを組み合わせることで、Shopifyの制限を回避しながら購入データなどの情報をGA4に安全かつ柔軟に連携できます。
導入に際しては、まずテスト環境で十分に検証したうえで本番環境へ反映することをおすすめします。

ご紹介したshopify標準の値以外でも値を作成することも可能ですので、ご自身でカスタムピクセルの対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければお問い合せください。