タグの管理が劇的に楽になる、その2「Googleタグマネージャー」の紹介

タグマネージャーって

タグマネージャーとは何かについては、以前、「タグの管理が劇的に楽になる「Yahoo!タグマネージャー」を設定してみた」で説明したとおりですが、タグマネージャーの最大のメリットは、何といっても、複数のタグを1つのタグで管理することができることでしょう。

今回はGoogleタグマネージャとその設定方法について簡単にですが説明いたします。

Yahoo!タグマネージャとGoogleタグマネージャの違い

違いとしてはまず、利用権限が挙げられます。
Yahoo!タグマネージャは、Yahoo(リスティング or YDN)に広告を出稿していることが前提ですが、GoogleタグマネージャはGoogleアカウントがあれば誰にでも利用可能です。

サードパーティ提供のタグへのサポート体制も違いとして挙げられるでしょう。Yahoo!タグマネージャは、動作検証済みのサードパーティ提供のタグカタログが充実しています。一方、Googleタグマネージャは、Google提供のタグ(Adowords、アナリティクスなど)のみ用意されていますが、基本的にはタグそのものを貼り付けて個別に登録する必要があります。

また、タグを呼び出す構造上の違いもあります。Yahoo!タグマネージャはページを登録してページ毎に出力するタグを関連付けるのに対し、Googleタグマネージャはコンテナに直接、タグを呼び出すためのルールを設定することになります。

管理画面を開いてみよう

Googleアカウントがない場合は、作成してログインしましょう。

ログイン後、Googleタグマネージャアカウントを作成する必要があります。通常、企業に1つ作成することになるでしょう。

gtm_create_account

設定を開始

コンテナの作成

タグを束ねる入れものをGoogleタグマネージャでは「コンテナ」と呼びます。

Yahoo!タグマネージャーの場合は、広告アカウント=サイトと紐づいていたので、最初からこのタグの入れ物にあたるものは用意されていましたが、Googleタグマネージャの場合は、サイトやフォームなど、まとめてタグを管理したい単位毎に、コンテナを新規に作成する必要があります。

最初にこのコンテナを作成しましょう。

gtm_make_container

コンテナができた後の画面はこちら。

gtm_made_container

以降の設定の流れは以下のようになります。

まずは、タグの登録です。そして登録したタグを呼び出すためのルール設定。そしてタグ毎にそれを呼び出すためのルールを紐づけ、最後にGoogleタグマネージャスニペットをページに貼りつけることになります。

タグの登録

タグは、呼び出したい個別のタグです。
いくつかの種類があらかじめ用意されています。

gtm_add_tag

EFOタグの場合は「カスタムHTMLタグ」で登録するとよいでしょう。

ルールの登録

登録したタグを呼び出すための条件設定が、ルールです。ルールは様々な方法で指定することができます。マクロという任意の処理(JavaScriptのfunctionで定義)を登録し、その処理が返す値で条件を設定できたりもします。フォームにEFOタグを出力する場合でしたら、URLで判定するのが最も指定しやすい方法でしょう。
ただし、フォームの各ページのURLが変わらない場合は、URL以外のルールを指定する必要があるでしょう。

ルールは、スニペットを貼ったページを表示する際に、全て実行され、個々のルールの判定結果により、タグが出力(Googleタグマネージャでは「送信」という)されます。

gtm_add_rule

タグ毎にルールを紐づける

タグを呼び出すためのルールをタグ毎に設定しましょう。複数のルールを設定する場合は、全てを満たした場合にのみ、そのタグが出力されます。

設定方法は、Googleタグマネージャ管理画面のタグ詳細を開き、画面右側「配信のルール」で登録済みのルールを紐づければOKです。

gtm_setrule_on_tag

Googleタグマネージャスニペットをページにはる

スニペットをページに貼りましょう。既存の本番環境ではなく、開発環境のページなどでしたら、タグやルールの設定前にスニペットをページに貼ってしまい、動作確認しながら設定を進めるという方法もありえると思います。

公開にあたって

バージョン作成をして公開する

Googleタグマネージャでは、タグの履歴をバージョンとして管理することができます。例えばこれにより設定を更新して問題が出てしまったときなど、一時的に過去のある時点の内容に設定を戻すことが可能です。

gtm_tag_preview

プレビューモードとデバッグモードが便利

Googleタグマネージャにはプレビューモードが用意されています。ルールの検証などでいちいちバージョンを更新したり、公開しなくても、プレビューモードをONにすることでその動作を検証することができます。

プレビューモードをONにして、ログイン中のタグマネージャーを開いたブラウザと同じブラウザでスニペットを貼った設定対象のページを開いてください。設定済みの最新の内容のタグ送信動作を、公開することなく検証できます。
またデバッグモードも用意されています。これはプレビューモード同様にタグマネージャーと同じブラウザで対象ページを開くと、ブラウザの開発者ツールのウィンドウに1つGoogleタグマネージャ用のウィンドウが追加され、登録済みタグ一覧と度のタグが送信されたか(呼び出されたか)が確認できます。これによりDOMをいちいち確認する必要がないので、確認が非常に楽に行えます。

まとめ

いかがだったでしょうか。

例えば、特定の操作をおこなったログをGAで取りたい場合などは特に、Googleタグマネージャを使うことになるでしょう。Yahoo!タグマネージャーとともに設定に慣れておきましょう。

Googleタグマネージャ公式サイト
http://www.google.co.jp/tagmanager/

Googleタグマネージャについて(Google提供のヘルプ)
https://support.google.com/tagmanager/answer/2574305?hl=ja

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です