WebサイトにGoogleタグマネージャーを設置する方法
Googleタグマネージャーの設置方法
WebサイトにGoogleタグマネージャーを設置する方法（設定手順） | We.Inc
Google公式の手順でGoogleタグマネージャーを設置。headとbodyのスニペット、GA4のGoogleタグ、プレビューモード、SPAの計測を解説。GTM IDからスニペットを生成できます。
タグマネージャーでコンテナを作成し、GTM-ABCD123のようなIDを取得します。Googleの1つ目のスニペットを<head>内のできるだけ上に、2つ目のnoscript iframeを全ページの開始<body>タグの直後に貼り付けます。その後、Googleアナリティクスのタグなどをタグマネージャー内で追加し、公開します。
設定の早見表
- 1. コンテナを作成
- プラットフォームにウェブを選び、GTM- IDを控える
- 2. スニペットを設置
- サイトのHTMLまたはテーマ設定
- headスニペットは<head>の上部、noscriptスニペットは<body>の直後
- 3. タグを追加
- タグマネージャーのワークスペース
- アナリティクスの場合：タグの種類にGoogleタグを選び、G- IDを入力
- 4. テスト
- プレビューボタン
- Tag Assistantがサイトに接続し、配信されたタグを表示
- 5. 公開
- ワークスペースの「送信」
- 公開するまでサイトには何も反映されない
Googleタグマネージャーは、トラッキングコードをまとめる無料のコンテナです。ツールごとにスクリプトをサイトに貼り付ける代わりに、コンテナを一度設置すれば、あとはタグ（アナリティクス、広告などのツール用の小さなスクリプト）をタグマネージャーのWebサイトから追加、変更、削除できます。生成ツールにコンテナIDを入力すると、貼り付けるだけの2つのスニペットが用意されます。
- コンテナIDを入力します。ツールが、GTM-の後に英数字が続く形式かどうかを確認します。
- headスニペットを全ページの<head>内、できるだけ上にコピーします。
- bodyスニペットを開始<body>タグの直後の行にコピーします。
- タグマネージャーを開いて「プレビュー」をクリックし、サイトのアドレスを入力して、Tag Assistantに「接続済み」と表示されることを確認します。
- コンテナはサイトごとに1つだけ設置しましょう。Googleのデータレイヤーガイドでは、1ページに複数のデータレイヤーがあるとタグが正しく配信されないと警告しています。
- ページがタグ用のデータを設定する場合は、window.dataLayer = window.dataLayer || []; とpushの呼び出しをコンテナスニペットより上に置きます。
- 同じタグをタグマネージャーで追加する前に、直接貼り付けたアナリティクスのコードを削除してください。そうしないとすべての訪問が二重に計測されます。
- 多くのWebサイトビルダーにはGTM IDの入力欄があります。あればそれを使い、手で貼り付ける必要はありません。
よくある質問
Googleタグマネージャーのコードは正確にはどこに置きますか？
Googleの設置ヘルプでは、サイトの全ページで、1つ目のブロックを<head>タグ内のできるだけ上に、2つ目のブロックを開始<body>タグの直後に貼り付けるよう案内しています。
noscriptの部分は今でも必要ですか？
Googleは設置コードにこれを含めています。noscript要素で囲まれたiframeで、ブラウザーはJavaScriptが無効なときにだけ使用します。Googleから提供されたとおりに貼り付けてください。
タグマネージャーでGoogleアナリティクス4を追加するには？
タグマネージャーで新しいタグを追加し、種類にGoogleタグを選んで、G-で始まるタグIDを入力します。初期化トリガーを選んで保存し、プレビューでテストしてから公開します。
シングルページアプリでページ遷移が計測されないのはなぜですか？
再読み込みせずにページを切り替えるアプリでは、新しいページ読み込みが発生しません。履歴の変更トリガーを使いましょう。Googleによると、このトリガーはURLフラグメントが変わったときや、サイトがHTML5のpushState APIを使ったときに配信されます。
Googleタグマネージャーは無料ですか？
標準版は無料で使えます。Googleはエンタープライズ製品の一部として、タグマネージャー360も販売しています。
プレビューモードでテストする
- ワークスペースの右上にある「プレビュー」をクリックします。新しいタブでTag Assistantが開くので、サイトのアドレスを入力して「Connect」をクリックします。サイトが新しいウィンドウで開き、隅に「接続済み」と表示されます。
- Tag Assistantのタブに戻って「続行」をクリックすると、各イベントと配信されたタグが表示されます。公開前に、配信されなかったものを修正しましょう。
独自のイベントを送信する
- データレイヤーは、タグマネージャーに情報を渡すJavaScriptの配列です。ニュースレター登録などのeventキーを持つオブジェクトをpushし、同じ名前のカスタムイベントトリガーを作成します。
- Googleのガイドによると、データレイヤーは大文字と小文字を区別するため、dataLayerは機能してもdatalayerは機能しません。また、pushだけを行い、再代入してはいけません。
データレイヤーにイベントをpushする
ページを離れずに送信されるフォームなど、タグマネージャーが自分では検知できない出来事があるときに使います。
ニュースレター登録イベント
タグマネージャーでnewsletter_signupという名前のカスタムイベントトリガーを作成し、それに合わせてタグを配信します。
最初に使うトリガー
よく使うタグマネージャーのトリガー
- 初期化
- 同意の初期化を除く、他のすべてのトリガーより前
- アナリティクス用のGoogleタグ
- ページビュー
- ブラウザーがページの読み込みを開始したとき
- その他ほとんどのページ単位のタグ
- 履歴の変更
- URLフラグメントが変わるか、ページがpushStateを呼び出したとき
- シングルページアプリのページビュー
- カスタムイベント
- コードが一致するイベントをデータレイヤーにpushしたとき
- フォーム送信、登録、予約
- クリック
- 訪問者が要素やリンクをクリックしたとき
- 電話やメールのリンクのクリック
スニペット生成ツール
タグマネージャーのワークスペース上部に表示されているコンテナIDを入力してください。すべてブラウザー内で生成されます。
コンテナID
正しい形式です。両方のスニペットを全ページに貼り付けてください。
コンテナIDの形式ではないようです。GTM-の後に英数字が続く形式である必要があります。
1. <head>内のできるだけ上に貼り付け
2. 開始<body>タグの直後に貼り付け
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る