Googleタグマネージャーで広告タグやピクセルを設置する具体的なメリットと手順

Meta広告

「Metaピクセルを設置したいけど、サイトのコードを直接触るのは怖い…」

「ピクセルもイベントも、結局どこから何を貼ればいいのかわからない」

Meta広告を自社で運用しようとすると、最初の大きな壁になるのがピクセルとイベントの設置作業です。HTMLやJavaScriptの知識がないと、自分でやるのはハードルが高く感じますよね。

そこでおすすめなのが、Googleタグマネージャー(以下、タグマネージャー)を使う方法です。タグマネージャーを使えば、サイトのコードを直接触らずに、ブラウザ上の操作だけでピクセルもイベントも設置できるようになります。

この記事を読むとわかること:

  • なぜタグマネージャーで設置するのか(直接埋め込みとの違い)
  • タグマネージャーのアカウント作成からコンテナ設置までの手順
  • Metaピクセルのベースコードを設置する方法
  • 標準イベント(お問い合わせ完了など)を設定する手順
  • 設置後の動作確認の方法
  • 内製でよくある失敗とその回避策

「とりあえずピクセル入れろって言われたけど、どこから手を付けていいか分からない…」という担当者の方が、この記事を読むだけで計測完了の状態まで持っていけるように、順を追って解説します。

なお、本記事は「ピクセル・イベント・コンバージョンの違い」を理解した上で読むとより効果的です。まだ用語に自信がない方は、先に「Meta広告のピクセル・イベント・コンバージョンの違いを解説」を読んでから戻ってきてください。

  1. なぜタグマネージャーで設置するのか?3つの理由
    1. 理由1: Webサイトのコードを直接触らずに済む
    2. 理由2: タグの管理が一元化できる
    3. 理由3: プレビュー機能で公開前に動作確認ができる
  2. 設置を始める前に必要な3つの準備
    1. 1. Googleアカウント
    2. 2. Meta広告アカウント&ピクセル発行
    3. 3. Webサイトの管理権限
  3. ステップ1:タグマネージャーのアカウント作成とコンテナ設置
    1. アカウント&コンテナの作成手順
    2. コンテナコードをサイトに設置
    3. サイト構築ツール別の貼り付け場所
    4. 設置できたかの確認方法
  4. ステップ2:Metaピクセルのベースコードを設置する
    1. Metaイベントマネージャからベースコードを取得
    2. タグマネージャーで「カスタムHTML」タグとして設定
    3. 重要:ベースコードの発火順序を保証する
    4. プレビューでベースコードの発火を確認
  5. ステップ3:標準イベントを設定する
    1. お問い合わせ完了をLeadイベントとして設定する手順
    2. サンクスページのURLをトリガーにする方法(推奨)
    3. 重要:イベントタグはベースコードの後に発火させる
  6. ステップ4:動作確認(タグマネージャープレビュー × Metaテストイベントツール)
    1. タグマネージャーのプレビューで「タグが発火しているか」を確認
    2. Metaのテストイベントツールで「Metaに届いているか」を確認
    3. なぜ2つのツールを併用するのか
    4. 確認できたらタグマネージャーで「公開」する
  7. 内製でよくある失敗とその回避策
    1. 失敗1: ベースコードとイベントコードの発火順序が逆
    2. 失敗2: コンテナを公開せず「プレビューのまま」
    3. 失敗3: 同じイベントが二重に計測されている
    4. 失敗4: トリガー条件が広すぎて関係ないページでも発火
  8. まとめ:タグマネージャーは「広告運用の最強の味方」

なぜタグマネージャーで設置するのか?3つの理由

ピクセルの設置方法には、「サイトのコードに直接貼り付ける方法」と「タグマネージャー経由で設置する方法」の2つがあります。本格的に広告運用するなら間違いなくタグマネージャー一択です。理由を3つに整理します。

理由1: Webサイトのコードを直接触らずに済む

直接設置だと、サイトの全ページの<head>内にコードを貼り付ける必要があります。サイトのテンプレートやテーマのファイルを編集することになり、間違えるとサイトが真っ白になるリスクもあります。

タグマネージャーなら、最初にコンテナコードを1度だけ貼り付ければ、それ以降はブラウザ上の管理画面でタグを追加・編集できます。HTMLを触る回数を最小限に抑えられるので、運用ミスのリスクが圧倒的に減ります。

理由2: タグの管理が一元化できる

Metaピクセルだけでなく、Google広告のコンバージョンタグ、GA4(Googleアナリティクス)、その他のマーケティングツールなど、多くのタグを使うことになります。直接埋め込みだと、サイトのコードがどんどんゴチャゴチャしていきます。

タグマネージャーを使えば、すべてのタグを1つの管理画面で見渡せるようになり、運用が劇的に楽になります。

理由3: プレビュー機能で公開前に動作確認ができる

タグマネージャーにはプレビュー機能があり、本番に反映する前に「自分のサイトで実際にタグが発火するか」を確認できます。「設定したつもりで何ヶ月も計測されていなかった」という悲劇を防げるのは、内製運用にとって極めて重要なメリットです。

設置を始める前に必要な3つの準備

実作業に入る前に、以下の3つを準備しておきましょう。

1. Googleアカウント

タグマネージャーはGoogleが提供するツールなので、Googleアカウントが必要です。会社用のアカウントがあればそれを使い、なければ新規作成してください。

2. Meta広告アカウント&ピクセル発行

Meta広告マネージャの「イベントマネージャ」で、自社用のピクセルをすでに発行済みの状態にしておきましょう。発行はピクセルIDが取得できれば完了です(コードはまだサイトに貼っていない状態でOK)。

3. Webサイトの管理権限

タグマネージャーのコンテナコード(最初に1回だけ貼るコード)を、サイトの<head>内に貼り付ける権限が必要です。自社サイトの構築ツール(CMSやノーコードツール)の管理画面にアクセスでき、HTMLコードの追加または貼り付けができる状態であれば大丈夫です。

サイト構築を外部に委託している場合は、制作会社にコンテナコードの設置を依頼することもできます。

ステップ1:タグマネージャーのアカウント作成とコンテナ設置

ここから実作業です。手順通りに進めれば、ITが苦手な方でも完了できます。

アカウント&コンテナの作成手順

tagmanager.google.com にアクセスして、Googleアカウントでログイン

②「アカウントを作成」をクリック

    ③以下の情報をを入力:

    • アカウント名: 会社名や事業名
    • : 日本
    • コンテナ名: 自社のドメイン(例:example.com)
    • ターゲットプラットフォーム: 「ウェブ」を選択

    ④利用規約に同意して「作成」

      コンテナコードをサイトに設置

      作成完了後、2種類のコンテナコードが表示されます。

      • <head>内に貼るコード: ページのできるだけ上の方に
      • <body>開始タグ直後に貼るコード: <body>の直後に

      これら2つを、サイトの全ページに表示される共通テンプレートに貼り付けます。

      サイト構築ツール別の貼り付け場所

      利用しているサイト構築ツールによって、コンテナコードを貼り付ける場所は異なります。代表的なツールでの貼り付け方の方針は以下の通りです。

      • CMS(コンテンツ管理システム): ヘッダー・フッター用のコード入力欄が用意されたプラグインや拡張機能を使うのが安全。プラグインを使えば、テンプレートファイルを直接編集せずに済みます。
      • ノーコードツール(STUDIO・ペライチ・Wixなど): 各ツールのサイト設定画面に「<head>内にカスタムコードを追加」する機能がある場合がほとんどです。
      • EC・カート系サービス(Shopify・BASE・STORESなど): 管理画面の「テーマのHTML編集」や「外部サービス連携」設定からコードを追加できます。

      初心者の方は、テンプレートファイルを直接編集するよりも、各ツールが用意しているコード追加用の機能を使うのが圧倒的に安全です。直接編集はミスがあるとサイトが表示されなくなるリスクがあります。

      具体的な貼り付け方法は、お使いのツールの公式ドキュメントで「Googleタグマネージャー 設置」と検索するのが一番確実です。

      設置できたかの確認方法

      タグマネージャーの管理画面右上の「プレビュー」ボタンをクリックし、自社サイトのURLを入力して開きます。タグマネージャーのデバッグ画面が同時に開き、「コンテナの呼び込み」イベントが記録されていれば、コンテナの設置は成功です。

      ステップ2:Metaピクセルのベースコードを設置する

      コンテナが設置できたら、いよいよMetaピクセル本体を入れていきます。

      Metaイベントマネージャからベースコードを取得

      1. Meta広告マネージャ → 「イベントマネージャ」 を開く
      2. 設置したいピクセルを選択
      3. 「設定する」→「コードを手動でインストール」 を選択
      4. 表示されたベースコード(JavaScriptコード)を全文コピー

      タグマネージャーで「カスタムHTML」タグとして設定

      1. タグマネージャー管理画面で 「タグ」→「新規」 をクリック
      2. タグ名: Meta Pixel - Base Code(後でわかりやすい名前に)
      3. タグの設定 → カスタムHTML を選択
      4. コピーしたベースコードを貼り付け
      5. トリガー → All Pages を選択
      6. タグの詳細設定 → タグの呼び出しオプション → 「1ページにつき1度」 に設定
      7. 「保存」をクリック

      「1ページにつき1度」を設定するのは、同じページで何度もピクセルが発火するのを防ぐためです。これを忘れると、二重計測の原因になります。

      重要:ベースコードの発火順序を保証する

      これが多くの内製担当者が見落とすポイントです。Metaのイベント計測は、「ベースコードが先に発火 → イベントコードがその後に発火」という順序が必須です。順序が逆になると、イベントが計測されません

      ベースコードのタグの 詳細設定 → タグの順序付け で、「このタグの後に他のタグを発火させる」設定はオフのままでOKです(後ほどイベントタグ側で「ベースコードが先」を指定します)。

      プレビューでベースコードの発火を確認

      ステップ1と同様に、タグマネージャーのプレビュー機能で自社サイトを開きます。「Meta Pixel – Base Code」タグが「Tags Fired」に表示されていれば、ベースコードの設置は成功です。

      ステップ3:標準イベントを設定する

      ベースコードが入ったら、計測したい行動(お問い合わせ完了、購入完了など)をイベントタグとして設定していきます。ここでは「お問い合わせ完了」を例にします。

      お問い合わせ完了をLeadイベントとして設定する手順

      お問い合わせフォーム送信完了は、Metaの標準イベント「Lead」として計測するのが一般的です。

      1. タグマネージャーで 「タグ」→「新規」 をクリック
      2. タグ名: Meta Pixel - Lead Event
      3. タグの設定 → カスタムHTML を選択
      4. 以下のようなコードを貼り付け:
        <script>
        fbq('track', 'Lead');
        </script>

      5. トリガーを設定(次の項目で解説)
      6. 詳細設定 → タグの順序付け「Meta Pixel – Base Codeが先に発火する」を設定
      7. 「保存」

      サンクスページのURLをトリガーにする方法(推奨)

      フォーム送信後に「お問い合わせありがとうございました」といったサンクスページに遷移するサイトの場合、このページのURL到達をトリガーにします。

      1. 「トリガー」→「新規」 をクリック
      2. トリガー名: お問い合わせ完了 - サンクスページ到達
      3. トリガーのタイプ: 「ページビュー」
      4. 「一部のページビュー」 を選択
      5. 条件: Page URL 含む /thanks/(サンクスページのURLパス)
      6. 保存して、Leadイベントタグに割り当て

      重要:イベントタグはベースコードの後に発火させる

      繰り返しになりますが、イベントタグは必ず「ベースコードが発火した後」に動かす必要があります。タグの詳細設定 → タグの順序付けで、以下のように設定してください。

      • Meta Pixel - Lead Event を発火させる前に、Meta Pixel - Base Code を発火させる」にチェック

      この設定を入れておけば、順序が保証されます。

      ステップ4:動作確認(タグマネージャープレビュー × Metaテストイベントツール)

      設定が終わったら、必ず2つのツールで動作を確認しましょう。片方だけだと、見落としが発生します。

      タグマネージャーのプレビューで「タグが発火しているか」を確認

      タグマネージャー管理画面の「プレビュー」から自社サイトを開き、実際にお問い合わせフォームを送信してみます。

      サンクスページに遷移した瞬間に、デバッグ画面の「Tags Fired」に以下の2つが表示されていれば成功です:

      • Meta Pixel - Base Code
      • Meta Pixel - Lead Event

      Metaのテストイベントツールで「Metaに届いているか」を確認

      タグマネージャーで発火していても、Metaにデータが届いていないと意味がありません。Metaのイベントマネージャで動作を確認します。

      1. Metaイベントマネージャ → 該当ピクセルを選択
      2. 「テストイベント」タブを開く
      3. テスト用のURL(自社サイトのURL)を入力して「ウェブサイトを開く」
      4. 開いたサイトでお問い合わせフォームを送信
      5. テストイベント画面に「Lead」イベントが表示されれば成功

      なぜ2つのツールを併用するのか

      • タグマネージャーのプレビュー: タグが発火したか(自分の設定が正しいか)を確認
      • Metaのテストイベントツール: 発火したデータがちゃんとMetaに届いているか(通信が成立しているか)を確認

      タグは発火しているのにMetaに届いていない、というケースもあります。だから両方確認するのが鉄則です。

      確認できたらタグマネージャーで「公開」する

      両方で確認できたら、タグマネージャー管理画面右上の「公開」をクリックして本番反映します。この公開作業を忘れると、いつまでも本番に反映されません

      内製でよくある失敗とその回避策

      最後に、内製で実際によくある失敗パターンとその対策を紹介します。

      失敗1: ベースコードとイベントコードの発火順序が逆

      最大の落とし穴です。ベースコードが発火する前にイベントコードが発火すると、Metaにデータが届きません。回避策は、ステップ3で説明した「タグの順序付け」を必ず設定すること。

      失敗2: コンテナを公開せず「プレビューのまま」

      タグマネージャーで設定しただけでは本番に反映されません。「公開」ボタンを押して初めて反映されます。設定後は必ず公開しましょう。

      失敗3: 同じイベントが二重に計測されている

      タグマネージャーで設定したのに、サイトのコードにもイベント発火コードが残っている、というケース。1回のアクションで2回CVがカウントされるので、CPAが半分に見えてしまうなど誤った判断につながります。

      回避策: タグマネージャーに移行する際は、サイトに直接書かれていた計測コードをすべて削除しておきましょう。

      失敗4: トリガー条件が広すぎて関係ないページでも発火

      「お問い合わせ完了」のつもりが、トップページや一覧ページでも発火していたというパターン。

      回避策: トリガー条件には「サンクスページの正確なURL」を指定し、テストイベントツールで本番想定の動きを必ず確認すること。

      まとめ:タグマネージャーは「広告運用の最強の味方」

      Meta広告の計測設定は、タグマネージャーを使えば内製でも怖くありません。本記事のポイントをもう一度整理します。

      1. タグマネージャーで設置すれば、コードを触らずに計測の土台が作れる
      2. ベースコード → イベントタグ → 動作確認 → 公開 の順番を守ろう
      3. 発火順序は「ベースコードが先、イベントが後」が鉄則
      4. タグマネージャープレビュー + Metaテストイベントツール の2つで必ず確認
      5. 必要に応じてカスタムコンバージョンで条件を絞り込む

      「ピクセルって何?」から始まった内製担当者の方も、ここまでできればMeta広告の計測担当として一人前です。今日のうちに、ぜひ自社サイトに導入してみてください。

      Meta広告は、正しく計測できて初めて、AIによる最適化が回り始める広告です。計測の土台を盤石にすることが、広告成果を伸ばす最短ルートです。

      コメント

      タイトルとURLをコピーしました