Shopifyのカスタムピクセルとは？顧客イベントでの設定方法とGA4・GTMの注意点

Shopifyでは、チェックアウトや購入完了のページに、テーマから直接タグを入れることはできません。GA4やMeta、TikTokなどの計測をチェックアウトまで通すときの入口が、管理画面の「顧客イベント」に入れるピクセルです。アプリが用意していない計測をしたいときや、GTMでタグをまとめて管理したいときに使うのが、ストアが自分でコードを入れる「カスタムピクセル」です。

この記事は、ShopifyのストアでGA4やGTMの計測を担当している方に向けて、カスタムピクセルの仕組みと制約、追加の手順、標準イベントとGA4の対応、GTMを入れるときに詰まりやすいところ、同意の扱い、Measurement ProtocolのためにクライアントIDを控える（取得して保存しておく）方法を説明します。仕様は2026年10月時点のShopifyのヘルプと開発者ドキュメントに沿っています。画面の表記は日本語のヘルプに合わせました（ヘルプの中でも「顧客イベント」「お客様イベント」と表記が揺れていて、「カスタマーイベント」と呼ばれることもあります）。

Shopifyのカスタムピクセルとは

カスタムピクセルは、Shopifyの管理画面に自分で書いたJavaScriptを登録して、ストアでの行動を外部の計測ツールに送る仕組みです。Shopifyはページの閲覧、商品の閲覧、カートへの追加、購入完了などの行動を「顧客イベント」として流していて、ピクセルはそれを受け取って（購読して）GA4やMetaなどに送り直します。

ピクセルは、オンラインストアのページ、チェックアウト、サンキューページ（購入完了のページ）、注文状況ページに自動で読み込まれます。以前はテーマの theme.liquid や、チェックアウト設定の「追加スクリプト」にタグを貼っていましたが、追加スクリプトは2025年8月28日から閲覧のみになり、Plus以外のストアは2026年8月26日に購入完了のページの切り替え期限を迎えました。いまチェックアウトまで計測するには、ピクセルを使うしかありません。経緯はShopifyでGA4の購入が計測漏れする原因と埋め方で説明しています。

ULTRO NOTES｜計測・分析ShopifyでGA4の購入が計測漏れする原因と埋め方ShopifyとGA4の購入数・売上が合わない、購入が計測されないときの原因と確かめ方を説明します。注文番号での突き合わせ手順、タグの見直し・サーバーサイドGTM・Measurement Protocolの比較、当社が作ったアプリ「GapFill」での埋め方まで。

ピクセルには、アプリが入れる「アプリピクセル」と、ストアが手で入れる「カスタムピクセル」の2種類があります。テーマに直接貼るタグも含めて比べると、次のようになります。

	アプリピクセル	カスタムピクセル	テーマに直接貼るタグ
入れ方	アプリをインストールする	［顧客イベント］にコードを貼る	theme.liquid などに貼る
動く場所	ストア、チェックアウト、購入完了、注文状況のページ	同じ	ストアのページだけ
動く環境	より制限が強いサンドボックス（strict。Web Worker）	少しゆるいサンドボックス（lax。iframe）	ページそのもの
ページの要素を読む	できない	できない	できる
Shopifyの同意の設定	効く	効く	効かない
保守	アプリの開発元	ストア自身（Shopifyのサポート対象外）	ストア自身

サンドボックス（lax と strict）の制約

ピクセルは、ストアのページから切り離された「サンドボックス」の中で動くので、ページの要素は読めず、画面に何かを表示することもできません。ピクセルがページの外のデータを勝手に集めたり、チェックアウトの表示を邪魔したりしないようにするための仕組みです。開発者ドキュメントでは、アプリピクセルは Web Worker を使う strict（厳しい）サンドボックス、カスタムピクセルは sandbox 属性に allow-scripts と allow-forms を付けた iframe の lax（ゆるい）サンドボックスで動く、と説明しています。

lax のほうは、ふつうのJavaScriptのタグ（gtag.js やGTM、Metaピクセルのコード）をそのまま入れやすい代わりに、次の制約があります。

できないこと・違うこと	代わりの方法
ボタンのクリックやフォームの入力値、外部リンクのクリックなど、ページの要素から情報を取る	標準イベントやDOMイベントのデータを使う。足りなければ、テーマのコードを編集して自分でイベントを送る（Shopify.analytics.publish()。開発者向けの作業）
ページのURLがおかしくなる（window.location.href などがストアのページではなく、サンドボックスのURLを返す）	page_viewed などのイベントに入っているページの情報（event.context）を使う
ボタンやバナーなど、画面に何かを表示する	できない
スクロールやマウスの動きを取る	できない
document.cookie でページのCookieを読む	browser.cookie.get() を使う（ページ本体のCookieを非同期で読める）
HTMLの <script src=...> を書く	JavaScriptで script 要素を作って読み込む

ヒートマップやYahoo広告のタグは、カスタムピクセルでは動かない

カスタムピクセルはiframeの中で発火するので、ページを直接読んだり、ページのURLや要素を前提にしたりするタグは、正しく動かないことがあります。Shopifyのヘルプも、サンドボックスでは取れないものとして「DOMから取るクリックやマウスの動き（ヒートマップ用）」を挙げ、一部のサードパーティのピクセルとは相性が悪いので提供元に確かめるよう書いています。

代表的なのが次の2つです。

• ヒートマップやセッション録画のツール（Microsoft Clarityなど）：ページの要素やクリック、スクロールを読めないので、カスタムピクセルに入れても使えません
• Yahoo広告のタグ：当社が確かめた範囲では、カスタムピクセルに入れても正しく計測できません。ShopifyでYahoo広告の計測をする方法は、別の記事でまとめる予定です

そのため、ヒートマップのタグはテーマ側（theme.liquid など）に入れます。ただし、チェックアウトとサンキューページ（購入完了のページ）にはテーマのコードが入らず、追加スクリプトも使えなくなったので、この2つのページではヒートマップのツールは使えません。カートまでの行動はヒートマップで、チェックアウトの中はカスタムピクセルの標準イベント（checkout_started、payment_info_submitted など）で見る、と分けて考えます。

カスタムピクセルのコードの中では、analytics（イベントの購読）、browser（Cookieやストレージ）、init（読み込み時点のページやカート、同意の状態）を、そのまま使えます。同意の変化を受け取るときは api.customerPrivacy を使います。

カスタムピクセルとアプリピクセル、どちらを使うか

用途に合うアプリがあるなら、アプリピクセルを使います。Shopifyのヘルプも、安定性、セキュリティ、自動更新の面から、まずアプリを探し、合うものが無いときにカスタムピクセルを使うよう勧めています。

したいこと	向いている入れ方
GA4とGoogle広告の基本の計測	Google & YouTubeアプリ。GA4の始め方：ShopifyとGA4の連携方法
Meta広告の計測	Facebook & Instagramアプリ。コンバージョンAPIの経路はShopifyのMetaコンバージョンAPIで比べています
公式アプリの無い計測ツールを入れる	カスタムピクセル
GTMで複数のタグをまとめて管理したい	カスタムピクセルにGTMを入れる
標準イベントにない独自のイベントやパラメータを送りたい	カスタムピクセル（テーマ側から publish する）
ヒートマップ（Clarityなど）	テーマのコード。チェックアウトとサンキューページでは使えない

当社の考え方では、カスタムピクセルは「アプリでは足りない部分を足すもの」です。GA4の購入をGoogle & YouTubeアプリで送っているストアが、同じ購入をカスタムピクセルからも送ると二重になります。カスタムピクセルを入れる前に、いまどの経路で何を送っているかを一覧にしておくと、後の確認が楽になります。

Metaピクセルも、Shopifyのヘルプにはカスタムピクセルでの書き方の例（fbq('init', ...) のあと、checkout_completed を受けて fbq('track', 'Purchase', ...) を送る形）があります。ただ、Facebook & Instagramアプリを入れているストアがカスタムピクセルからも送ると、同じ購入が二重に届きます。サーバーからコンバージョンAPIも送る場合は、ブラウザとサーバーで同じイベントIDを付けて重複を除く仕組みが前提です。考え方はコンバージョンAPIの記事で、ピクセルで作るオーディエンスはMetaピクセルの記事で説明しています。

ULTRO NOTES｜計測・分析コンバージョンAPIとは？ピクセルとの違いとShopifyでの設定コンバージョンAPI（CAPI）は、購入などのデータをサーバーからMetaに送る仕組みです。Metaピクセルとの違い、併用したときの重複除外の条件、設定方法の比較、Shopifyの公式アプリでの設定と、二重計測の確認点をまとめます。ULTRO NOTES｜広告運用Metaピクセルとは？Shopifyでの設置と、カスタム・類似オーディエンスの作り方Metaピクセルは、サイトでの行動をMetaに送るコードで、広告の計測、配信の最適化、オーディエンス作りに使います。Shopifyでの設置と確認、ピクセルや顧客リストから作るカスタムオーディエンス、類似オーディエンスの作り方、Advantage+ オーディエンスで「提案」扱いになった2025年以降の使い方までまとめます。

カスタムピクセルの追加手順

カスタムピクセルは、管理画面の［設定］＞［顧客イベント］で、名前を付けてコードを貼り、保存してから「連携」すると動き始めます。手順は日本語のヘルプに沿っています。

1. 先に、同じ計測をしている古いコードを外します。残すと二重に数えられます。見る場所は次のとおりです
   • ［オンラインストア］＞［テーマ］で、テーマの［…］から［コードを編集］を開き、theme.liquid などを gtag(、GTM-、fbq( で検索する
   • チェックアウト設定の［追加スクリプト］（閲覧のみになっているので、残っていても切り替え後のページでは動いていません）。Plusのストアは checkout.liquid も
   • ［アプリ］で、Google & YouTubeアプリやFacebook & Instagramアプリなど、同じ計測をするアプリが入っていないか
2. 管理画面の［設定］＞［顧客イベント］を開きます。ページの見出しは「お客様イベント」と表示されます
3. 右上の［カスタムピクセルを追加］を押し、［ピクセル名］に名前を付けます。ほかのカスタムピクセルと同じ名前は付けられません
4. ［ピクセルを追加］を押すと、イベントエディタが開きます
5. 必要なら［お客様のプライバシー］で［許可］と［データの販売］を設定します（後の「同意」の節で説明します）
6. ［コード］の欄にJavaScriptを貼ります。HTMLのタグ（<script> など）は外します
7. ［保存］を押します。すぐ動かすなら［ピクセルを連携］を押します

あとから連携するときは、［顧客イベント］の［カスタムピクセル］で、［連携していないピクセル］の下にある行の［連携］を押します。止めたいときは［連携を解除］を押します。解除してもピクセルは消えません。削除は行の［...］から行いますが、元に戻せません。

Shopify Pixel Helperでテストする

保存したら、ピクセルの画面の［テスト］から、Shopify Pixel Helper（Shopifyのピクセル確認ツール）を開いて確かめます。ストアを操作すると、受け取ったイベントが一覧に出ます。緑の点はイベントの購読とコードの実行が成功、赤の点はコードの実行が失敗したことを示します。

テストできるのは一度に1つのピクセルだけで、テスト中は編集できません（直したら保存し、Pixel Helperのタブを開き直します）。別のページに移るとイベントの記録は消えます。同意の設定によっては「ピクセルは同意を待機しています」と出るので、バナーで承諾するか、［テストを続行するために同意する］を押します。ヘッドレスコマースのストアや、プライベートモードのストアでは使えません。

購入完了のイベントまで確かめるには、テスト注文を入れます。Shopify ペイメントを使っているなら、［設定］＞［決済］の「Shopify ペイメント」で［管理］を押し、［テストモードを有効にする］を選ぶと、実際には請求されない注文を作れます。テスト注文でもピクセルは動くので、GA4にも購入として届きます。GA4のDebugViewで確かめたら、本番の数字に混ざった分をどう扱うかも決めておきます。どのイベントにどんなデータが入っているかは、次のコードを一時的に入れてブラウザのコンソールで見ると早く分かります。

analytics.subscribe("all_standard_events", (event) => {
  console.log(event.name, event.data);
});

Shopifyの標準イベントとGA4イベントの対応表

Shopifyの標準イベントは15種類あり、GA4に送るときはGA4の推奨イベントに読み替えます。購入は checkout_completed を purchase に、カートへの追加は product_added_to_cart を add_to_cart に当てます。名前とパラメータを読み替えないと、GA4のeコマースのレポートに入りません。GA4のイベントの種類と、eコマースのイベントに付けるパラメータの全体はGA4のイベント設定にまとめています。

ULTRO NOTES｜計測・分析GA4のイベント設定｜種類と作り方、Shopifyでpurchaseを取る方法GA4のイベント設定を、4つの種類と設定する場所の一覧から整理。拡張計測機能、イベントの変更と作成、GTMでの送り方、eコマースの推奨イベントと必須パラメータ、Shopifyでのつなぎ方、確かめ方とよくある失敗まで。

Shopifyの標準イベント	起きるとき	GA4の推奨イベント
page_viewed	ページを開いた	page_view
collection_viewed	コレクションのページを開いた	view_item_list
search_submitted	ストアで検索した	search
product_viewed	商品のページを開いた	view_item
product_added_to_cart	カートに商品を入れた	add_to_cart
product_removed_from_cart	カートから商品を外した	remove_from_cart
cart_viewed	カートのページを開いた	view_cart
checkout_started	チェックアウトを始めた	begin_checkout
checkout_contact_info_submitted	連絡先を入力した	（対応するものなし）
checkout_address_info_submitted	住所を入力した	add_shipping_info
checkout_shipping_info_submitted	配送方法を選んだ	（add_shipping_info に当てることもある）
payment_info_submitted	支払い情報を入力した	add_payment_info
checkout_completed	購入を完了した	purchase
alert_displayed / ui_extension_errored	警告の表示、拡張機能のエラー	（対応するものなし）

add_shipping_info には、Shopifyのヘルプは住所の入力（checkout_address_info_submitted）を当てています。GA4の add_shipping_info には配送方法（shipping_tier）を付けられるので、配送方法まで分析したい場合は配送方法の選択（checkout_shipping_info_submitted）に当てるほうが合います。どちらにするかを決めたら、両方からは送らないようにします。

標準イベントのほかに、クリックやフォームの送信を表すDOMイベント（clicked、form_submitted など）もあり、ストア、チェックアウト、サンキューページで使えます（注文状況ページでは使えません）。

purchase に入れるパラメータ

purchase のパラメータは、checkout_completed の event.data.checkout から取ります。ヘルプの対応表を整理すると、次のとおりです。

GA4のパラメータ	checkout_completed の値
transaction_id	checkout.order.id
value	checkout.totalPrice.amount
currency	checkout.currencyCode
tax	checkout.totalTax.amount
shipping	checkout.shippingLine.price.amount
coupon	checkout.discountApplications（コードを取り出す）
items	checkout.lineItems（GA4の items の形に組み替える）

値をそろえるときの注意は次の4つです。

• トランザクションIDの形をそろえる：checkout_completed の注文の情報（checkout.order）に入っているのは注文のIDと購入者の情報だけで、管理画面に出る #1001 のような注文番号はありません。ほかのタグ（Google & YouTubeアプリなど）が注文番号を送っている同じGA4のプロパティに、注文のIDで送ると突き合わせができません。実際の値はPixel Helperで確かめ、ほかの経路と形をそろえてください
• item_id をほかの経路とそろえる：コード例ではSKUを使っていますが、Google & YouTubeアプリなど同じプロパティに送るほかの経路と形が違うと、GA4の商品のレポートで同じ商品が別々に出ます
• value を何にするか：開発者ドキュメントでは、totalPrice は関税・税・割引を反映した合計、subtotalPrice は関税・送料・税を含まない金額と説明しています。totalPrice に送料が含まれるかは書かれていないので、テスト注文の値を管理画面の合計と比べて確かめたうえで、どちらを使うかをほかの経路とそろえます
• 注文のIDは checkout_completed にしか入らない：開発者ドキュメントでは、order.id は checkout_completed 以外のイベントでは null です

checkout_completed は、1回のチェックアウトにつき1回、ふつうはサンキューページで起きます。購入後のアップセルがある場合は、最初のアップセルのページで起き、サンキューページではもう起きません。そして、そのページが読み込まれなかった場合は、まったく起きません。この仕様は、後の「拾えない購入」の節につながります。なお、標準イベントに返金はありません。返金をGA4に入れるには、ピクセルではなくサーバーから送ります。

GTMをカスタムピクセルで設定する方法（コード例つき）

購入のデータがGA4に届くまでの流れを、先に図で示します。

GTMは、カスタムピクセルにインストールコードを貼り、顧客イベントを購読して dataLayer に送ることで使えます。手順の要点は次のとおりです。

1. GTMの［管理］＞［Google タグマネージャーをインストール］で、head に入れるコードをコピーします
2. <script> と </script> を外して、カスタムピクセルのコード欄に貼ります
3. 標準イベントを購読して、dataLayer に push するコードを足します
4. GTMで、トリガーとGA4のイベントタグを作ります（下の最小構成を参照）

コードは、同意の設定、GTMの読み込み、イベントの購読の順に、1本にまとめて貼ります。同意のコードは、GTMを読み込むより前に書きます。GTMのコンテナIDは自社のものに置き換えます。

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// 1. 同意の状態をGoogleの同意モードに渡す（GTMより前に書く）
const toConsent = (p) => ({
  analytics_storage: p.analyticsProcessingAllowed ? "granted" : "denied",
  ad_storage: p.marketingAllowed ? "granted" : "denied",
  ad_user_data: p.marketingAllowed ? "granted" : "denied",
  ad_personalization: p.marketingAllowed ? "granted" : "denied",
});
gtag("consent", "default", toConsent(init.customerPrivacy));
api.customerPrivacy.subscribe("visitorConsentCollected", (event) => {
  gtag("consent", "update", toConsent(event.customerPrivacy));
});

// 2. GTMの読み込み（インストールコードからscriptタグを外したもの）
(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-XXXXXXX');

// 3. イベントの購読
analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    page_location: event.context.window.location.href,
    page_referrer: event.context.document.referrer,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  const c = event.data.checkout;
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push({
    event: "checkout_completed",
    page_location: event.context.window.location.href,
    ecommerce: {
      transaction_id: c.order?.id,
      value: c.totalPrice?.amount,
      currency: c.currencyCode,
      tax: c.totalTax?.amount,
      shipping: c.shippingLine?.price?.amount,
      items: c.lineItems.map((l) => ({
        item_id: l.variant?.sku || l.variant?.id,
        item_name: l.title,
        item_variant: l.variant?.title,
        price: l.variant?.price?.amount,
        quantity: l.quantity,
      })),
    },
  });
});

ShopifyのヘルプのGTMの例は、同意モードの値をすべて granted にした状態で書かれています。そのまま貼ると、同意の状態にかかわらずGoogleに「同意あり」と伝えることになるので、上のように同意の状態から値を作ります（同意の節で説明します）。

GTM側は、purchase なら次の最小構成で受けられます。

• トリガー：タイプは［カスタム イベント］、イベント名は checkout_completed（push した event の値と一字一句同じにする）
• タグ：［タグの種類］で［Google アナリティクス］＞［Google アナリティクス: GA4 イベント］、イベント名は purchase。［詳細設定］＞［e コマース］で［e コマースデータを送信］にチェックを入れ、［データソース］は初期値の［Data Layer］のまま
• page_location：GA4のタグのパラメータに、dataLayer変数で受けた page_location を入れる

代理店にGTMの設定を任せる場合の権限の渡し方は、GTMの権限の記事にあります。

ULTRO NOTES｜計測・分析GTMの権限付与の手順｜6つの権限の違いとアカウント削除の方法GTMの権限は、アカウントの2つ（管理者・ユーザー）とコンテナの4つ（公開・承認・編集・読み取り）の組み合わせです。付与と削除の手順、外部に渡すときの目安、アカウントやコンテナを削除したときの30日間の扱いまでまとめます。

GTMで詰まりやすいところ

GTMをカスタムピクセルに入れたときに詰まりやすいのは、確かめ方、ページのURL、自動で取れなくなるイベント、二重計上、client_id の取り違えの5つです。

詰まるところ	何が起きるか	対処
プレビューと Tag Assistant	Tag Assistantの「Troubleshoot tag」がカスタムピクセル内のタグを検出しない（Shopifyのヘルプ）。GTMのプレビューもうまく使えないという報告が多い	Pixel Helperでイベントを、GA4のリアルタイムとDebugViewで中身を、ネットワークのタブ（collect?v=2 で絞る）で送信を確かめる
ページのURL（page_location）	GA4が自動で取るURLにサンドボックスの情報が混ざる	GA4の自動のページビューを止め、page_viewed で受け取った page_location を page_view のタグに渡す。参照元のURLも、event.context.document.referrer を page_referrer として渡しておくと、ストアのページの値とそろう
拡張計測機能	外部リンクのクリック、スクロールなど、ページの要素を見て取るイベントが自動では取れない	必要なものだけ、テーマから Shopify.analytics.publish() で送る。使わないものは拡張計測機能をオフにしておく
二重計上	Google & YouTubeアプリやテーマのGoogleタグと、カスタムピクセルの両方から同じイベントが届く	送る経路を1つにする
client_id の取り違え	event.clientId はShopifyが振るIDで、GA4のクライアントIDではない	GA4のIDが要るときは _ga のCookieを読む（後の節）

page_location は、GA4のページのレポートだけでなく、参照元の判定にも使われます。GA4はURLに付いたUTMパラメータやgclidから参照元を判定するためです。UTMの付け方はUTMパラメータの記事で説明しています。購入（purchase）や他のイベントのタグにも、同じ page_location を付けておくと、イベントのページがずれません。(not set) が増えたときの見分け方はGA4の(not set)・directが多い原因で扱っています。

ULTRO NOTES｜計測・分析UTMパラメータの付け方｜生成ツールとGA4での確認方法、命名ルール表UTMパラメータは utm_source・utm_medium・utm_campaign の3つを小文字で付けます。パラメータ付きURLの生成ツール、ECで使える命名ルール表、GA4で値を確認する方法、自動タグ設定との優先順位までまとめます。ULTRO NOTES｜計測・分析GA4の(not set)とは？原因と直し方、Unassigned・directとの違いGA4の(not set)は、ディメンションの値がGA4に届いていないことを表す表示です。Unassigned・directとの違い、参照元・ランディングページなどディメンション別の原因、Shopifyで出やすいケース、探索での確かめ方まで。

二重計上は、カスタムピクセルを入れたときによく起きるトラブルです。『ネット広告運用“打ち手”大全 第2版』は、基本の計測の点検項目として「1つの行動が1回だけ計測されているか」を挙げています。手早い確かめ方は、GA4の探索で、トランザクションIDごとのトランザクション数が2以上になっていないかを見ることです。GA4の探索では、トランザクションIDは「取引 ID」という名前のディメンションになっています。ディメンションの選択で「取引 ID」を選び、指標の「トランザクション」と並べます。詳しい手順はGA4の購入が二重に入るときで説明しています。

ULTRO NOTES｜計測・分析GA4で購入が二重計測（重複）される原因と確かめ方｜Shopifyのアプリ・GTM併用GA4の購入がShopifyより多いのは、同じ注文が2つ以上の経路から送られているためです。トランザクションIDごとの購入数を探索で出す確かめ方、アプリとGTMの重なり、重複除外の仕様、直し方を説明します。

カスタムピクセルと同意（Customer Privacy API・許可の設定）

カスタムピクセルの同意は、管理画面の「許可」の設定と、コードの中で同意の状態をGoogleなどに伝える処理の、2つで扱います。前者はピクセルを動かすかどうかを決め、後者は動いたピクセルが同意に沿って送るかどうかを決めます。

ピクセルの許可の設定

［顧客イベント］＞［カスタムピクセル］でピクセルを開くと、［お客様のプライバシー］に2つの設定があります。

設定	選べるもの	既定	効き方
［許可］	［必須］（目的を選ぶ）／［不要］	［マーケティング］と［ストア分析］が必須	同意が必要なマーケットでは、選んだ目的の同意があるときだけピクセルが動く
［データの販売］	データの販売に該当するか	該当する	データの販売をオプトアウトした人には、ピクセルが動かない

同意が必要なマーケットは、ふつうはEEAと英国です。日本向けのマーケットで同意を求める設定にしていなければ、日本の訪問者にはそのまま動きます。同意バナーの出し方と、日本のECで同意が必要かの判断は、Cookie同意バナーの記事で扱っています。

ULTRO NOTES｜計測・分析Cookie同意バナーは必要？ECの判断基準とGA4の同意モードCookie同意バナーが必要かどうかは、どの国のお客様に販売しているかで変わります。日本向けの自社ECに関係する法律、同意バナーを出したときにGA4の数字がどう変わるか、同意モードの基本と高度の違い、Shopifyでの設定をまとめます。

［許可］を［不要］にすると、同意が必要なマーケットでも同意の前からピクセルが動きます。その場合は、次のCustomer Privacy APIを使って、同意の状態をコードの中で扱う必要があります。

Customer Privacy APIで同意の状態をGoogleに渡す

カスタムピクセルの中では、init.customerPrivacy で読み込み時点の同意の状態を、api.customerPrivacy.subscribe に visitorConsentCollected を渡して、バナーでの選択の変化を受け取れます。値は analyticsProcessingAllowed、marketingAllowed、preferencesProcessingAllowed、saleOfDataAllowed の4つです。GTMの節のコードの「1.」は、これをGoogleの同意モードに読み替えて、GTMを読み込む前に渡しています。

米国の州法への対応で、データの販売・共有のオプトアウトを受け付けているストアでは、ad_user_data と ad_personalization を marketingAllowed && saleOfDataAllowed のときだけ granted にする、という読み替えもできます。広告側で同意の状態をどう使うかは、拡張コンバージョンの記事でも触れています。

ULTRO NOTES｜計測・分析拡張コンバージョンとは？Google広告での仕組みとShopifyでの設定、2026年の変更点拡張コンバージョンは、購入者のメールアドレスなどをハッシュ化してGoogleに送り、Cookieで広告とつながらなかったコンバージョンを補う機能です。gclidとの関係、Googleタグ・GTM・ShopifyのGoogle & YouTubeアプリでの設定、2026年に始まった設定の統合、補えないものをまとめます。

どの目的をGoogleのどの項目に当てるかは、Shopifyのヘルプも「各サービスのドキュメントで確かめる」としているので、上は一例です。入れたら、同意を拒否した状態で実際に送信が止まるか（または同意なしの送信に切り替わるか）を、ネットワークのタブで確かめます。『クッキー規制を乗り越える！ 新しいデジタルマーケティングの本』も、バナーが表示されたことと、拒否が実際に送信に反映されたことを、別々に確かめるよう勧めています。

GA4のクライアントIDとセッションIDをカスタムピクセルで控える

カスタムピクセルでGA4のクライアントIDとセッションIDを控えておくと、GA4に届かなかった購入を、あとからMeasurement Protocolで元の訪問とつなげて送れます。IDが無いまま送った購入は、GA4では訪問の無い新しいユーザーの購入になり、参照元が付きません。

GA4のIDは、ストアのドメインに保存される2つのCookieに入っています。カスタムピクセルからは、browser.cookie.get() でページ本体のCookieを読めます。

Cookie	中身	値の例
_ga	クライアントID	GA1.1.123456789.1700000000（後ろの2つの数字がクライアントID）
_ga_ ＋ 測定IDの G- を除いた部分	セッションID	値の中にセッションの開始時刻の数字が入る

Googleのドキュメントでは、2026年2月から、この2つのCookieの値をMeasurement Protocolにそのまま送っても受け付けられるようになりました。ただしGoogleは、Cookieの形ではない値を送ることを勧めています。送り方の詳細はMeasurement Protocolとはで説明しています。

ULTRO NOTES｜計測・分析GA4のMeasurement Protocolとは？サーバーから送る方法と48・72時間のルールMeasurement Protocolは、サーバーからGA4に直接イベントを送るGoogleの仕組みです。ECでの使いどころ、purchaseと返金の送り方、48時間・72時間などの期限、検証とDebugView、Data Manager APIとの違いまで。

控え方の例です。購入完了のときに、注文のIDと一緒に自社のサーバーへ送ります。

const MEASUREMENT_ID_SUFFIX = "XXXXXXXXXX"; // 測定ID G-XXXXXXXXXX の G- より後

let privacy = init.customerPrivacy;
api.customerPrivacy.subscribe("visitorConsentCollected", (e) => {
  privacy = e.customerPrivacy; // 同じページで後から同意した場合に更新
});

analytics.subscribe("checkout_completed", async (event) => {
  if (!privacy.analyticsProcessingAllowed) return; // 分析の同意が無ければ控えない

  const gaCookie = await browser.cookie.get("_ga");
  const gaSessionCookie = await browser.cookie.get("_ga_" + MEASUREMENT_ID_SUFFIX);

  fetch("https://example.com/ga-ids", {
    method: "POST",
    keepalive: true,
    body: JSON.stringify({
      order_id: event.data.checkout.order?.id,
      checkout_token: event.data.checkout.token,
      ga_cookie: gaCookie,
      ga_session_cookie: gaSessionCookie,
    }),
  });
});

組むときに気をつけることは次のとおりです。

• _ga がストアのドメインにあるか：Google & YouTubeアプリを入れている、またはテーマにGoogleタグを貼っているなら、ストアのページでGA4が動いていて、_ga はストアのドメインに保存されます。どちらも無く、カスタムピクセルにGTMだけを入れている場合は、GA4はピクセルの中だけで動いています。どちらの場合も、ブラウザの開発者ツールでCookieを見て、実際に値が入っているかを先に確かめてください。Cookieとファーストパーティデータの関係はファーストパーティデータの記事で説明しています
• 購入完了より前にも控える：GA4に届かない購入には、購入完了のページが読み込まれなかったものが含まれ、その場合 checkout_completed で控えるコードは動きません。checkout_started や payment_info_submitted の時点で、チェックアウトのトークン（checkout.token）をキーにして控えておき、注文が入ったら注文側の情報と照合する方法があります
• 送り先はCORSに対応させる：サンドボックスからのリクエストになるので、受け取るサーバー側でクロスオリジンのPOSTを許可しておきます
• 送るのはIDだけにする：メールアドレスや住所など、購入者の情報は送りません
• 同意を守る：分析の同意が無い人のIDは控えず、その人の購入は後から送らないようにします

当社は、この「控える」から「送る」までをShopifyアプリ「GapFill」にしました。当社の製品なので、その前提で読んでください。チェックアウト時にアプリのピクセルでクライアントIDとセッションIDを自動で控え、GA4で漏れた購入データを、サーバーサイドで補完します。既存のタグ設定はそのままで、カスタムピクセルを書く必要はありません。漏れの割合を確かめる計測漏れレポートは無料です。

ULTROのShopifyアプリGapFill｜GA4で漏れた購入データを、サーバーサイドで補完既存のタグ設定はそのまま。計測漏れレポートは無料です。GapFillを見る →

カスタムピクセルでも拾えない購入

カスタムピクセルは、購入者のブラウザでShopifyのページが開かれたときにしか動きません。そのため、購入完了のページまで来なかった購入や、ストアに来ないで完了した購入は、どれだけコードを直しても拾えません。

購入の種類	ピクセルで拾えるか	理由
ふつうに購入完了のページまで来た購入	拾える	checkout_completed が起きる
外部の決済サービスから戻らなかった購入	拾えない	購入完了のページが開かれない
購入完了のページの読み込み中に閉じた購入	拾えない	ページが読み込まれないとイベントが起きない
広告ブロッカーやブラウザの追跡防止で送信が止められた購入	ピクセルは動いても、GA4への送信が止まることがある	送信先への通信がブロックされる
AIアシスタントやSNSアプリの中で完結した購入	拾えない	購入者のブラウザで、ピクセルが読み込まれるストアのページが開かれない
定期購入の2回目以降	拾えない	注文が自動で作られ、購入者はストアに来ない

ULTROの支援先のストア（GA4はGoogle & YouTubeアプリで連携）で、2026年8月から9月半ばの注文とGA4の購入を1件ずつ突き合わせたときは、GA4に入っていない注文が全体の21％ありました。アプリで連携していても、タグで計測できない購入は残ります。どれくらい残っているかは、自分のストアで注文とGA4を突き合わせて確かめるしかありません。決済手段ごとの差はアトリビューションの記事で紹介しています。

ULTRO NOTES｜計測・分析アトリビューションとは？GA4・広告・Shopifyで数字が合わない理由アトリビューションは、購入までに触れた広告やチャネルのうち、どれの成果とするかを決めるルールです。GA4・Google 広告・Meta広告・Shopifyで既定のルールがどう違うか、同じ購入が別々に数えられる仕組み、ECでどの数字を何に使うかをまとめます。

この分は、ピクセルではなく、Shopifyの注文データを起点にサーバーからGA4に送って補います。サーバーサイドGTMは最初のイベントがブラウザで起きる必要があるので、ピクセルが動かなかった購入は補えません。ピクセルで拾えない購入を補う方法は、ShopifyでGA4の購入が計測漏れする原因と埋め方で比べています。

ULTRO NOTES｜計測・分析サーバーサイドGTMとは？仕組み・費用と、Shopifyで拾えない購入サーバーサイドGTM（sGTM）は、ブラウザのデータを自社サーバーで受けて送り直す仕組みです。Cloud Run・Stapeの費用、ITP対策が効く条件、Shopifyでの注意点、ブラウザでタグが動かなかった購入は拾えないことまで説明します。

カスタムピクセルがうまく動かないときの確認

うまく動かないときは、ピクセルが動いているか、イベントを受け取れているか、送り先に届いているか、の順に切り分けます。

1. 連携しているか：［顧客イベント］のピクセルの一覧で、［ステータス］を見ます。2026年10月時点の画面では、動いているピクセルに［ウェブ］（アプリのピクセルでは［サーバー］が並ぶこともあります）と表示されます。ヘルプでは「接続済み」「連携」と書かれていて、表記が画面と分かれています。保存しただけでは動きません
2. 同意で止まっていないか：Pixel Helperに「ピクセルは同意を待機しています」と出ていないか、［許可］や［データの販売］の設定、［設定］＞［お客様のプライバシー］のマーケットごとの設定を見ます
3. コードのエラー：Pixel Helperで赤い点が出ていれば、そのイベントの処理でエラーが起きています。コードのいちばん外側（購読の外）でエラーが起きると、場所によってはピクセルが一部しか動きません
4. イベント名とトリガー名：GTMのトリガーの［イベント名］と、dataLayer に push した event が同じかを見ます
5. GA4に届いているか：GA4のリアルタイムかDebugViewで、イベント名とパラメータ（transaction_id、value、currency、items）を見ます。二重になっていないかも、ここで確かめます

GA4で最初に確かめておく設定はGA4の使い方の記事で、購入をキーイベントとして数える仕組みはキーイベントの記事で説明しています。

ULTRO NOTES｜計測・分析GA4の使い方｜ECで最初に見るレポートと、設定を直す順番GA4の使い方を、ECサイトで先に押さえる主要な指標8つ、最初に見るレポート4つと、最初に直しておく設定に絞ってまとめます。売上の概要、トラフィック獲得、e コマース購入数、ランディング ページの見方、ユーザー獲得との違い、データの保持・内部トラフィック・キーイベント・サービス間のリンクの設定、Shopifyとのつなぎ方まで。ULTRO NOTES｜計測・分析GA4のキーイベントとは｜ECで設定するイベントと、数え方・Google広告との違いGA4のキーイベントは、購入など成果として数えると決めたイベントで、以前の「コンバージョン」です。Google広告のコンバージョンとの違い、ECでキーイベントにするイベント、設定のしかた、カウント方法の違い、Google広告への取り込み、数字が合わない理由、レポートでの見方まで。

参考にした情報

• ピクセルと顧客イベント（Shopify ヘルプセンター）
• ピクセルの概要（Shopify ヘルプセンター）
• カスタムピクセル（Shopify ヘルプセンター）
• カスタムピクセルコードを作成する（Shopify ヘルプセンター）
• カスタムピクセルを管理する（Shopify ヘルプセンター）
• Google タグマネージャーのカスタムピクセルを作成する（Shopify ヘルプセンター）
• カスタムピクセルのテスト（Shopify ヘルプセンター）
• Web Pixels API（Shopify.dev）
• About web pixels（Shopify.dev）
• Standard Events（Shopify.dev）
• checkout_completed（Shopify.dev）
• DOM Pixel Events API（Shopify.dev）
• Pixel Privacy（Shopify.dev）
• browser（Shopify.dev）
• Shopify ペイメントのテストモード（Shopify ヘルプセンター）
• テーマのコードを編集する（Shopify ヘルプセンター）
• eコマースを測定する（Google for Developers）
• Measurement Protocol changelog（Google for Developers）
• ネット広告運用“打ち手”大全 第2版（寳洋平、釜周平、ザンノーニ・ダリオ）
• クッキー規制を乗り越える！ 新しいデジタルマーケティングの本（広瀬安彦）