簡単!Googleタグマネージャーの概要と設定手順SEO対策SEO解析2020.03.23サイト解析からリスティング広告に至るまで、タグの埋め込みを必要とするツールはWebマーケティングにとって不可欠な存在と言っても過言ではありません。その反面、設置したいタグが増える度に管理が煩雑になるのも事実。そこで本記事では、複数のタグを一元管理できるGoogleタグマネージャーのメリットやデメリット、導入から公開までの設定手順を画像つきで解説します。まとめGoogleタグマネージャー(GTM)とは?Googleタグマネージャー(GTM)とは、目的が異なる複数のタグやスクリプトを一元管理できるタグマネジメントツールで、「タグマネジャ」や「タグマネ」とも呼ばれています。Ads、リターゲティングタグ、コンバージョンタグなどSNS動作タグ:twitter、Facebookなど残念ながら一部のタグには対応していないものの、Webサイトの規模にかかわらず誰もが無償で使えるうえ、GoogleアナリティクスやGoogle広告などGoogle関連の他ツールとの相性が良いことも多くのWeb制作者に選ばれている理由でしょう。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が処理される「非同期タグ」と相性が良い反面、下記のようなタグには対応していないのです。同期処理が必要なタグ:Googleアナリティクスのウェブテスト機能などページ構造に関わるタグ:SNSのシェアボタンを生成するスクリプトなどなお、特定のタグについて対応の有無を調べたい方は「タグマネージャヘルプのサポートされているタグ一覧」でご確認ください。HTMLへの追記が必要なケースもあるGoogleタグマネージャーの最大の強みは、複数のタグを管理画面から一元管理できるという点ですが、全ての設定が管理画面だけで完了する訳ではありません。下記のように高度な設定を行う場合は別途HTMLへの追記が必要なため、JavaScriptの知識が求められます。大前提として、Googleタグマネージャーに効力を発揮させるには、専用の共通タグを新たに埋め込む必要があります。大量のページに対してタグの設置が完了しているWebサイトであっても、導入時は一から全てのタグを書き換える膨大な手間と時間がかかってしまうのです。Googleタグマネージャーの基本設定と手順では実際に、Googleタグマネージャーを導入してみましょう。例題として、GoogleタグマネージャーによるGoogleアナリティクスのタグ設定を解説しますので、あらかじめ下記のアカウントを取得しておいて下さい。公式サイトへアクセスまず、Googleタグマネージャーの公式サイトへアクセスし、下記画像の赤枠で囲ってある「無料で利用する」をクリックしましょう。Googleアカウントへログインしていなかった場合は下記の画面が表示されますが、Gmailアドレスを入力してログインすると次の画面に切り替わります。Googleアカウントへログインしていた場合は下記の画像が表示されますので、赤枠で囲ってあるマークをクリックしましょう。続いて、アカウント名とコンテナ名の入力画面が表示されます。「アカウント」の中にタグを管理する「コンテナ」という箱を設置し、コンテナから自由にタグを出し入れするというイメージです。そのため、どちらも覚えやすい名称にしておくのはもちろん、アカウントが親でコンテナが子供という関係性が分かる名称にしておくと便利かもしれません。例2:アカウント=サイト名/コンテナ=サイトのURL下記画像の赤枠にアカウント名とコンテナ名を入力し、緑の枠で囲ってあるプルダウンメニューから「日本」を選択しましょう。ちなみに、1サイトにつき1つのコンテナ設定が推奨されており、アカウント名の変更は後からでも可能です。続いて、青枠で囲ってあるターゲットプラットフォーム(使用環境)を選択します。今回は、最も使用頻度の高い「ウェブ」を選択して「作成」をクリックし、利用規約に問題がなければ右上の「はい」をクリックして下さい。コンテナタグをWebサイトのHTMLに埋め込む利用規約に同意すると、下記画像のようにGoogleタグマネージャーのコンテナスニペット(JavaScriptのコード)が表示されますが、これが埋め込み用の共通コンテナタグです。このコンテナタグをコピーし、対象WebサイトのHTMLに埋め込むことでGTMが利用できるようになります。コンテナタグは利用したいページだけに埋め込んでも問題なく作動しますが、対象ページを取捨選択する手間を省くためにも全ページへ実装しておきましょう。コンテナタグは2種類に分かれており、それぞれ指定の場所に実装しなければ不具合の原因になるので注意が必要です。下段の緑枠:<body>の直下なお、コンテナタグは上記画像の右下にある「OK」をクリックした後に表示される下記画面のコンテナIDから再表示されますが、手間を省きたい方はメモ帳などにコピペしておきましょう。GTMでGoogleアナリティクスを設定する方法GTMでは「タグ」「トリガー」「変数」の3つの要素を組み合わせて作動させます。今回のケースに上記の要素を当てはめてみると下記のようになります。Pagesワークスペースで新しいタグを追加する下記画像の赤枠で囲ってある「新しいタグ」または「新しいタグを追加」のどちらかをクリックします。次に表示される下記画面では、左上にある「名前のないタグ」を消してアナリティクスなど覚えやすい名称に書き換えましょう。続いて下記の画面が表示されたら、赤枠で囲ってある「タグの設定」をクリックしてタグタイプの選択画面へと進みます。次に表示される下記の画面では、タグタイプの一覧から「ユニバーサルアナリティクス」を選択して下さい。緑色の枠で囲ってある「カスタムHTML」を選択すると、一覧に含まれていないGoogle以外のタグ設定も可能です。変数の設定:GoogleアナリティクスのトラッキングIDタグを選定すると変数に関する画面が表示されますので、下記の4項目を設定しましょう。トラッキングタイプ:「ページビュー」のままGoogleアナリティクス設定:「設定変数を選択」のままこのタグでオーバーライド設定を有効にする:チェックを入れるトラッキングID:UA-から始まるトラッキングIDトラッキングIDを入力するホームは、オーバーライド設定にチェックマークを入れると自動的に表示されます。Analytics管理画面のプロパティ設定からコピーして貼り付けると簡単です。Pagesタグの設定が完了したら、下記画像の赤枠をクリックしてトリガーを設定します。Pages」を選択します。タグとトリガーの設定に不備がなければ、下記画面の右上にある「保存」をクリックして設定を完了させて下さい。GTMの動作確認と公開する方法!GTMを設定したからといって終わりではありません。最後に、タグが正しく機能しているか動作確認を済ませたうえで公開しましょう。下記画像で緑色の枠で囲ってある通り、ワークスペースに追加したタグの名称が表示されているか確認し、問題がなければ右上の「プレビュー」をクリックします。プレビューモードへ切り替わると、下記画像のように管理画面の中央部にオレンジ色の枠が表示されます。プレビューモードを維持した状態で、タグを埋め込んだWebページへアクセスしてみましょう。Page」の覧にGoogleアナリティクスのPV計測タグが表示され、正常に作動していると確認できるはずです。Page:設定が反映されていないタグが表示されるなお、Webサイトの確認画面はGTMの管理画面がプレビューモードになっている時、および有効化したユーザーにのみ反映される仕組みになっていますので、アクセス権限のない人に閲覧される心配はありません。該当ページへアクセスした状態でGTMをプレビューにした場合は、該当ページの再読み込みが必要です。動作確認が済んだら管理画面へ戻り、赤枠で囲ってある「プレビューを終了」をクリックします。下記の画面に切り替わったら、右上にある赤枠の「公開」をクリックしましょう。「公開」をクリックすると、自動的に「バージョン」の設定画面が表示されます。チームで作業している場合は、誰が見ても「いつ」「どのような内容」に設定したのか、情報を共有できるようにしておくと便利です。最後に、画面の右上にある「公開」をクリックし、切り替わった画面で最新のバージョン名が表示されていれば公開は成功です。まとめ最後に、Googleタグマネージャーを導入した方が良い人と、導入を控えた方が良い人の違いをまとめてみました。▼GTMが有益なケース設置するタグが増えるたび、制作会社に外注している1つのWebサイトに対し、膨大な種類のタグを併用しているタグの種類が多すぎて、目的や活用方法が把握できず管理が煩雑になっている複数のスタッフで編成されたチームでWebサイトを運営している▼GTMが必要ないケース今後、すでに設定しているタグを修正する必要がない新たなタグを追加する必要がないGoogleアナリティクス以外のタグは必要ないそもそも、タグを埋め込むツールを利用する必要がない確かに、GTMは複数のタグを併用している人にとって手間と時間を節約できる優れた管理ツールです。どんなに便利なツールも利用価値がなければ導入する意味がありません。運営中のWebサイトにとってGTMが有益なのかどうかを見極める必要がありそうです。2016年9月ご質問やご相談などお気軽にお問い合わせください。