ShopifyにGTM（Googleタグマネージャー）を設定する方法

「広告タグもGA4もMeta PixelもTikTokタグも……計測タグが増えるたびにテーマのコードを触るのが怖い」

Shopifyストアを運営していると、いつの間にかこんな状態になっていませんか。タグを1つ追加するたびにLiquidファイルを編集して、消すときはどこに入れたか思い出せなくて、気づいたら不要なタグが残りっぱなし。

この悩みを一発で解決してくれるのが GTM（Googleタグマネージャー） です。

この記事では、2024年以降のShopify推奨方式である カスタムピクセル を使ったGTMの設定方法を、ステップバイステップで解説します。GA4タグの追加やコンバージョン計測の設定まで、この記事だけで完結します。

GTM（Googleタグマネージャー）

Googleが提供する無料のタグ管理ツールです。GA4、Google広告、Meta Pixel、TikTokタグなど、さまざまな計測タグをひとつの管理画面から追加・編集・削除できます。テーマのコードを直接編集する必要がなくなるため、タグの管理ミスや事故を大幅に減らせます。

なぜGTMが必要なのか

「GA4だけなら Google & YouTube アプリで十分では？」と思うかもしれません。たしかに、GA4の基本的な計測だけならアプリ連携で事足ります。

ただ、ストアが成長してくると状況は変わります。

1. 01

   広告タグが増えていく

   Google広告、Meta広告、LINE広告、TikTok広告。出稿先が増えるたびに、それぞれのタグを個別管理するのは現実的ではありません
2. 02

   細かいイベントを計測したくなる

   「特定のボタンがクリックされた」「ページの50%までスクロールされた」など、標準タグでは取れないデータが欲しくなります
3. 03

   タグの追加・削除を安全にやりたい

   GTMなら管理画面上でタグを操作できるので、テーマのコードを壊すリスクがありません。プレビューモードで事前確認もできます

ShopifyへのGTM設定手順（カスタムピクセル方式）

Shopifyでは、2024年以降 カスタムピクセル という仕組みを使ってGTMを導入するのが推奨されています。以前のように theme.liquid に直接タグを貼り付ける方法は、チェックアウト画面でタグが動作しないなどの制約があるため、カスタムピクセル方式を使いましょう。

Step 1: GTMアカウントを作成する

1. 1

   Googleタグマネージャーにアクセスする

   Googleタグマネージャーにアクセスし、Googleアカウントでログインします。

2. 2

   アカウントを作成する

   「アカウントを作成」をクリックし、アカウント名（ストア名など）を入力します。国は 日本 を選択してください。

3. 3

   コンテナを作成する

   コンテナ名にサイト名やドメインを入力し、ターゲットプラットフォームは ウェブ を選択します。利用規約に同意すると、GTMのコンテナID（GTM-XXXXXXX という形式）が発行されます。このIDをコピーしておいてください。

出典：Google公式 - タグマネージャーのセットアップとインストール

Step 2: Shopifyにカスタムピクセルを設定する

ここが一番重要なパートです。GTMのコンテナIDを使って、Shopifyのカスタムピクセルにコードを設定します。

1. 1

   Shopify管理画面を開く

   Shopify管理画面にログインし、設定 → お客様のイベント に進みます。

2. 2

   カスタムピクセルを追加する

   「カスタムピクセルを追加」をクリックし、名前を入力します（例：「GTM」や「Google Tag Manager」）。

   

3. 3

   GTMのコードを貼り付ける

   コード欄に以下のスクリプトを貼り付けます。GTM-XXXXXXX の部分を、自分のGTMコンテナIDに置き換えてください。

   (function () {
     var gtmId = 'GTM-XXXXXXX'; // ここを自分のIDに変更
     var script = document.createElement('script');
     script.src = 'https://www.googletagmanager.com/gtm.js?id=' + gtmId;
     document.head.appendChild(script);
   
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
       'gtm.start': new Date().getTime(),
       event: 'gtm.js',
     });
   })();
   

4. 4

   アクセス許可を設定する

   「顧客のイベント」セクションの アクセス許可 で、必要な権限を有効にします。購入イベントを取得したい場合は「チェックアウト」を許可してください。

5. 5

   保存して接続する

   「保存」をクリックした後、ピクセルのステータスを 接続済み に変更します。これでShopifyストア上でGTMが動作するようになります。

出典：Shopify公式ヘルプ - カスタムピクセルを管理する

GA4タグをGTMから配信する

GTMの設定ができたら、最初のタグとしてGA4を追加しましょう。Google & YouTube アプリ経由でGA4を設定済みの場合は、二重計測を避けるためにアプリ側のGA4接続を解除してからGTMで設定してください。

1. 1

   GTM管理画面でタグを新規作成する

   GTM管理画面を開き、タグ → 新規 をクリックします。タグ名は「GA4 - 設定」などわかりやすい名前にしておきましょう。

2. 2

   タグタイプを選択する

   タグタイプから Googleタグ を選択します。タグIDにGA4の測定ID（G-XXXXXXXXXX 形式）を入力してください。

3. 3

   トリガーを設定する

   トリガーは All Pages（すべてのページ） を選択します。これで全ページでGA4が動作します。

4. 4

   保存してプレビューで確認する

   タグを保存したら、GTM管理画面右上の プレビュー ボタンをクリックします。Tag Assistantが起動するので、ストアのURLを入力して接続し、GA4タグが「Tags Fired」に表示されることを確認します。

5. 5

   公開する

   問題なければ、GTM管理画面右上の 公開 ボタンをクリックします。バージョン名に「GA4タグ追加」などの説明を入れておくと、後から変更履歴を追いやすくなります。

コンバージョンタグの設定方法

GTMの真価が発揮されるのがコンバージョンタグの設定です。Google広告やMeta広告のコンバージョンタグもGTMから一元管理できます。

ここではGoogle広告のコンバージョンタグを例に、設定の流れを紹介します。

1. 1

   Google広告でコンバージョンアクションを作成する

   Google広告の管理画面で ツールと設定 → コンバージョン → 新しいコンバージョンアクション から、「購入」などのアクションを作成します。コンバージョンIDとコンバージョンラベルが発行されるので、メモしておきます。

2. 2

   GTMでコンバージョンタグを作成する

   GTM管理画面で新しいタグを作成し、タグタイプから Google広告のコンバージョン トラッキング を選択します。先ほどメモしたコンバージョンIDとラベルを入力します。

3. 3

   トリガーを「購入」に設定する

   トリガーは、カスタムピクセル経由で発火する購入イベントに合わせて設定します。Shopifyのカスタムピクセルでは checkout_completed イベントが利用できるので、カスタムイベントトリガーで checkout_completed を指定します。

4. 4

   プレビューで確認して公開する

   GA4タグと同様に、プレビューモードでタグが正しく発火することを確認してから公開します。

動作確認のチェックリスト

GTMとタグの設定が完了したら、以下のポイントをひとつずつ確認してください。

• GTMのプレビューモードでタグが「Tags Fired」に表示される
• GA4のリアルタイムレポートでアクセスが計測されている
• テスト購入をして、purchaseイベントがGA4に記録される
• Google広告のコンバージョンタグが購入時に発火している
• Google & YouTubeアプリのGA4連携がオフになっている（二重計測防止）
• ストアの表示速度に大きな影響が出ていない

よくある質問

まとめ

GTMを導入すると、計測タグの管理がびっくりするくらい楽になります。テーマのコードを触るドキドキからも解放されます。

設定の流れをおさらいしておきましょう。

1. 1

   GTMアカウントを作成してコンテナIDを取得する

   Googleタグマネージャーでアカウントとコンテナを作成します。

2. 2

   Shopifyのカスタムピクセルにコードを設定する

   Shopify管理画面の 設定 → お客様のイベント からカスタムピクセルを追加し、GTMのコードを貼り付けます。

3. 3

   GTMからGA4やコンバージョンタグを配信する

   GTM管理画面でタグを追加し、プレビューで確認してから公開します。

一度GTMを入れてしまえば、今後タグを追加・変更するたびにテーマファイルを触る必要がなくなります。広告の出稿先が増えても、GTMの管理画面だけで完結する。この安心感は大きいです。

まだGA4の基本設定が済んでいない方は、先にGA4の連携から始めてみてください。

→ ShopifyにGA4を設定する方法を見る

→ ShopifyのSEO対策で検索流入を増やす