TRASPコラム

Googleタグマネージャー(GTM)とは?メリットや導入の流れ

解析・調査

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

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

 

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

 

しかし、タグマネージャーを導入すれば、タグの管理を自社で行えるようになります。今回は、Googleタグマネージャーの概要や導入メリット、導入方法から基礎的な使い方まで詳しく解説します。

 

 

目次

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

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

Googleタグマネージャー(GTM)とは、その名の通り、「タグ」を「マネジメント(管理)」するツールを指します。複数のサイトのタグを一元管理する、Googleが提供している無料ツールです。

 

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

 

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

 

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

 

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

 

 

タグマネージャーが必要なケースと不要なケース

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

 

タグマネージャーが必要なケース

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

 

広告を追加するたびに、1日かけて200ページのheadタグすべてにリマーケティングタグを埋め込む作業をしているようなら、タグマネージャーを導入しましょう。

 

またホームページの管理を外注していて、タグの埋め込みにコストがかかっているケースでも、タグマネージャーを導入するのがおすすめです。外注コストが減らせるうえ、どのようなタグを設置したいのかをいちいち説明する手間や、設置終了まで待つ時間も減らせます。

 

ホームページのタグを自分たちで管理できるようになり、必要を感じたときに、迅速な対応が可能になるのです。

 

 

タグマネージャーが不要なケース

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

 

すでにすべてのページに必要なタグを設置済みで、今のところ管理に困っていないケースや、今後ページを増やしていく予定もないようなら、導入は不要でしょう。

 

また、広告の運用などは考えておらず、アナリティクスしか使う予定がないようなケースでも、大きな導入メリットはないと考えられます。

 

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

 

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

 

 

Googleタグマネージャー(GTM)の基礎知識

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

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

 

 

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

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

 

タグマネージャーは、「アカウント」と「コンテナ」の2つで構成されています。アカウントはコンテナを管理するもので、ホームページの管理会社1つにつき1アカウントとするのが一般的です。

 

コンテナ内には、実際にタグの設定をするワークスペースがあり、GTMを無料範囲内で利用する場合には、コンテナ1つにつき3つを上限としたワークスペースを利用できます。

 

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

 

 

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

タグマネージャーを活用するときには、

  • ・タグ
  • ・トリガー
  • ・変数

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

 

プログラミングに知見があれば問題のない部分ですが、そうでなければそれぞれがどのような役割を果たすのかを、あらかじめ確認しておくようにしてください。

 

タグ

タグマネージャーで管理するタグとは、基本的にはHTMLなどのマークアップ言語で使用される制御情報を指し、大きく以下の3つに分かれます。

 

  • ・HTMLタグ
  • ・コンバージョン用タグ
  • ・ツール用タグ

 

タグは基本的に開始タグ<○○>と終了タグ</○○>がセットになっていて、この間にどのような動作を実現するのかを記述します。

 

 

トリガー

トリガーとは、「引き金」を意味する言葉です。その名の通り、タグを発火させる引き金となる条件を指定するのがトリガーです。

 

たとえばタグを配信するのが「フォームを送信が発生したとき」なのか「クリックが発生したとき」なのかなど、「どのようなとき」なのかをトリガーで指定します。

 

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

 

 

変数

変数とは、トリガーで発火させるタイミングを条件設定するときに使用します。

 

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

 

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

 

 

Yahoo!タグマネージャー(YTM)とGoogleタグマネージャー(GTM)の違い

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

タグマネージャーは、Googleタグマネージャー(GTM)以外に、Yahoo!タグマネージャー(YTM)もあります。ここでは、YTMの特徴と、両者の違いを解説します。

 

 

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

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

 

しかし、誰でも利用できるGTMと異なり、Yahoo!タグマネージャーは、Yahoo!プロモーション広告を利用していることが条件となっているのが特徴です。

 

 

Yahoo!タグマネージャー(YTM)とGoogleタグマネージャー(GTM)の違い

Yahoo!タグマネージャー(YTM)とGoogleタグマネージャー(GTM)には、いくつか違いがあります。

 

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

 

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

 

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

 

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

 

 

Yahoo!タグマネージャー(YTM)とGoogleタグマネージャー(GTM)の選び方

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

 

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

 

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

 

なおSEM Technologyが上場2,668社のホームページを調査した結果によると、2020年11月現在タグマネージャーを導入しているのは約40%にあたる1064社です。そのうちGTMのみを利用しているのが1,005社、YTMのみが10社、併用が31社となっていて、GTMのみの導入企業が94%を占めているので参考にしてください。

 

 

Googleタグマネージャー(GTM)の導入メリット

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

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

 

 

タグの設置が容易になる

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

 

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

 

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

 

 

公開前のプレビュー

GTMには、公開前にプレビューして設定した内容の動作を確認できる機能が備わっています。設定内容を、プレビューモードをオンにしたブラウザだけで有効にする機能です。

 

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

 

 

容易なタグ管理

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

 

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

 

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

 

 

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

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

 

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

 

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

 

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

 

ページの表示速度はユーザー体験で重要なこととして、Googleの評価項目とされているため、ページスピードが上がることは大きなメリットになります。

 

 

バージョン管理が可能

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

 

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

 

 

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

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

導入メリットが多いGoogleタグマネージャー(GTM)ですが、デメリットもあります。導入デメリットを2つ紹介します。

 

 

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

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

 

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

 

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

 

 

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

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

 

ただし、最初に手間と時間をかけてしまえば圧倒的に管理は楽になります。今後の労力も考えて判断するようにしましょう。導入部分だけでもコストをかけて、ホームページ制作会社など、外部に依頼するのもおすすめです。

 

 

Googleタグマネージャー(GTM)の導入手順

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

Googleタグマネージャー(GTM)を導入する手順を順番に解説します。

 

 

 導入の流れ

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

 

Googleアカウントを取得しているとして、導入手順を紹介していきます。

 

 

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

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

 

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

 

【Googleタグマネージャーの公式ホームページ】
https://marketingplatform.google.com/intl/ja/about/tag-manager/

 

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

 

 

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

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

「アカウント名」と「コンテナ名」の入力画面が表示されるので入力します。アカウントにコンテナが含まれるイメージになるので、

 

アカウント名「企業名」 > コンテナ名「サイト名」のように、親と子の関係にしておくと良いでしょう。アカウント名は後からでも変更可能です。

 

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

 

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

 

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

 

 

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

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

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

 

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

 

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

 

 

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

タグを追加するときには、「新しいタグ」もしくは「新しいタグを追加」をクリックします。上に「タグの設定」、下に「トリガー」が表示されるので、まず「タグの設定」をクリックしてください。

 

右側に「タグタイプを選択」する画面が表示されるので、設定するものを選びます。Googleタグマネージャーには、Googleアナリティクスの設定、Google広告のコンバージョンやリマーケティングタグの設定など、よく使われるタグが簡単に設定できるようあらかじめ用意されています。

 

タグマネージャーで用意されていないタグを設置する必要があるときには、「カスタムHTML」から記述が必要です。「カスタムHTML」を選ぶと画面が開くので、設置したいタグを記述します。HTMLとなっていますが、JavaScriptのコードを書き入れても動作します。

 

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

 

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

 

 

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

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

 

まずはプレビューモードで動作するかをチェックしましょう。右上の青い「公開」ボタンの横の「プレビュー」をクリックします。

 

プレビューモードに切り替わると、管理画面に「プレビュー中のワークスペース」と題された、目立つオレンジ色の枠が表示されます。プレビューモードであることを確認し、タグを埋め込んだページにアクセスしてください。

 

GTMが正常に動作していると、ページ下部の「Tags Fired On This Page」の覧に、設置したタグが表示されます。

 

動作確認が済んだら、管理画面でプレビューモードを終了し、右上にある青い「公開」ボタンをクリックします。

 

バージョンの設定画面が表示されるので、バージョン名をつけ、どのような変更を行ったのか内容を記述します。バージョン名は変更を行った箇所と日付を組み合わせるなど、ルールを決めておくと複数人でも管理しやすくなるのでおすすめです。同じ画面に表示されている青い「公開」ボタンをクリックすると、公開されます。

 

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

 

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

 

 

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

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

 

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

 

chromeウェブストアにアクセスし、Chromeに追加のボタンをクリックしてインストールします。

「Google Tag Assistant」をインストールする

 

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

 

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

 

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

 

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

 

 

Google Analyticsを追加する

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

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

 

 

すでにGoogleアナリティクスを導入している場合の注意点

GTAでアナリティクスを導入するときには、注意点があります。もし、すでにアナリティクスを導入し、ページにトラッキングコードを埋め込んでいる場合は、すべて削除してから実装する必要があります。

 

すでにHTMLにタグが記述されているのに、さらにGTAでトラッキングコードを設置すると、二重計測となってしまうためです。タグの管理をGTAにまとめたいなら、面倒ですが現在埋め込まれているタグはすべて削除が必要です。

 

 

Google Analyticsの導入手順

それでは、具体的にGTAでアナリティクスのタグを設定する手順を紹介します。

 

タグを作成

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

 

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

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

を選択してください。

 

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

 

 

トリガーを設定

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

 

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

 

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

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

 

 

Googleタグマネージャー(GTM)が可能にするもの

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

Googleタグマネージャー(GTM)は、タグの設定を一気に効率化させることが可能です。これまで手間と時間がかかる、外部に依頼するのでコストがかかるなど、導入に二の足を踏んでいた以下のような計測を、GTAで実現できます。

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

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

 

GAにも、「イベント」を設定する機能が備わっていますが、GTMを使用することで導入のハードルが一気に下がります。各所にコードを貼り付ける必要がなくなり、HTMLファイルを編集しなくてよくなるためです。

 

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

 

 

まとめ

ホームページ制作においてGoogleタグマネージャー(GTM)でできる事

 

Googleタグマネージャー(GTM)は、ホームページの規模がすでに大きくなっている場合には、導入の手間がかかります。しかし、いったん導入してしまえば、そのあとのタグの管理が一気に簡素化され、外部に頼ることなく自社でいろいろなデータの収集を実現できるようになります。

 

ホームページ制作の現場において、目標を達成するには、ユーザーがページのどこで、どのような行動を取っているかを詳しく確認することが重要です。ホームページの改善を進めるためにも、GTMを導入し、タグを設置していきましょう。

 

2020.12.23

CONTACTweb制作やweb集客のご相談やお見積もりなど

オンライン
相談受付中
page top
© TRASP.inc All Rights Reserved.