ふじっこブログ

ふじっこブログ

日本一周・世界一周経験有の旅行会社社員のブログ

【2018年】Googleタグマネージャー(GTM)とは?使い方・設置場所など徹底解説

多数のタグを一元管理してくれるGoogleタグマネージャーは、多くのIT企業で必須のツールとなっています。GTMは非エンジニアのWebマーケ担当者だけでできる施策の幅を広げてくれる便利なツールです。
Googleタグマネージャーの重要要素を把握して、基礎の設定方法さえ把握してしまえば操作は至ってシンプル!HTMLを使えないWebマーケ担当者でも使いこなせるツールとなります。

Googleタグマネージャーとは

Googleタグマネージャーは2012年に開発された、複数のタグを一元管理するツールです。同じGoogleサービスであるGoogle Analytics・Adwordsはもちろん、facebookなど他のツールが発行したタグも含み一元管理できます。料金は完全無料です。
どのページにどのタグを配信するかの設定をGTM管理画面から設定できます。これまでは各ページのHTMLに直接タグを導入する必要がありましたが、HTMLを触らずにWebマーケ担当者だけで新たなタグの設定もできるようになりました。 

Googleタグマネージャーのメリット

f:id:fuuujikko:20180617152220p:plain

かなり多くの企業で導入されているGoogleタグマネージャーのメリットを5点にまとめました。1.・2.が特に重要なメリットとなります。
 
1.様々なタグを一元管理できる
各ページにタグを埋め込んでいるときは、どのページにどのタグが設定されているのか管理・把握することが大変な作業でした。Googleタグマネージャー上だけで全てのタグを管理することができます。 
2.エンジニアに依頼しなくてもタグを追加・編集できる
最初にGoogleタグマネージャーのインストールタグをサイトHTMLに入れてしまえば、あとはHTMLを直接触らずにタグを設定していけるので、エンジニアリングスキルや権限がないWebマーケターでも自身でタグ設定ができます。
 3.Webページの読み込み速度が速くなる
個別タグを各ページ全部に埋め込むことに比較して、GTM上で1つのタグで管理できるようになったので、サイト表示速度も速くなることが多いです。
 4.設定変更を反映する前にテスト確認ができる
下記で詳細説明しますが、[プレビュー機能]があり実際に反映する前に、しっかりサイト内にタグが適用されているのか確認することができます。
 5.バージョン管理・変更履歴を残すことができる
新しく更新するたびに新しいバージョンへと上書きされていきますが、過去のバージョンを簡単に一覧でみれて、過去の簡単に戻すことも簡単です。 

Googleタグマネージャーの導入に必要なプロセス

f:id:fuuujikko:20180617151949p:plain

Googleタグマネージャーを実際に導入するために必要なプロセスを解説します。
1. Googleタグマネージャー公式サイトへアクセスし、「今すぐ登録」をクリック
  Google Analyticsと同じメールアドレスが一般的です。異なっても問題はありません。
2.GTMのアカウント情報を作成する

f:id:fuuujikko:20180617152053p:plain

・アカウント名..会社名が 一般的
・コンテナ名..Webサイト名が 一般的
  ーコンテナ =GAのプロパティ にすると分かりやすいです。
 3.GTMのインストールタグを Webサイト全ページのHTMLに追加

f:id:fuuujikko:20180617152128p:plain

 インストールタグは各コンテナごとに発行されます。コンテナ名隣に表示される「GTM-XXXXXX」から確認できます。WebサイトのHTMLのどこに設置すれば良いかは下記で詳細説明しますが、2箇所に入れるだけでokなので簡単です。
 
メインの管理画面にて「新しいタグを追加」をクリックして、タグを新規作成していけます。まず、どのようなタグが必要なのかも下記で説明します。 
 
ここからは、既にサイト内に多くのタグ設定をしていて、それらもGoogleタグマネージャーに移行したい際の手順を紹介します。
(4.)Webサイト内で使用しているタグをリスト化
  ー3.の後に、まず今各ページで使用しているタグを洗い出します。
(5.)GTM管理画面で各種タグの設定
  ーそれらのタグをGoogleタグマネージャー管理画面で新規作成していきます。
(6.)プレビューモードで動作テスト
超有能機能です。プレビューモードをONにした状態で、GTMタグが入った該当Webサイトを確認すると、ページ下部にタグの一覧が表示され、しっかりタグが意図したページで発火しているか確認できます。同ブラウザ内で適用なので、同ブラウザ内の別タブにて確認してください。
(7.)一般ユーザへ公開
プレビューでの動作確認がokなら、「今すぐ公開」を忘れずにクリックしましょう。※バージョンごとに記録されているので、新たに公開していき問題が起きれば、前のバージョンに簡単に戻せます。

Googleタグマネージャーの設置場所

手順3.で発生する「GTMインストールタグ」をWebサイトのHTML内のどこに挿入すれば良いのか解説します。最初のこの作業だけエンジニアに依頼する必要があります。
f:id:fuuujikko:20180617152128p:plain
インストールタグは2種類ありそれぞれを指定の場所に埋め込む必要がありますが、設置場所は非常にシンプルです。2つのインストールタグに関してこのように言及されています。 
「このコードは、次のようにページの<head>内のなるべく上のほうに貼り付けてください。」
「また、開始タグ<body>の直後にこのコードを次のように貼り付けてください。」
上のコードは<head>内の上のほうに、下のコードは<body>の直後に追加すればokです! 

※インストール用のタグは、後で確認することもできます。(管理画面最上部「管理」メニュー内の「Googleタグマネージャをインストール」の項目)

Googleタグマネージャー管理画面の使い方説明 

f:id:fuuujikko:20180617152220p:plain

Googleタグマネージャーで重要な要素は3つあります。この3つで全てが満たされます。 
タグ…「何をするか」という指示そのものになります。
トリガー…タグに紐づけて利用する、「どんな時にタグを配信するか」の条件
      ー「全ページで配信する」というのもトリガーの1つ
      ー1つのトリガー内で複数条件設定すると、"&"の意味合いになり、全てを満たした時にのみ発火
変数...状況によって変わる可能性のある「動的な値」
      ー計測したいページが変わるとURLも変わる=URLも変数として登録する必要あり
      ークリックされた要素のリンク先も代表的変数
各コンテナごとの画面内に、[サマリー/タグ/トリガー/変数]のメニューが左サイドバーにあります。共通ヘッターには[公開][プレビュー]ボタンがあります。公開するごとにバージョン名を記載していきましょう。

GTMの代表的なタグ紹介

タグは無限に近い種類がありますが、特に頻繁に使われるタグを紹介します。

GTMタグ事例_ユニバーサルアナリティクス

GoogleTagManegerを用いる人において、GoogleAnalyticsもアクセス解析に用いている場合がほとんどだと思います。ここで紹介するタグはGoogleアナリティクスと連携させるために必須なタグとなり、まず最初にこのタグから登録されることが多いです。

f:id:fuuujikko:20180617152541p:plain

1.“タグタイプを選択”にある「ユニバーサル アナリティクス」をクリック
2.トラッキングタイプを[ページビュー]を選択
3.GoogleAnalytics設定で、紐づける[GAアカウント名]を選択
 ー先にGTMコードをGAに設定しておく必要があります
4.[このタグでオーバーライド設定を有効にする]にチェック
5.Google Analyticsで発行済みのUAから始まるトラッキングIDを入力
タグの設定はこれで完了で、あとは次にトリガーを選択します。トリガーはもっともシンプルな[All Pages]を選択。
f:id:fuuujikko:20180617152839p:plain
一般的に頻繁に用いられるタグはタグタイプとして登録されており、選択するだけでokなのです。公式にタグタイプが設定されているのは、上記画像のタグタイプ[おすすめ]選択肢にあるものだけです。その他のタグは「カスタムHTMLタグ」で設定します。
 
Googleアナリティクスの挿入方法についての解説はこちらの記事で。

GTMタグ事例_クリックの計測

f:id:fuuujikko:20180617153503p:plain

クリックイベントの計測タグも使用頻度が高いです。
トラッキングタイプで[イベント]を選択
 ー[イベント]を選択すると下記の新たな選択項目が表示されます。
カテゴリ [イベント名 (例.Line友達登録クリック など)]
アクション[{(Page URL)}]
ラベル[{(Click URL)}]
非インタラクションヒットを[偽]
配信するタイミングで[外部サイトリンクをクリック]を選択
カテゴリに入れた文字列がイベント名となり、GoogleAnalyticsのイベントページでクリック数を見られるようになります。"どのような条件のクリックがされた時にタグを発火させるのか”トリガーを作成する必要がありますので、下記で詳細解説しています。
 
※非インタラクションヒットを[偽]にすると、直帰率としてもカウントされるようになります。

GTMタグ事例_コンバージョンタグの設定

f:id:fuuujikko:20180617153857p:plain

リスティングなどで有名なGoogleアドワーズのコンバージョン設計もGoogleタグマネージャーを用いて行えます。 
前提:Adwords画面>コンバージョントラッキングにてCVタグを生成。
    ー先にAdwords画面でこちらの作業が必要です。
タグの新規登録画面
プロダクトを「GoogleAdwords」と選択する
トラッキングタイプを「コンバージョントラッキング」
コンバージョンIDを選択する
コンバージョンラベルを選択する
 ー特になければ0の入力でok
コンバージョン値を選択する
 ー特になければ0の入力でok
トリガーにはCVしたセッションをカウントするトリガーを設定します。

GTMでよく使用されるトリガー紹介

上記事例のようなタグ設定をした上で、どういう時に該当タグを発火させるかをトリガーで指定しています。トリガーでもまた使用頻度が高いパターンを紹介します。

特定ディレクトリ以下に配信するトリガー設定

f:id:fuuujikko:20180617154252p:plain

トリガーを[新規作成]をクリック
[イベントを選択]で[ページビュー]を選択する
[トリガーのタイプ]でも[ページビュー]を選択する
[配信するタイミング]で[一部のページビュー]を選択する
 →[Page Path]変数を選択して[先頭が一致]を選択 > URL

http://www.traveltechz.com/のドメイン上で[Page Path]:detailを入力すると、detailカテゴリ以下の全ページが含まれることになります。[Page Path]はドメイン以降のURLを入力する。

リンクがクリックされたときに配信するトリガー設定

f:id:fuuujikko:20180617154908p:plain

トリガーを[新規作成]をクリック
[イベントを選択]で[クリック]を選択する
[トリガーのタイプ]でも[リンククリック]を選択する
[待ち時間の上限]は[2000]ミリ秒推奨…デフォルト設定が2000ミリ
[有効化のタイミング]で PageUPL>正規表現に一致>.*
  ーこの場合はすべてのURLを起点としている
  ー特定ページでのみのクリックを測定する場合、[先頭が一致]など
[配信するタイミング]でClick URL>含む> [リンク先URLドメイン]
トリガーを保存
特定のリンク先でない場合は、Click URL>含まない>自社URL などのパターンもあります。

複数のトリガーを組み合わせる

[Page Path]などの条件の右側にある[+ボタン]をクリックすると、「&条件」となるので両方満たすときのみ発火されます。

f:id:fuuujikko:20180617154959p:plain

 一方で、「or条件」にしたいときは、複数のトリガーを作成しそれらを同一タグに紐づけます。つまり、トリガーを増やせば増やすほど対象条件の範囲が広くなることになります。

正規表現で細かな条件を設定する

PagePath>正規表現に一致>正規表現を入力 であらゆる条件指定ができます。
一見難しそうですが、下記の基礎の基礎だけ把握していればかなり便利です。条件を指定する幅がだいぶ広がりますよ。これはGTM以外でも同様なルールで使われること多いのでおべえておいて損はないです。 
^…先頭を表す
$…末端を表す
()…範囲を表す
| …「または」を表す
. …任意の1文字を表す
* …0文字以上の繰り返しを表す
?…直前の文字があってもなくてもいい
- …数字や文字列の範囲 
また各トリガー詳細画面の[このトリガーへの参照] で、実際に当トリガーを使用しているタグが分かりますよ。

GTMの代表的な変数紹介

「変数」も重要な概念で、状況によって変わる可能性のある「動的な値」のことです。
代表的なもので言えば、リンクがクリックされるなど何かしらアクションが発生するページのURLは「PageURL」変数が使用されます。
 
クリックされたリンクの遷移先URLは新たに変数登録が必要です。[変数]クリック内の[Click URL]にチェックをつけると使用可能になります。

Googleタグマネージャーのまとめ

直接HTMLを触ることなく、多数のタグを一元管理できるようになるGoogleタグマネージャーは、IT企業で必須なWebツールとなってきています。
 
タグ・トリガー・変数の3要素の意味と代表使用例を把握して、Googleタグマネージャーの使い方をマスターしましょう。GTMは基礎さえ抑えれば難易度は高くないので、非エンジニアのWebマーケティング担当者でも使いこなしていけますよ。
 
Googleアナリティクスでできる機能を徹底解説した記事はこちらを参照ください。

Webマーケティング全体像を把握するための初心者向けの記事はこちらで解説しています。Webマーケティング導入編として良く見られている記事です。