2025年以前に書かれたGoogleタグマネージャーのチュートリアルに従っていた場合、Shopifyのチェックアウトで設定した内容の半分は現在機能していません。checkout.liquidファイルは廃止され、「設定」>「チェックアウト」にあった「追加スクリプト」ボックスもなくなりました。Shopify Plus加盟店は2025年8月28日に、非Plus加盟店は2026年8月26日に、この機能が利用できなくなりました。もし現在のGTM設定がこれらのいずれかに依存している場合、購入イベントは発火しません。
これは再構築ガイドです。2026年現在で実際に機能するShopifyでのGoogleタグマネージャーの設定方法、つまりストアフロント用とチェックアウト用の2つのインストールを行い、両方が正しく動作していることを実証するためのテストを行います。
ShopifyがGTMを必要以上に複雑にする理由
Shopifyストアを2つの連結された建物と考えてください。
ストアフロントは最初の建物です。商品ページ、コレクション、カート、ブログ投稿などがこれにあたります。この建物はあなたのものです。テーマコードを編集することでここにGTMを設置できます。
チェックアウトは2番目の建物です。Shopifyはこれをセキュリティのためにサンドボックス環境で実行します。あなたのテーマコードはそれに到達できません。ストアフロントにインストールしたGTMコンテナは、買い物客がチェックアウト、支払い、またはサンキューページにアクセスしても読み込まれません。
2025年以前は、checkout.liquidまたは「追加スクリプト」フィールドに2つ目のGTMスニペットを貼り付けることでこれを回避していました。しかし、これらの方法は現在閉鎖されています。2026年の代替手段は、設定 > 顧客イベントで管理されるカスタムピクセルです。カスタムピクセルはサンドボックス化されたiframe内で実行され、postMessageを介して他の追跡スタックと通信します。
実際には、2026年におけるShopifyの完全なGTM設定は、1つではなく2つのインストールが必要です。
-
ストアフロント用の
theme.liquidに標準のGTMコンテナを設置する。 - チェックアウトおよびサンキューページ用の顧客イベントにカスタムピクセルを設置する。
どちらか一方を省略すると、データが数週間にわたって気付かない形で誤って表示されます。
設定を開始する前に必要なもの
- テーマの編集と顧客イベントの管理権限を持つShopify管理アクセス。
- Googleタグマネージャーアカウント。アカウントがない場合は、tagmanager.google.comにサインインし、コンテナを作成してください。ターゲットプラットフォームとして「ウェブ」を選択し、ストアのURLをコンテナ名として使用します。
- Google Analyticsにすでに設定されているGA4プロパティ。測定ID（
G-で始まる）を控えてください。GA4が設定されていない場合、以下のタグは意味をなしません。 - Googleタグアシスタントブラウザ拡張機能。これを使ってインストールを検証します。
- 実際に実行できるテスト注文。割引コードを使用して実際の支払い方法を使用し、その後返金します。2026年のチェックアウト追跡ではプレビューモードだけでは不十分です。
以下の内容はすべて、Online Store 2.0を使用し、Dawnのようなモダンなテーマ、または同じ構造に基づいて構築されたテーマを使用していることを前提としています。
パート1：ShopifyストアフロントにGTMをインストールする
これは、チェックアウトを除くすべてのページ（ホーム、コレクションページ、商品ページ、カート、ブログ、静的ページ）をカバーします。
ステップ1：GTMスニペットを取得する
GTMコンテナ内で、上部にあるコンテナID（GTM-XXXXXXXのように表示される）をクリックします。GTMは2つのコードブロックを表示します。両方をコピーします。最初のコードは<head>内に、2番目のコードは<body>の直後に配置します。
ステップ2：編集する前にテーマを複製する
公開中のテーマを直接編集しないでください。Shopify管理画面で、オンラインストア > テーマに移動します。使用中のテーマを見つけ、3つの点（...）をクリックし、複製を選択します。複製したテーマを編集します。何か問題が発生した場合でも、動作するバージョンにロールバックできます。
ステップ3：theme.liquidを開く
複製したテーマで、アクション > コードを編集をクリックします。左側のパネルのレイアウトの下にあるtheme.liquidを開きます。これは、すべてのストアフロントページを囲むテンプレートです。
ステップ4：ヘッドスニペットを貼り付ける
ファイルの先頭近くにある開始<head>タグを見つけます。その直後、できるだけ高い位置に最初のGTMスニペットを貼り付けて、早期に発火するようにします。
<head>
<!-- Google Tag Manager -->
<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');</script>
<!-- End Google Tag Manager -->GTM-XXXXXXXを実際のコンテナIDに置き換えてください。
ステップ5：ボディスニペットを貼り付ける
開始<body>タグまでスクロールします。その直後に2番目のGTMスニペットを貼り付けます。テーマにボディタグの近くにif browser.supports_no_jsブロックがある場合は、そのブロックの上にGTMスニペットを貼り付けてください。
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->ステップ6：保存、プレビュー、公開
ファイルを保存します。複製したテーマをプレビューします。タグアシスタント拡張機能を開き、ストアフロントのURLに接続し、コンテナが読み込まれていることを確認します。商品ページでコンテナが正常に発火したら、テーマを公開します。
ストアフロントのGTMがこれでライブになりました。チェックアウト前はすべて追跡可能です。次に、より難しい後半部分です。
パート2：カスタムピクセルでチェックアウトと購入を追跡する
これは、Shopifyストアの多くがデータを失う部分です。カスタムピクセルは、2026年のチェックアウトとサンキューページでタグを発火させる唯一のサポートされている方法です。
ステップ1：顧客イベントを開く
Shopify管理画面で、設定 > 顧客イベントに移動します。カスタムピクセルを追加をクリックし、「GTMチェックアウトピクセル」のような名前を付けてエディターを開きます。
ステップ2：ピクセルコードを貼り付ける
以下は、機能する出発点です。これは、ピクセルサンドボックス内にGTMをロードし、Shopifyの組み込みチェックアウトイベントをサブスクライブし、GTMコンテナが取得できるdataLayerにプッシュします。
// Load GTM inside the Custom Pixel sandbox
(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');
// Purchase event
analytics.subscribe("checkout_completed", (event) => {
const checkout = event.data.checkout;
window.dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: checkout.order.id,
value: checkout.totalPrice.amount,
currency: checkout.currencyCode,
tax: checkout.totalTax?.amount || 0,
shipping: checkout.shippingLine?.price?.amount || 0,
items: checkout.lineItems.map(item => ({
item_id: item.variant.product.id,
item_name: item.title,
price: item.variant.price.amount,
quantity: item.quantity
}))
}
});
});
// Begin checkout event
analytics.subscribe("checkout_started", (event) => {
const checkout = event.data.checkout;
window.dataLayer.push({
event: "begin_checkout",
ecommerce: {
value: checkout.totalPrice.amount,
currency: checkout.currencyCode,
items: checkout.lineItems.map(item => ({
item_id: item.variant.product.id,
item_name: item.title,
price: item.variant.price.amount,
quantity: item.quantity
}))
}
});
});GTM-XXXXXXXをコンテナIDに置き換えます。ピクセルを保存します。同意戦略に基づいて顧客のプライバシー権限を設定し、ピクセルを接続します。Shopifyは接続されるまでピクセルをアクティブ化しません。
ステップ3：サンキューページが公開されていることを確認する
購入追跡を妨げるShopifyの微妙な設定があります。設定 > チェックアウトに移動し、新しいチェックアウト拡張機能の下でサンキューページと注文ステータスページが公開されていることを確認します。公開されていない場合、カスタムピクセルは発火するページがなく、購入イベントはサイレントにドロップされます。
パート3：GTMで最初のGA4タグを設定する
これで2か所にGTMが読み込まれました。実際にタグを発火させるときです。
GTM内：
- タグ > 新規 > Google Analytics: GA4設定。測定IDを入力します。トリガー：すべてのページ。保存します。
-
タグ > 新規 > GA4イベント。イベント名：
purchase。設定タグ：今作成したGA4タグ。トリガー：イベント名purchaseのカスタムイベント。eコマースの下で、eコマースデータを送信するにチェックを入れ、データソースをデータレイヤーに設定します。保存します。 - コンテナを送信します。GTMの変更は、送信してバージョンを公開するまで有効になりません。
begin_checkout、add_to_cart、view_item、および関心のある他のイベントについても同様のパターンを繰り返します。
推測せずにすべてをテストする方法
ほとんどのストアがここで停止し、ほとんどの追跡バグが始まる場所です。これをスキップしないでください。
- GTMプレビューモード。GTMでプレビューを有効にし、ライブストアフロントURLに接続し、買い物客としてサイトを閲覧します。期待するすべてのタグが正しいページで発火していることを確認します。
-
カスタムピクセルデバッグ。Chromeでストアフロントを開き、開発者ツールを開いてコンソールに移動します。
Shopify.designModeと入力し、ストアフロントコンテキストにいることを確認します。カスタムピクセルはLaxサンドボックスで実行されるため、ピクセルログを表示するには、コンソールコンテキストドロップダウンをLaxに切り替えます。 - 実際のテスト注文。実際にテスト注文を最初から最後まで行います。割引を0.01ドルにするか、後で返金します。注文プレビューに頼らないでください。
-
GA4 DebugView。テスト注文を行う間、GA4 > 設定 > DebugViewを開きます。一意の
transaction_idを持つpurchaseイベントが1つ着地したことを確認します。 -
ネットワークタブ。開発者ツールで、
collectリクエストでフィルタリングします。購入収集リクエストは2つではなく1つだけ表示されるはずです。重複は、Google & YouTubeアプリのネイティブ追跡とGTM追跡の両方が同時に発火していることを意味する場合がほとんどです。
データを台無しにするよくある間違い
- 購入イベントの二重発火。ShopifyのGoogle & YouTubeアプリがGA4用にインストールおよび設定されており、GTMを介してGA4も発火している場合、すべての購入が二重にカウントされます。どちらか一方のパスを選択してください。GTMの柔軟性が必要な場合は、Google & YouTubeアプリでGA4を無効にしてください。
-
ライブテーマの編集。
theme.liquidに1つのタイプミスがあると、ストアフロント全体が空白になる可能性があります。常に複製してください。 - カスタムピクセルの接続忘れ。接続するまでピクセルは何も動作しません。保存とライブは異なります。
- 同意処理の不足。EUまたはUKのトラフィックを処理する場合、カスタムピクセルとGTMタグは同意状態を尊重する必要があります。ピクセルで権限を設定し、GTMで同意モードv2を使用してください。
- プレビューモードがチェックアウトをカバーしていると仮定する。GTMプレビューはカスタムピクセルサンドボックス内で実行されません。チェックアウトタグを検証するには、実際の注文を行う必要があります。
-
トランザクションIDを無視する。
transaction_idが欠落しているか不安定な場合、買い物客がサンキューページを更新するたびにGA4は購入数を過剰にカウントします。
サーバーサイドタグ付けに移行すべき時期
2026年現在、クライアントサイドのGTMは、広告ブロッカー、SafariのITP、iOSのプライバシーデフォルト設定、および同意拒否により、イベントのシェアをますます失っています。もしあなたのストアの収益が月間約10万ドルを超える場合、または有料広告がコンバージョン精度に大きく依存している場合、サーバーサイドGTMは真剣に検討すべき事項となっています。
サーバーサイドタグ付けは、実際のデータ収集を買い物客のブラウザから、あなたが自身のサブドメインで制御するコンテナに移動させます。これにより、よりクリーンなアトリビューション、より高速なページロード、そしてMeta CAPIやGoogle広告のコンバージョンマッチ率の向上が期待できます。これは初心者向けの設定ではありませんが、追跡に真剣に取り組むShopifyブランドは最終的にここに行き着きます。
専門家に任せるべきとき
GTMの設定は、チェックリストのように見えても、実際には沼地のような作業になることがあります。スニペットを貼り付け、テスト注文を行い、それでも購入が表示されず、GA4が奇妙な数字を報告し、金曜の夜にピクセルサンドボックスのデバッグを行うことになります。
もしこれを自分でやりたくない場合は、GTMからGA4、Meta CAPI、サーバーサイドまで、Shopifyアナリティクス設定のすべてを弊社で担当いたします。毎週行っている専門家によるShopifyの追跡とアナリティクス設定がどのようなものかをご覧ください。
よくある質問
GoogleタグマネージャーをインストールするためにShopify Plusである必要がありますか？
いいえ。ストアフロントでのGTMは、すべてのShopifyプランで機能します。チェックアウト追跡用のカスタムピクセルも、2026年からはすべてのプランで利用できます。
GTMにcheckout.liquidをまだ使用できますか？
いいえ。checkout.liquidは、Shopify Plusでは2025年8月28日に、非Plusストアでは2026年8月26日に廃止されました。代わりにカスタムピクセルを使用してください。
GTMはShopifyストアを遅くしますか？
<head>内にasyncで正しく読み込まれた場合、GTMは数キロバイトの追加であり、レンダリングをブロックしません。GTM内の肥大化したタグ設定は速度を低下させる可能性があります。タグをスリムに保ち、すべてを「すべてのページ」ではなくトリガーを使用してください。
すでにGoogle & YouTubeアプリを使用している場合でもGTMが必要ですか？
Google広告と基本的なGA4レポートのみに関心がある場合は、アプリで十分です。複数のピクセル（Meta、TikTok、Pinterest、Klaviyo）、カスタムイベント、またはサーバーサイドタグ付けが必要な場合はGTMを使用してください。
実際の注文なしで購買追跡をテストするにはどうすればよいですか？
実際の注文なしでは完全にテストすることはできません。GTMプレビューはカスタムピクセルサンドボックス内では実行されません。少額の実際の注文を行い、GA4 DebugViewで検証してから返金してください。
ヘッドレスShopifyストアでGTMをどこに配置しますか？
ヘッドレス設定では、ルートレイアウトでフレームワークレベル（Next.js、Hydrogen、Nuxt）でGTMを挿入しますが、チェックアウトはShopifyのドメインに残るため、チェックアウトにはカスタムピクセルが引き続き必要です。
お店の電話番号が必要ですか？
URLとカタログのサイズをお送りください。折り返し、確定したお見積もりと対象となるテンプレートリストをご連絡いたします。お電話は不要ですが、ご希望であれば対応いたします。
見積もりを取る
