簡単!Googleタグマネージャーの概要と設定手順

SEO対策実例・コラム
2020.03.23
タグ管理が簡単!Googleタグマネージャー(GTM)の概要と設定手順

サイト解析からリスティング広告に至るまで、タグの埋め込みを必要とするツールはWebマーケティングにとって不可欠な存在と言っても過言ではありません。その反面、設置したいタグが増える度に管理が煩雑になるのも事実。そこで本記事では、複数のタグを一元管理できるGoogleタグマネージャーのメリットやデメリット、導入から公開までの設定手順を画像つきで解説します。

Googleタグマネージャー(GTM)とは?

Googleタグマネージャー(GTM)とは、目的が異なる複数のタグやスクリプトを一元管理できるタグマネジメントツールで、「タグマネジャ」や「タグマネ」とも呼ばれています。

▼タグの埋め込みが必要なツール

  • 効果測定に関するタグ:Googleアナリティクスなど
  • 広告に関するタグ:Google Ads、リターゲティングタグ、コンバージョンタグなど
  • SNS動作タグ:twitter、Facebookなど

残念ながら一部のタグには対応していないものの、Webサイトの規模にかかわらず誰もが無償で使えるうえ、GoogleアナリティクスやGoogle広告などGoogle関連の他ツールとの相性が良いことも多くのWeb制作者に選ばれている理由でしょう。

ちなみに、タグマネジメントツールとしては「Yahoo!タグマネージャー」や「Adobe Analytics」なども有名です。

特にYahoo!タグマネージャー(YTM)はGTMよりテンプレートタグの豊富さが勝っている反面、無償サポートやヘルプページが用意されていないため、導入に手間取るWeb管理者も少なくありません。

どちらを導入すべきか迷っている場合は、互換性のあるタグマネジメントツールを選びましょう。

なお、GTMとYTMの両方を1つのWebサイトに導入しても問題なく作動しますので、GoogleとYahooのタグを併用している場合は2種類のタグマネジメントツールを使い分けるのも賢い方法です。

Googleタグマネージャーを導入するメリット4つ

Googleタグマネージャーのメリットは、費用面やGoogleツールとの相性の良さだけではありません。

ここからは、実際にGTMを導入することで得られる代表的なメリットについて見てみましょう。

タグの追加・削除・編集などの管理が簡単になる

複数のタグを導入しているWebサイトにとって、タグの管理は手間と時間のかかる作業です。

どのタグをどこに設置しているのか把握しきれなくなるケースも多く、何よりタグを追加または削除する場合はその都度HTMLに記述するトラッキングコードをページごとに編集しなければなりません。

一方、GTMを導入しているWebサイトでは一度HTMLに共通のインストールタグを埋め込んでおくだけで、その後は管理画面から一括でタグの設置や変更ができるようになるのです。

いちいち手作業でHTMLにタグを実装する手間が省けるのはもちろん、設定漏れや編集ミスなどのヒューマンエラーも軽減されます。

変更履歴が残せるバージョン管理機能

GTMには「いつ」「誰が」「どのように」タグを編集したのか一目で把握できるよう、タグを公開する度に変更履歴が残せるバージョン管理機能が付いています。

特に、複数のスタッフがチームで運営しているような大規模Webサイトでは導入するメリットが多いようです。

▼チーム作業のメリット

  • メンバー間の認識が共有できる
  • 担当者が代っても引き継ぎに手間取らない
  • 不慣れなスタッフがミスをしても、簡単に前のバージョンに戻せる

公開前に動作テストができる

プレビューモードで公開前の動作テストができるのも、Googleタグマネージャーの代表的なメリットです。

設定したタグが正常に反映されているかどうかだけでなく、タグの種類まで事前に確認できるのは大きな安心材料となります。

サイト表示の高速化

Webサイトの読み込み速度はユーザビリティに直結するため、Googleでもサイト表示の高速化を推奨しています。

ところが、HTMLの読み込みルールはあくまで記述順ですから、導入しているタグの数が増えるほどHTMLに埋め込むトラッキングコードも増え、読み込みに時間がかかる分だけ表示速度が遅くなりがちです。

これに対し、GTMで設置したタグはブラウザのレンダリングに影響しにくい「非同期タグ」として扱われます。

つまり、HTML上ではあくまで1つのタグとしてカウントされるため、個別に複数のタグを設置するよりも表示速度が速くなるのです。

Googleタグマネージャーを導入するデメリット3つ

Web管理者にとって魅力的なメリットが多いGTMですが、少なからずデメリットがあるのも事実です。

あらかじめデメリットについても把握したうえで、Googleタグマネージャーを導入すべきかどうか判断した方が良いでしょう。

対応していないタグもある

Googleタグマネージャーはサポートしていない他社のタグでも設定できるカスタムタグを備えていますが、だからと言って全てのタグに対応している訳ではありません。

そもそもGTMは非同期処理ツールですから、基本的にはページの読み込み作業に影響されずにJavaScriptが処理される「非同期タグ」と相性が良い反面、下記のようなタグには対応していないのです。

▼GTMで管理できないタグの一例

  • 同期処理が必要なタグ:Googleアナリティクスのウェブテスト機能など
  • ページ構造に関わるタグ:SNSのシェアボタンを生成するスクリプトなど

なお、特定のタグについて対応の有無を調べたい方は「タグマネージャヘルプのサポートされているタグ一覧」でご確認ください。

HTMLへの追記が必要なケースもある

Googleタグマネージャーの最大の強みは、複数のタグを管理画面から一元管理できるという点ですが、全ての設定が管理画面だけで完了する訳ではありません。

特に下記のように高度な設定を行う場合は別途HTMLへの追記が必要なため、JavaScriptの知識が求められます。

▼HTMLへの追記が必要なケース

  • GoogleアナリティクスのEコマース設定
  • データベースの会員情報を計測の関数として利用する設定

タグ設置済みのサイトは書き換えが必要

大前提として、Googleタグマネージャーに効力を発揮させるには、専用の共通タグを新たに埋め込む必要があります。

つまり、たとえ大量のページに対してタグの設置が完了しているWebサイトであっても、導入時は一から全てのタグを書き換える膨大な手間と時間がかかってしまうのです。

Googleタグマネージャーの基本設定と手順

では実際に、Googleタグマネージャーを導入してみましょう。

例題として、GoogleタグマネージャーによるGoogleアナリティクスのタグ設定を解説しますので、あらかじめ下記のアカウントを取得しておいて下さい。

▼事前準備

  • Googleアカウントの取得(Gmailとパスワードで構成)
  • Googleアナリティクスのアカウント取得

公式サイトへアクセス

まず、Googleタグマネージャーの公式サイトへアクセスし、下記画像の赤枠で囲ってある「無料で利用する」をクリックしましょう。

あらかじめGoogleアカウントへログインしていなかった場合は下記の画面が表示されますが、Gmailアドレスを入力してログインすると次の画面に切り替わります。

一方、あらかじめGoogleアカウントへログインしていた場合は下記の画像が表示されますので、赤枠で囲ってあるマークをクリックしましょう。

「アカウント」と「コンテナ」の設定

続いて、アカウント名とコンテナ名の入力画面が表示されます。

「アカウント」の中にタグを管理する「コンテナ」という箱を設置し、コンテナから自由にタグを出し入れするというイメージです。

そのため、どちらも覚えやすい名称にしておくのはもちろん、アカウントが親でコンテナが子供という関係性が分かる名称にしておくと便利かもしれません。

  • 例1:アカウント=会社名/コンテナ=サイト名
  • 例2:アカウント=サイト名/コンテナ=サイトのURL

下記画像の赤枠にアカウント名とコンテナ名を入力し、緑の枠で囲ってあるプルダウンメニューから「日本」を選択しましょう。

ちなみに、1サイトにつき1つのコンテナ設定が推奨されており、アカウント名の変更は後からでも可能です。

続いて、青枠で囲ってあるターゲットプラットフォーム(使用環境)を選択します。

今回は、最も使用頻度の高い「ウェブ」を選択して「作成」をクリックし、利用規約に問題がなければ右上の「はい」をクリックして下さい。

コンテナタグをWebサイトのHTMLに埋め込む

利用規約に同意すると、下記画像のようにGoogleタグマネージャーのコンテナスニペット(JavaScriptのコード)が表示されますが、これが埋め込み用の共通コンテナタグです。

このコンテナタグをコピーし、対象WebサイトのHTMLに埋め込むことでGTMが利用できるようになります。

コンテナタグは利用したいページだけに埋め込んでも問題なく作動しますが、対象ページを取捨選択する手間を省くためにも全ページへ実装しておきましょう。

ただし、コンテナタグは2種類に分かれており、それぞれ指定の場所に実装しなければ不具合の原因になるので注意が必要です。

▼コンテナタグの種類と実装先

  • 上部の赤枠:<head>内のできるだけ上の方、
  • 下段の緑枠:<body>の直下

なお、コンテナタグは上記画像の右下にある「OK」をクリックした後に表示される下記画面のコンテナIDから再表示されますが、手間を省きたい方はメモ帳などにコピペしておきましょう。

GTMでGoogleアナリティクスを設定する方法

GTMでは「タグ」「トリガー」「変数」の3つの要素を組み合わせて作動させます。

  • タグ:ページ上で実行されるHTMLなどのコード
  • 変数:購入金額やページ毎に異なるURLなど、状況によって変化する値
  • トリガー:タイミングなどタグを読み込む際の実行条件

例えば、今回のケースに上記の要素を当てはめてみると下記のようになります。

  • タグ:ユニバーサルアナリティクス
  • 変数:GoogleアナリティクスのトラッキングID
  • トリガー:ALL Pages

ワークスペースで新しいタグを追加する

下記画像の赤枠で囲ってある「新しいタグ」または「新しいタグを追加」のどちらかをクリックします。

次に表示される下記画面では、左上にある「名前のないタグ」を消してアナリティクスなど覚えやすい名称に書き換えましょう。

タグの設定:ユニバーサルアナリティクスを選択

続いて下記の画面が表示されたら、赤枠で囲ってある「タグの設定」をクリックしてタグタイプの選択画面へと進みます。

次に表示される下記の画面では、タグタイプの一覧から「ユニバーサルアナリティクス」を選択して下さい。

なお、緑色の枠で囲ってある「カスタムHTML」を選択すると、一覧に含まれていないGoogle以外のタグ設定も可能です。

変数の設定:GoogleアナリティクスのトラッキングID

タグを選定すると変数に関する画面が表示されますので、下記の4項目を設定しましょう。

  • トラッキングタイプ:「ページビュー」のまま
  • Googleアナリティクス設定:「設定変数を選択」のまま
  • このタグでオーバーライド設定を有効にする:チェックを入れる
  • トラッキングID:UA-から始まるトラッキングID

トラッキングIDを入力するホームは、オーバーライド設定にチェックマークを入れると自動的に表示されます。

トラッキングIDは、Google Analytics管理画面のプロパティ設定からコピーして貼り付けると簡単です。

トリガーの設定:ALL Pages

タグの設定が完了したら、下記画像の赤枠をクリックしてトリガーを設定します。

今回のトリガー設定は、全てのページにGoogle Analyticsのトラッキングコードを吐き出させる「All Pages」を選択します。

タグとトリガーの設定に不備がなければ、下記画面の右上にある「保存」をクリックして設定を完了させて下さい。

GTMの動作確認と公開する方法!

GTMを設定したからといって終わりではありません。

最後に、タグが正しく機能しているか動作確認を済ませたうえで公開しましょう。

プレビューモードで動作確認

下記画像で緑色の枠で囲ってある通り、ワークスペースに追加したタグの名称が表示されているか確認し、問題がなければ右上の「プレビュー」をクリックします。

プレビューモードへ切り替わると、下記画像のように管理画面の中央部にオレンジ色の枠が表示されます。

プレビューモードを維持した状態で、タグを埋め込んだWebページへアクセスしてみましょう。

GTMが正しく設定されていれば、「Tags Fired On This Page」の覧にGoogleアナリティクスのPV計測タグが表示され、正常に作動していると確認できるはずです。

  • Tags Fired On This Page:設定したタグ名が表示される
  • Tags Not Fired On This Page:設定が反映されていないタグが表示される

ペコプラ GTM

なお、Webサイトの確認画面はGTMの管理画面がプレビューモードになっている時、および有効化したユーザーにのみ反映される仕組みになっていますので、アクセス権限のない人に閲覧される心配はありません。

あらかじめ該当ページへアクセスした状態でGTMをプレビューにした場合は、該当ページの再読み込みが必要です。

タグの公開とバージョン設定

動作確認が済んだら管理画面へ戻り、赤枠で囲ってある「プレビューを終了」をクリックします。

下記の画面に切り替わったら、右上にある赤枠の「公開」をクリックしましょう。

「公開」をクリックすると、自動的に「バージョン」の設定画面が表示されます。

特にチームで作業している場合は、誰が見ても「いつ」「どのような内容」に設定したのか、情報を共有できるようにしておくと便利です。

  • バージョン名:任意の名称を入力
  • バージョンの説明:設定の変更点などを文章で入力

最後に、画面の右上にある「公開」をクリックし、切り替わった画面で最新のバージョン名が表示されていれば公開は成功です。

まとめ

最後に、Googleタグマネージャーを導入した方が良い人と、導入を控えた方が良い人の違いをまとめてみました。

▼GTMが有益なケース

  • 設置するタグが増えるたび、制作会社に外注している
  • 1つのWebサイトに対し、膨大な種類のタグを併用している
  • タグの種類が多すぎて、目的や活用方法が把握できず管理が煩雑になっている
  • 複数のスタッフで編成されたチームでWebサイトを運営している

▼GTMが必要ないケース

  • 今後、すでに設定しているタグを修正する必要がない
  • 新たなタグを追加する必要がない
  • Googleアナリティクス以外のタグは必要ない
  • そもそも、タグを埋め込むツールを利用する必要がない

確かに、GTMは複数のタグを併用している人にとって手間と時間を節約できる優れた管理ツールです。

しかし、どんなに便利なツールも利用価値がなければ導入する意味がありません。

まずは、運営中のWebサイトにとってGTMが有益なのかどうかを見極める必要がありそうです。

 

 

 

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)