新しいGoogle タグマネージャの使い方

2014年11月7日 | 恩田 真澄

Googleタグマネージャとは

 Googleタグマネージャ(GTM)は、タグを一括管理できるシステムです。広告用やアクセス解析用など様々なタグが混在した状態だと、どれがどのタグなのかわかりにくくなりがちですが、GTMを使えばそれらを可視化し管理を容易にすることが出来ます。

hdghdhdf

新しいGoogle タグマネージャの使い方

2014年10月15日Google タグマネージャのUIが新しくなりました。それに伴い操作方法が大きく変更されましたので、その利用方法をご紹介いたします。

Google タグマネージャ の UI が新しくなり、より使いやすく、より分かりやすくなりました

この記事では、以下の3つについてご紹介いたします。

  • 新UIの大きな 2 つの特徴
  • 新UIの利用方法
  • 従来のUIへ戻す方法

<Google タグマネージャ 新 UI 表示画面>

PLキャプチャ23【ダッシュボード 画面】_1024

まず、新 UI を説明する前に Google タグマネージャ について基本的な機能の説明をいたします。

Google タグマネージャ は、WEB サイトやモバイルアプリで複数の WEB サービスのタグを利用する場合に一括で管理することができるツールです。

WEB サイトやモバイルアプリに Google タグマネージャ 用のタグをたった 1 種類実装するだけで、タグの実装を必要とする複数の WEB サービスのタグを Google タグマネージャ の管理画面上で管理することができ、タグを実装するための膨大な時間と費用を削減することが可能になります。

Google タグマネージャ のコンセプトについては、下記 YOUTUBE 動画でも紹介がございます。英語版のみとなりますが、興味がございましたらご覧下さい。

 <Google タグマネージャの概要:Google Tag Manager: Key Concepts>

< 新UIの大きな 2 つの特徴 >

今回の変更の特徴は、名称構成や定義が変更したことが大きな特徴です。

” “で囲った名称につきましては、新名称となります。

 ◆名称の変更

1.『ルール』から ”Triggers (トリガー)”

タグが発火するタイミングを定義する名称がルールからトリガーへ変更されました。

PLキャプチャ2【名称変更1】_1024

2.『マクロ』から ”Variables (変数)” へ

マクロの名称が変数へ変更されました。

 PLキャプチャ2【名称変更2】_1024

 ◆構成 / 定義 の変更

1.”Admin (タグマネージャ設定)” が新たに用意されました

新 UI では “Admin (設定)” が新たに用意されました。

トップナビゲーションの “Admin (設定)” を選択すると設定画面に遷移します。このGoogle タグマネージャ の新しい設定画面は Google アナリティクス と似た構成になっており、アカウント > コンテナの構造がより分かりやすく表現されています。

<タグマネージャ設定 画面>

PLキャプチャ3【GTM設定画面】_1024

2.コンテナにダッシュボードが用意されました

コンテナのサマリーに当たる ”overview (概要)” にダッシュボートが用意されました。表示はカード形式で表現されています。詳しくは以降を御覧下さい。

<”overview (概要)” 画面>

ddsadad

”New Tag (新しいタグ)”

新しいタグでは新規でタグを作成することができます。新 UI では、Google 社製品以外のタグテンプレートも複数用意され、現在全てで 20 のテンプレートを選ぶことができます。

”Now Editing (現在の編集状況)”

現在の編集状況では、今までに作成されたタグやトリガーや変数の一覧を確認することができます。

現在の編集状況のカードを選択することで、 “All Versions (バージョン)” へ遷移します。

<現在の編集状況を選択した 画面>

dadadasd

”Last Published (最新の公開状況)”

最新の公開状況では、現在公開されているバージョンの情報を確認することができます。

最新の公開状況のカードを選択することで、公開されたバージョンの詳細やを確認することができます。

<最新の公開状況を選択した 画面>

dasdsadsad

”Add a Note (メモの追加)”

コンテナ単位でメモを作成する事ができます。

複数のコンテナでサイトを管理している場合に “Container Notes (コンテナのメモ)” に詳細を記載することでそれぞれのコンテナを区別をすることができます。

メモの編集はメモの追加のカードを選択することで編集することができます。

<コンテナのメモ編集 画面>

dsadassadsad

”Recent Activity (編集履歴)”

編集履歴を一覧性をもって確認することができます。この履歴では、編集したユーザーや、編集の内容、何を編集したのか、また、いつ編集をしたのかを把握することができます。

3.プレビューの状態が分かりやすくなりました

プレビューの状態が分かりやすくなりました。

プレビューは右上にある”Publish (公開)” のボタンをホバーし、”Preview (プレビュー)” のボタンを選択することで利用できます。

新 UI ではダッシュボートにてプレビューの状態を分かりやすく把握することができます。

なお、新 UI では URL での共有機能は廃止されました。

<プレビューボタン表示 画面>

aeqweqweqweqeqw

<プレビューの確認 画面>

eewqeweww

4.インスタント検索

インスタント検索が用意されました。

コンテナ内で膨大なタグ、トリガー、変数を作成した場合に目的のタグなどを探すことは困難です。このインスタント検索では簡易に検索をかけ目的のものを探しだすことができるようになります。

インスタント検索はコンテナ画面のサイドナビゲーションに用意されています。

<インスタント検索 画面>

dadadasdadadadada

5.Versions(バージョン)の設定内容がより分かりやすくなりました

バージョンの設定内容がより分かりやすくなりました。

バージョンの確認ページは “All Versions(全てのバージョン)” と “Published Versions(公開されたバージョン)” で2種類が用意されており、全てのバージョンがこれまで作成したバージョン全ての情報を確認することができ、公開されたバージョンでは公開されたことのあるバージョンの詳細を確認することができます。

全てのバージョンでは、編集中のバージョンの概要とこれまで作成したバージョンの一覧を確認することができます。また、このページからPreview(プレビュー)、Publish(公開)、Rename(リネーム)、Edit Notes(バージョンのメモ)、Edit as New Versions(新しいバージョンとして編集)、Delete(削除)のアクションを行うことができます。

この全てのバージョンは、overview (概要)のNow Editing (現在の編集状況)から確認することができます。

公開されたバージョンでは、現在の公開されているバージョンの詳細やタグ、トリガー、変数の確認することができます。ここでも、それぞれPreview(プレビュー)、Publish(公開)、Rename(リネーム)、Edit Notes(バージョンのメモ)、Edit as New Versions(新しいバージョンとして編集)、Delete(削除)のアクションを行うことができます。

公開されたバージョンは、overview (概要)のLast Published (最新の公開状況)を選択することで確認することができます。

6.自動イベントリスナー機能がトリガーに含まれました

従来の UI ではイベントを実装する際に、自動イベントリスナー用のタグを個別に作成する必要がありましたが、新 UI ではその必要がなくなりました。

今後、トリガーが自動イベントリスナーの設定機能を補完するようになった為、自動イベントリスナーの機能を利用する場合にはトリガーの設定フローで設定をすることができます。

7.”Triggers (トリガー):旧ルール”の設定の変更

タグが発火するタイミングを定義する名称がルールからトリガーへ変更されましたが、名称の変更と共に設定する内容も大きく変わります。

これまでルールでは ”URL / 正規表現に一致 / www.xxx.jp” などのように発火のタイミングを設定していました。

新 UI のトリガーでは、発火のタイミングだけでなく、これまで個別にタグを設定する必要があったページビューや自動イベントリスナー機能などをトリガーと一緒に設定できるようになりました。

また、これまで発火のタイミングを操作する場合には gtm.js、gtm.dom、gtm.load のように記述する必要がありましたが、下記図のようにトリガータイプからプルダウンで選択することができるようになるなど大幅な改善がされています。

<これまでのルール設定 画面>

”URL / 正規表現に一致 / www.xxx.jp” などのように単一のに設定がされていました。

 PLキャプチャ11【これまでのルール設定 画面】_1024

<新 UI のトリガー設定 画面>

新 UI のトリガーでは、発火のタイミングだけでなく、これまで個別にタグを設定する必要があったページビューや自動イベントリスナー機能などをトリガーと一緒に設定できるようになりました。

 PLキャプチャ12【新UIのトリガー設定 画面1】_1024

発火のタイミングを操作する場合には gtm.js、gtm.dom、gtm.load のように直接記述する必要がありましたが、トリガータイプからプルダウンで選択することができるようになりました。

 PLキャプチャ13【新UIのトリガー設定 画面2】_1024

8.”Variables (変数):旧マクロ” の設定の変更

マクロの名称が変数へ変更になりましたが、さらに、組み込みで用意されていた変数が ”Built-In Variables (組み込まれた変数)” として新しく用意されました。

<組み込まれた変数の一覧>

PLキャプチャ14【組み込まれた変数の一覧】_1024

変数の詳細については、英語で恐縮ですが下記ペルプページをご参照下さい。

    <[V2 BETA] Built-In Variables>

https://support.google.com/tagmanager/answer/6106965

また、従来の UI のマクロでは予め複数の変数が用意されていました。ここでは使わない変数も全て表示されていました。

新 UI では、利用されるトリガーがイベントごとに整理され、さらに、利用したい変数にチェックをいれることで、その変数のみが有効化されるためトリガー側で選びやすくなりました。

例えば、Click Element のチェックボックスにチェックを入れると、トリガーの Click の項目で利用することができるようになります。

<変数の利用説明>

PLキャプチャ15【変数の利用説明】_1024

また、利用したい変数が組み込まれた変数に用意されていなくても、”User-Dfined Variables (ユーザーが定義する変数)” から独自で作成することが可能です。

<ユーザーが定義する変数>

PLキャプチャ16【ユーザの定義する変数】_1024

< 新UIの利用方法 >

新UIへは下記のURLからアクセスが可能です。

https://tagmanager.google.com/

ただし、Google タグマネージャ の新 UI を利用する為には新たにアカウントを作成する必要があります。現在新 UI はベータ版の仕様となっているため、それ以前に作成されたコンテナでは新 UI を利用することができませんが、従来の UI でも問題なく利用が可能です。

今後は 2015 年 1 月を目標に従来の UI で作成されたコンテナも新 UI で利用できるようになる予定のようです。

新 UI でのアカウント作成

1.アカウントリストを選択

画面左上にある ”アカウント” を選択します。

既に特定のアカウント上で操作を行っている場合は特定のアカウント名が表示されます。

”アカウント” を選択することで、”アカウントリスト” のボタンが表示されますので、表示されたボタンを選択します。

<アカウントリストボタン表示 画面>

 PLキャプチャ17【アカウントリストボタン表示 画面】_1024

2.”Try new UI (新 UI を使う)” を選択

アカウントリストへ移動すると、コンテンツの右上部に ”Try new UI (新 UI を使う)” というテキストリンクが表示されるので選択をします。

<アカウントリスト 画面>

PLキャプチャ18【アカウントリスト 画面】_1024

3.”New Account (新しいアカウント)” を選択

”Try new UI (新 UI を使う)” を選択することで新 UI のアカウントリストへ遷移することができます。新しいアカウントリスト上にある ”New Account (新しいアカウント)” を選択します。

<新UIのアカウントリスト 画面>

PLキャプチャ25【アカウントリスト 画面】_1024

4.”Add a New Account (新しいアカウントを追加)” を選択

ステップ ① の ”Setup Account (アカウント設定)” の”Account Name (アカウント名)” に任意の名称を記載します。

ベンチマークをご利用する場合は、アカウント名の下にあるチェックボックスの ”(?)” をホバーした時に表示される内容をご確認頂き、よろしいようであればチェックを入れて下さい。

アカウント名の記載の後は ”Continue (続く)” を選択して下さい。

<アカウント設定 画面>

PLキャプチャ20【アカウント設定 画面】_1024

5.”Setup Container (コンテナの設定)” を選択

ステップ ② の ”Setup Container (コンテナの設定)” では、”Container Name (コンテナ名)” に任意の名称を記載します。

コンテナ名の記載の後は ”Create (作成)” を選択して下さい。

なお、ステップ ① の修正を行いたい場合は、右上にある鉛筆のアイコンをクリックすることで、ステップ ① の編集を行うことができます。

<コンテナの設定画面>

PLキャプチャ21【コンテナの設定画面】_1024

6.利用規約の確認

作成ボタンを選択することで Google タグマネージャ の利用規約画面へ遷移します。

利用規約をご確認頂き、よろしいようであれば ”Yes (はい)” を選択してください。

言語は、英語、フランス後、フランス後(カナダ)から選択することができます。

<利用規約確認 画面>

PLキャプチャ22【利用規約確認 画面】_1024

7.アカウント / コンテナ作成の完了

利用規約に承認いただくことで、アカウントとコンテナの作成は完了し、下記の ”overview (概要)” のダッシュボード画面へ遷移します。

<ダッシュボード 画面>

PLキャプチャ23【ダッシュボード 画面】_1024

< 従来のUIへ戻す方法 >

新しい UI へ変更した後に、従来の UI へ表示方法を変更したい場合は、右上の歯車のアイコンを選択頂き、プルダウンしたナビゲーションの ”Old UI (従来の UI)” を選択いただくことで変更は可能です。

また、下記URLからもアクセスが可能です。

https://tagmanager.google.com/

<従来の UI 選択 画面>

PLキャプチャ24【従来の UI 選択 画面】_1024

また、アカウントリストで新 UI で作成したアカウントなのか従来のアカウントで作成されたアカウントか区別を行いたい場合は、右手にある ”Hight v2 accounts(新 UI のアカウントを強調)” のチェックボックスにチェックを入れることで、従来のアカウントで作成されたアカウントの色がグレーになり新 UI で作成したアカウントが分かりやすくなります。

<アカウントリスト 画面>

PLキャプチャ25【アカウントリスト 画面】_1024

Googleタグマネージャを利用する

現在、この新しい UI はベータ版として利用が開始されており、 2015 年 1 月を目標として正式版として公開される予定です。

ご利用になりたい場合は下記 URL からご利用下さい。また、詳細に付きましても以降の項目にある ”新 UI の利用方法” を御覧下さい。

<Google タグマネージャ 新UI 画面>https://tagmanager.google.com/

なお、現在公開されている新 UI はベータ版のため、下記の一部の機能については対応がされておりません。下記機能については、2015 年 1 月を目標に新 UI となった時に合わせて対応される予定です。

1.モバイルアプリ用コンテナのサポート

2.Doubleclick の floodlightタグの新しい設定と実装方法

※現在用意されているDoubleclickの設定・実装についてはご利用可能です。今後より簡単になった設定フローが用意されるという意味です。

3.英語以外での言語の対応

イー・エージェンシーはGoogle アナリティクス プレミアムの公式リセラー、Google タグマネージャの公認パートナーです。

Google アナリティクス プレミアムの導入に関するご相談をお待ちしております。
詳しくはこちら!
恩田 真澄

ライター

Google アナリティクス プレミアムのお客様を対象に、運用サポート や 最新情報の配信 を行っております。 Google アナリティクス プレミアムにご興味がございましたら弊社までご連絡頂けますと幸いです。

お問い合わせ

サービスに関するご相談は
こちらよりお気軽にお問い合わせください。

関連記事

e-Agencyの様々な情報をFacebookでお届けします!