Googleタグマネージャー(GTM)手順完全ガイド！YTMとの比較も

ホームページ制作の現場では、Googleタグマネージャー（GTM）はGoogleアナリティクス（GA）と並び、もはや導入が欠かせないツールとなってきました。

ホームページを運用していると、さまざまなイベントを計測したくなります。
しかし、データを収集するためにはページに「タグ」を埋め込む必要があり、社内にエンジニアのいない企業では、一気にハードルが高くなります。そのため、タグの設置については、外部に依頼している企業も少なくありません。

しかし、タグマネージャーを導入すれば、タグの管理を自社で行えるようになります。

今回はWeb制作のプロであるTRASPが、Googleタグマネージャーの基礎知識や導入メリット、設置方法から使い方までをどこよりも詳しく解説します！また、Yahoo!タグマネージャー（YTM）と迷われている方に向けて、GTMとYTMどちらを選ぶべきか、違いを比較してみたいと思います。

Googleアナリティクスについて詳しく解説した記事もありますので、参考にしてください。

アクセス解析で自社サイトを見える化！Googleアナリティクスの基本

 ホームページを制作したあとは、そのままなんとなく運用していては目標を達成できません。日々ホームページの状況を確認し、分析と改善のPDCAを回していくことが大切です。 しかしホームページ制作会...

Googleタグマネージャー（GTM）とは

Googleタグマネージャー（GTM）

ホームページ制作をしていると、ページの増加と同時に、タグも増え続けていきます。

たとえば、リスティング広告を打った場合、コンバージョンタグはサンクスページに設置します。しかし、そこからさらにリマーケティングまで実施するなら、全ページのheadタグ内に追跡タグを埋め込まなければなりません。設置ページが2〜3ページならともかく、数百ページもあるサイトだと、それだけで膨大な作業時間がかかります。

そんなときに役に立つのが、タグマネージャーです。
タグマネージャーでは、一つのタグを介して複数のタグを動かせるので、すべてのページにタグを設置する、膨大な時間と手間が不要になります。

引用：初心者でも分かる「Googleタグマネージャ」の導入メリットと導入方法（2021年最新版）

動かせるタグも、Googleアナリティクスの効果測定用タグや広告タグ、SNSのプラグインを動作させるタグなど多岐にわたることが特徴です。

タグマネージャーは必要？不要？

タグマネージャーはタグを管理するには便利なツールですが、ホームページ制作の現場で必ず導入するべきかというと、実はそうではありません。

導入が必要なのは、ホームページのページ数が多く、タグの管理に困っているようなケースです。

外注コストが減らせるうえ、どのようなタグを設置したいのかをいちいち説明する手間や、設置終了まで待つ時間も減らせるでしょう。また、自社で管理することで迅速な対応が可能になります。

タグマネージャーは、煩雑なタグの管理を簡素化することを目的とするツールです。
一方で、管理するページが数ページと少なく、自力でタグを設置・管理できるのであれば特に必要ありません。

しかし、これからどうなっていくかはわかりません。

サイトを大きく成長させていく、今後広告を検討する可能性が少しでも考えられるなら、ホームページの制作段階や規模が小さいうちに、タグマネージャーを導入しておくと、のちのち楽になるでしょう。

Googleタグマネージャー（GTM）の基礎知識

Googleタグマネージャー（GTM）は導入自体は簡単ですが、ホームページ制作の現場で適切に運用していくためには、一定レベルの基礎知識が必須です。ここからは、タグマネージャーを導入する前に、知っておきたい基礎知識を紹介します。

Googleタグマネージャー（GTM）のアカウント構造

まずは、Googleタグマネージャー（GTM）のアカウント構造を理解しておきましょう。

タグマネージャーは、「アカウント」と「コンテナ」の2つで構成されています。

引用：Googleタグマネージャー（GTM）とは？基本概要やメリット、導入方法・タグの追加方法を解説

ワークスペースはそれぞれ独立しているので、タスクごとにワークスペースを分けて利用するようにしましょう。

タグ・トリガー・変数の関係を理解する

コンテナのワークスペースでは、

• タグ
• トリガー
• 変数

の3つの要素についての理解も欠かせません。

プログラミングに知見があれば問題のない部分ですが、タグマネージャーを利用する際にはそれぞれがどのような役割を果たすのかを、あらかじめ確認しておくようにしましょう。

タグマネージャーでは、タグは単体では動作せず、必ずトリガーの設定が必要です。

たとえば、ページのアクセス数を計測したい場合、「すべてのページ」など、ホームページを訪問した人全員に当てはまるようなら、変数を設定する必要はありません。

しかし、「特定のページを見た人（特定のURLにアクセスした人）」、あるいは「購入金額」など、ユーザーによって異なるケースでは、変数の設定が必要です。

Yahoo!タグマネージャー（YTM）とGoogleタグマネージャー（GTM）選ぶならどっち？

タグマネージャーは、Googleタグマネージャー（GTM）以外に、Yahoo!タグマネージャー（YTM）もあります。

ここでは、YTMの特徴と、両者の違いを解説します。

Yahoo!タグマネージャー（YTM）の概要と特徴

YTMは、Yahoo!JAPANが提供している無料で使えるタグマネージャー。
GTMと同様に、導入するとタグを一元管理できるようになります。

Yahoo!タグマネージャー

しかし、誰でも利用できるGTMと異なり、Yahoo!タグマネージャーは、Yahoo!プロモーション広告を利用していることが条件となっているので間違えないようにしましょう。

Yahoo!タグマネージャー（YTM）とGoogleタグマネージャー（GTM）の違いを比較！

Yahoo!タグマネージャー（YTM）とGoogleタグマネージャー（GTM）の違いは次のとおり。

YTMは、タグのテンプレートが充実しているため、初心者であっても比較的導入がスムーズ。

またYTMは、タグやタグを設定したページなどにエラーが起こった場合、エラー表示されるのでトラブル対応が容易です。GTMには、エラー表示の機能がないので、エラーが発生していても気がつきにくいことが難点です。

しかし拡張性に関しては、GTMのほうが優れています。
イベント管理などに関しても、GTMは実行条件の指定を簡単に行えますが、YTMは一定レベルの知識をもって、カスタマイズが必要です。

また、GTMはヘルプが充実しており、拡張のための設定をするときでも、ヘルプを参照しながら自力で設定することが、初心者であってもさほど難しくありません。対してYTMは、ヘルプ情報が少なく、ある程度の知識がないと希望する動作を実現できない可能性があります。

【結論】アナリティクスを使っているか多数派ならGTM

では、Yahoo!タグマネージャー（YTM）とGoogleタグマネージャー（GTM）どちらを選べば良いのでしょうか。

基本的には、YTMはGoogleアナリティクスに対応していないため、アナリティクスを活用するならGTMを選ぶのがおすすめです。

対してGTMは、Yahoo!JAPANの各サービスのタグテンプレートには対応していないので、Yahoo!プロモーションの運用がメインなら、YTMが良いでしょう。

また、両者を併用いているという企業も、いいとこ取りをしたいなら併用がおすすめです。

引用：タグマネージャ(GTM/YTM)の利用状況 2020年12月

なおSEM Technologyが上場のホームページを調査した結果によると、2020年12月現在タグマネージャーを導入しているのは2,204社中975社で44.24％。各割合を見ると、GTM導入企業が圧倒的に多いことがわかります。多数派が良い、という方は参考にしてください。

Googleタグマネージャー（GTM）の導入メリット5つ

Googleタグマネージャー（GTM）を導入すると、タグの一元管理を実現するほかにどのようなメリットがあるのかを5つ紹介します。

1.タグの設置が容易になる

GTMを導入すると、タグの設置が容易になることが最大のメリットです。

通常、タグを挿入するときには、必要なすべてのページのHTMLに、タグを記述していく必要があります。
数ページならさほど手間ではありませんが、数百ページにも及ぶ場合、コピペで張り付けていくだけでも相当の手間が発生します。1つのタグを機能させるだけで、丸1日かかることもあるでしょう。

GTMを導入すれば、設置したいタグをGTMで一度設定するだけで、すべてのページにタグを貼り付けたのと同じ結果が得られます。

2.公開前のプレビュー

GTMには、公開前にプレビューして設定した内容の動作を確認できる機能が備わっています。

プレビューモードにすると、通常の画面の下部に、設定したタグの一覧が表示されます。
GTMで設定した通りの内容で、正しく発火するかを視覚的に確認できることがメリットです。

3.外部に委託せず、自社でのタグ管理

GTMを使用せず、一つひとつのページにタグを設置すると、ページが増えれば増えるほど、どのページにどのタグを埋め込んだのか分からなくなっていきます。

同じタグを変更したくても、すべてのページを変更するには手間と時間がかかるうえ、変更漏れのページが出る可能性も増えるでしょう。

GTMを導入すれば、GTMで一度変更を加えるだけで、対象のページすべてに反映されます。
タグの変更を、これまで外部に委託していた場合には、自社で管理できるようになり、依頼にかかる時間もコストも削減できます。

4.ページの表示スピードの改善

GTMを活用すると、ページの表示速度が改善されることもメリットです。

JavaScriptを含むタグには、同期タグと非同期タグの2種類があります。同期タグでは、ページの読み込みと同時にJavaScriptの読み込みを開始し、処理が終了するまでHTMLの読み込みが止まります。

対して非同期タグでは、それぞれの処理が独立して行われるため、読み込みスピードが速くなるのが特徴です。

GTMは、すべてのタグを強制的に非同期タグとするので、結果的にページ全体の表示スピードが速くなるのです。

ページがなかなか表示されなければ、ユーザーはあきらめて離脱する可能性が高まってしまいます。
ページの表示速度はGoogleの評価項目とされているため、ページスピードが上がることは大きなメリットになります。

サイトの表示速度については、こちらの記事を参考にしてください。

【SEOに影響】サイトの表示速度1秒の差でサイトは大きく変わる

 新型コロナウイルス（COVID-19）による自粛が緩和され、最近では外出する機会が徐々に増えていると思います。けれど、まだまだ油断はできないので休日はお家で・・・という方も多いのではないでしょうか？...

5.バージョン管理が可能

GTMでは、設定を変更したときに、「タグ・トリガー・変数」を任意のタイミングでセットとしてバージョン保存が可能です。

たとえば変更を実施した日付で、「バージョン20.10.01」などとネーミングして保存しておけば、トラブルが発生したときに正常に機能していたバージョンに戻せます。

Googleタグマネージャー（GTM）の導入デメリット

導入メリットが多いGoogleタグマネージャー（GTM）ですが、デメリットもあります。

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

GTMは、万能ではありません。対応していないタグも、当然ながら存在します。

たとえばSNSの「シェアボタン」を生成するJavaScriptなどは同期タグであるため、GTMでは対応していません。
GTMはすべてのタグを非同期タグとするため、同期タグには対応できないのです。

対応外のタグについては、これまで通りHTMLに記述していく必要があります。

導入作業に手間と時間がかかる場合がある

GTMは、すでに埋め込まれたタグを外して共通タグを設置することが前提です。

そのためすでに大量のページにタグの設置が済んでいる場合には、すべてをGTMに置き換える膨大な手間と時間がかかります。

ただし、最初に手間と時間をかけてしまえば圧倒的に管理は楽になります。
長期的な目線でみれば、導入部分だけでもコストをかけて外部に依頼するのもおすすめです。

ホームページの運用については、こちらの記事をご覧ください。

ホームページ制作の運用サポートとは？費用相場や制作会社5選を紹介

 ホームページは制作しただけで終わりではなく、公開後の運用こそが重要だと言えます。その運用をサポートしてくれるサービスがあるのをご存知でしょうか？「ホームページ運用を自社でまかないきれない…」「...

Googleタグマネージャー（GTM）の導入手順

ここからは、Googleタグマネージャー（GTM）を導入する手順を順番に解説します。

GTMを導入するためには、Googleのアカウントが必要です。
アカウントがない場合には、まずはGoogleアカウントを取得してください。

1.Googleタグマネージャーアカウントを開設する

まずはGTMのアカウントを開設します。

Googleタグマネージャーの公式ホームページにアクセスして、青い「無料で利用する」ボタンをクリックします。

Googleタグマネージャー
https://marketingplatform.google.com/intl/ja/about/tag-manager/

Googleにログインを促す画面が表示されるので、Gmailアドレスを入力してログインし、「アカウントを作成」をクリックします。

2.アカウントとコンテナを設定する

「アカウント名」と「コンテナ名」の入力画面が表示されるので入力します。

アカウントにコンテナが含まれるイメージになるので、

のように、親と子の関係にしておくと良いでしょう。アカウント名は後からでも変更可能です。

アカウント名の下に表示される国は、サイトを運営する国（通常は日本）を選択します。

コンテナ名に表示される「ターゲットプラットフォーム」は、使用環境を選びます。
通常のサイト管理であれば「ウェブ」を選択し、「作成」をクリックします。

利用規約が表示されるので、同意してください。

3.Googleタグマネージャーのタグをページに埋め込む

利用規約に同意すると画面が切り替わり、埋め込み用の共通のコンテナスニペット（JavaScriptのコード）が表示されます。このタグを、ホームページのすべてのページに埋め込むことで、GTMが使えるようになります。

指示通り、上部のタグは各ページの<head>タグ内のできるだけ上のほうに、下のタグは<body>の直後に貼り付けるようにしてください。

ウィンドウを閉じてしまった場合は、コンテナIDをクリックすることで再表示が可能です。

4.ワークスペースにタグを追加する

1. タグを追加するときには、「新しいタグ」もしくは「新しいタグを追加」をクリックします。
2. 上に「タグの設定」、下に「トリガー」が表示されるので、まず「タグの設定」をクリック。
3. 右側に「タグタイプを選択」する画面が表示されるので、設定するものを選びます。

Googleタグマネージャーには、Googleアナリティクスの設定、Google広告のコンバージョンやリマーケティングタグの設定など、よく使われるタグが簡単に設定できるようあらかじめ用意されています。

タグを選択、もしくは設定したら、続けて下のボックスに移って「トリガー」を選びます。クリックすると選択肢が表示されるので、「All Pages」を選びます。All Pagesを選択すると、すべてのページにタグが吐き出されます。

これでタグの設定が完了しました。

5.動作確認してから発火させる

設定が終了したら、タグを発火させるために動作確認をしてから公開します。

まずはプレビューモードで動作するかをチェックしましょう。

1. 右上の青い「公開」ボタンの横の「プレビュー」をクリック
2. プレビューモードに切り替わると、管理画面に「プレビュー中のワークスペース」と題された、目立つオレンジ色の枠が表示されます。プレビューモードであることを確認し、タグを埋め込んだページにアクセス
3. GTMが正常に動作していると、ページ下部の「Tags Fired On This Page」の覧に、設置したタグが表示されます
4. 動作確認が済んだら、管理画面でプレビューモードを終了し「公開」ボタンをクリック
5. バージョンの設定画面でバージョン名をつけ、どのような変更を行ったのか内容を記述します
6. 同じ画面に表示されている青い「公開」ボタンをクリックすると、公開されます

バージョン名は変更を行った箇所と日付を組み合わせるなど、ルールを決めておくと複数人でも管理しやすくなるのでおすすめです。

GTMではバージョン管理することにより、もしタグがうまく発火しない、エラーが発生したような場合でも、正常に機能していたバージョンに戻れるので安心です。

また、更新するときも、今のバージョンを停めてタグを埋め込んでリリースするといった、手間やタイムロスが不要なこともポイントです。

6.拡張ツールをインストールし発火を確認する

公開作業まで終了したら、タグが正常に発火するかを確認します。

タグの発火確認には、「Google Tag Assistant」という無料で使えるChromeの拡張ツールをインストールして使用します。

インストールが完了したら、Google Tag Assistantのアイコンが、Chromeの検索ウインドウ横の拡張機能バーに表示されているか確認しましょう。

正常にインストールできたら、対象のページで拡張機能のアイコンをクリックします。
ウインドウが開いたら、左下の青い「Enable」ボタンを、続けてクリックしてください。

ページの更新ボタンを押し、Tag Assistantのウィンドウに設置したタグが表示されれば正しく発火していると分かります。

発火確認は、GTMでタグの更新を行ったあとには、必ず実施することを習慣にしましょう。

Google Analyticsを追加する

Googleタグマネージャーは（GTA）、Google Analytics（GA）のタグ追加も簡単に行えます。
ここではGAを追加する方法を解説します。

タグを作成

先ほど設定したコンテナで、「新しいタグを追加」をクリックし、Googleアナリティクスのタグを追加します。

タグの設定から、「Googleアナリティクス：ユニバーサルアナリティクス」を選択します。

続けて、

• トラッキングタイプ：ページビュー
• Googleアナリティクス設定：新しい変数

を選択してください。

変数の設定画面が表示されるので、「トラッキングID」のフィールドにGoogleアナリティクスのトラッキングIDを入力し、右上の青い「保存」ボタンを押して設定を保存します。

トリガーを設定

続けてトリガーを設定します。

トリガーの枠をクリックすると、「トリガーのタイプを選択」画面が表示されるので、トリガーを選びます。
今回はすべてのページを計測すると仮定して、「All Pages」を選びましょう。

保存のボタンを押して終了です。
変数の名称設定をしていなくて、設定を要求された場合には、「Googleアナリティクス設定」などわかりやすい名前をつけておきます。

設定が完了したら、前章の「動作確認してから発火させる」を実行するようにしてください。

まだGoogleアナリティクスを導入していない、という企業はこちらの記事もご覧ください。

【2020年最新】Googleアナリティクス4の特徴と導入方法

 2020年10月14日（米国時間）、GoogleはGoogleアナリティクスの大幅なアップデートを施した「Googleアナリティクス 4 プロパティ（GA4）」をリリースしました。今回のアップデートにより、セッションベース...

Googleタグマネージャー（GTM）で可能なこと

Googleタグマネージャー（GTM）は、タグの設定を一気に効率化させることが可能です。

これまで手間と時間がかかる、外部に依頼するのでコストがかかるなど、導入に二の足を踏んでいた以下のような計測を、GTAで実現できます。

• クリックイベントの計測
• ページの画面スクロールの計測
• フォームの送信
• 資料のダウンロード
• YouTubeの計測

Googleアナリティクス（GA）を導入しているだけでは、どのページにどの程度のアクセスがあったのかといった大まかな情報の取得に留まります。しかし、サイトを適切に運用するには、ページ内でユーザーがどのような行動を取ったのか、詳しい「行動追跡」は欠かせません。

GTMを使用することで導入のハードルが一気に下がります。
各所にコードを貼り付ける必要がなくなり、HTMLファイルを編集しなくてよくなるためです。

GTMを導入すると、ユーザーの詳細な行動分析を容易に行えるようになるので、細かな効果測定によるサイトの改善ポイントを明確にできます。効果測定と改善を繰り返すことで、成果が期待できるよりよいホームページへと、成長させていくことが可能になるでしょう。

まとめ

Googleタグマネージャー（GTM）は、ホームページの規模がすでに大きくなっている場合には、導入の手間がかかります。

しかし、いったん導入してしまえば、そのあとのタグの管理が一気に簡素化され、外部に頼ることなく自社でさまざまなデータの収集を実現できるようになります。

Yahoo!タグマネージャー（YTM）とGoogleタグマネージャー（GTM）で迷っている方は、
アナリティクスを使っているか多数派ならGTM、Yahoo!プロモーションの運用がメインでテンプレート数を重視するならYTMと覚えておきましょう。余裕があるなら両方使ってみるという併用がおすすめです。

TRASPはさまざまな企業をWebで支援しています。管理面、SEOなどのwebマーケティング面からのご提案なども行っておりますので、お気軽にお問い合わせください。