WEB広告屋向けGTM設定ガイド。SWELLへのタグ設置手順

当ページのリンクには広告が含まれている事があります。

お疲れ様です。しがないWEB広告屋です。

SWELLの導入が完了し、サイトの土台が整いました。ここからは、ブログを本格的な分析環境にするためのツール設定に入ります。

最初のステップは、タグ管理の必須ツールである「GTM(Googleタグマネージャー)」の導入です。

GA4やヒートマップツールなど、これから様々なツールをサイトに導入していきますが、それぞれのタグを直接WordPressに書き込むのは実務において非常にリスキーかつそんなケースはまずないです。

今回は、現役のWEB広告屋がなぜGTMを必須ツールとして扱うのか、その実務的な理由と、SWELLを使った最も安全で簡単なGTM設置手順を解説します。
WEB広告業界でGTMを使わない事はないのですが、案外設置のところから経験をしている人は少ないと思いますので、この機会に設置までも勉強しちゃいましょう。

目次

💡 タグ管理必須ツール「GTM」を導入する実務的な理由

GTM(Googleタグマネージャー)とは、サイトに導入したい様々なタグ(GA4の計測タグ、Google広告やMeta広告のコンバージョンタグなど)を、1つの画面上で一括管理できる無料ツールです。

WEB広告の現場において、媒体ごとのタグをクライアントのサイト(HTMLファイル)に直接記述してもらう「直貼り」は、現在ほぼ行われません。GTMの利用が業界のスタンダードとなっています。その理由は以下の2点です。

  • サイトの破損リスクを防ぎ、管理を一本化できる
    新しい広告媒体をテストするたびにHTML(WordPressのテーマファイル)を直接編集していると、記述ミスによってサイト全体が真っ白になるなど、致命的なエラーを引き起こすリスクがあります。 GTMを一度だけサイトに設置しておけば、以降のタグの追加や削除、発火条件(トリガー)の変更はすべてGTMの管理画面上で安全に完結します。
  • プレビュー機能で確実なテストができる
    GTMには「プレビューモード」が搭載されており、本番環境にタグを反映させる前に「設定したタグが正しく動くか」をテスト環境で確認できます。これにより、実務でのコンバージョン計測漏れや、タグ干渉によるサイト崩れなどの重大な事故を未然に防ぐことができます。

自身のサイトにGTMを導入し、この管理画面の操作に慣れておくことは、広告運用者としての基礎スキルに直結します。

🛠️ GTMアカウントとコンテナを作成する

それでは、実際にGTMを導入していきましょう。まずはGoogleのアカウントを用意し、GTMの管理画面であなた専用の「コンテナ(タグを入れる箱)」を作成します。

STEP
GTM公式サイトにアクセス

Googleタグマネージャーの公式サイトにアクセスし、右上の「無料で利用する」を押します。
その後Googleアカウントでログインして「アカウントを作成」をクリックします。

STEP
アカウントとコンテナの設定
  • アカウント名: 会社名やご自身の名前(例:しがないWEB広告屋)を入力します。
  • 国: 日本 を選択します。
  • ※「Googleや他の人と匿名でデータを共有」はよっぽどのことがない限りチェックで問題ないです。データ共有とはいえ、何か特定されるデータを他の方に漏れるようなものではないです。
  • コンテナ名: ご自身のサイトのURL(例:shiganaiwebkoukokuya0520.com)を入力します。
  • ターゲットプラットフォーム: ウェブ を選択します。
STEP
利用規約に同意して作成

「作成」ボタンを押し、利用規約に「はい」で同意すると、GTMのワークスペース(管理画面)が開きます。
日本語や表示にないため、英語のまま同意に進んでください。

STEP
タグマネージャーのTOPにアカウントが表示されれば登録完了

下記のように表示されていれば完了です。
コンテナ名の箇所をクリックしてください。

STEP
SWELLに貼るためのコードを表示

表示画面右上の青くなっている箇所をクリックすると2枚目のような表示になります。

表示されるコードをコピーして次に進んでください。

💻 SWELLの「高度な設定」にGTMタグを設置する

表示された2つのコードを、WordPressのサイト側に設置します。 一般的なテーマでは、ここで「header.php」などの重要ファイルを直接編集する必要がありますが、SWELLなら専用の入力欄にコピペするだけで安全に完了します。

STEP
SWELLのカスタマイザーを開く

WordPressの管理画面(ダッシュボード)を別タブで開き、左メニューから「外観」>「カスタマイズ」をクリックします。

STEP
「高度な設定」に進む

カスタマイザーのメニュー項目から「高度な設定」を選択します。

STEP
コードをコピペする

GTMの画面で表示されている2つのコードを、それぞれ以下の場所に貼り付けます。

  • 上のコード(<head>内のコード): SWELL側の「headタグ終了直前に出力するコード」の欄に貼り付けます。
  • 下のコード(<body>内のコード): SWELL側の「bodyタグ直後に出力するコード」の欄に貼り付けます。
STEP
設定を保存する

画面右上にある公開ボタンのクリックは押し忘れないようにお願いします。

これで、SWELLへのGTMの設置作業は完了です。

念のため実際にサイトに導入されているかは確認しておきましょう。
実際のサイトに訪れ、F12クリック→Sourcesクリック(表示にない場合Elementsの横にある⏩ボタンをクリックしたら表示されます。)→www.googletagmanager.comをクリックすると設定されているgtm.js?id=GTM-OOOOOの箇所が先ほどのGTM画面の番号と一致していれば問題ないです。

✅ 実務で必須。プレビュー機能で動作確認を行う

コードを貼り付けただけで終わらせず、GTMが自身のサイトで正しく読み込まれているかを確認する「テスト」まで行って初めて、実務レベルの導入手順となります。

なぜプレビューでの確認がそこまで重要なのか。実務のリアルな話をすると、過去に「ボタンクリックでCVを計測するためのタグ」を設置した際、そのタグが干渉してサイトのUI(デザイン)が大きく崩れてしまうバグが発生したことがあります。

この時、事前にGTMのプレビュー機能でテストを行っていたおかげで、本番環境のサイトを崩す前にバグに気づき、未然に防ぐことができました。HTMLへの直貼りでは絶対にできないリスクヘッジです。

  1. GTMの管理画面(ワークスペース)に戻り、画面右上にある「プレビュー」ボタンをクリックします。
  2. 「Tag Assistant」という新しい画面が立ち上がるので、入力欄にご自身のサイトのURLを入力して「Connect」をクリックします。
  3. 自分のサイトが別ウィンドウで開きます。画面の右下に「Tag Assistant Connected」という小さな枠が表示されていれば成功です。
  4. Tag Assistantの画面に戻り、「Connected!」と表示されていれば、GTMがサイトに正しく設置され、通信できていることが証明されます。

今後実際のタグ設置などした際も同様の方法でプレビュー確認をする癖をつけましょう。

🎯 まとめ:GTMの土台が完成。次はGA4を設定しよう

お疲れ様でした。これであなたのサイトに、あらゆるタグを一括管理できる必須ツール「GTM」が設置されました。

これ以降、GA4の計測タグやヒートマップツールなど、新しいシステムを導入する際にWordPressの管理画面(SWELL側)を触る必要は一切ありません。すべて、このGTMの画面上で完結するようになります。

まさに、クライアントワークで行う「広告運用」と全く同じ環境が、手元に完成した状態です。

土台が整ったところで、次はいよいよ本命の分析ツールである「GA4(Googleアナリティクス4)」を、今回作成したGTM経由で導入・設定していく手順を解説します。

データ分析の核となる重要な設定です。このまま以下の記事へ進んでください!

次回記事が更新されたら関連記事をはります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次