BLOGスタッフブログ

インソースマーケティングデザイン

2015.07.22 Webプロモーション

超便利!GoogleタグマネージャでGoogleアナリティクスの「イベント設定」をしてみる

ずいぶん暑くなってきましたね。
最近、ウェブ解析(ウェブ解析士)に興味があるディレクターの籐です。
今更なんですけど、アクセス解析データって使ってますか?
数あるメディアの中でも「Webサイト」ってある程度正確なデータがとれるメディアで、
これって実はすごいことだと最近改めて気づきました。

でもこのアクセス解析データ、ちゃんとした見方ができないと「宝の持ち腐れ」なんですよね。

 
001

というわけで、今後僕のブログ投稿では、アクセス解析周りの便利なネタなどをまとめていきたいなと思います。

今回は最近仕様が代わった「Googleタグマネージャ」のタグ設定についてを書いてみます。
この「Googleタグマネージャ」とはどんなものなのか?
すばり!
「Googleアナリティクス」や「Adwordsのリマーケティングタグ」「コンバージョンタグ」などの各種タグを一括で管理できるツール。と今回はくくらせていただきます。
もっと詳しい解説は次回にまとめてみます。m(__)m
 
それで、この「Googleタグマネージャ」を使うと、
今までものすごく面倒だったGoogleアナリティクス上での「イベント」取得設定が、管理画面内で簡単に設定できちゃったりするんです!!
通常、Googleアナリティクス上で「イベント」を取得したいと思ったら、
トラッキングコードを<a>タグに埋め込むなどソースを編集する必要がありました。
まぁこれはこれでそんなに難しい作業ではないですが、「Googleタグマネージャ」だともっと簡単なんです。

 

イベントを設定/登録

とりあえず「Googleタグマネージャ」のアカウントが必要なんですけど、
アカウントとコンテナの作成についてはそんなに難しい話じゃないのですっ飛ばさせていただきます。
アカウント作成後ログインするとこんな管理画面になりますよね。

001

 

新規タグ作成

それでは、新規にタグを作るところから詳しく書いてきますね。
まず初めに、左メニュー内の「タグ」をクリックしてタグの管理画面を表示させます。

003

タグ管理画面が表示されましたら「新規」ボタンをクリックして、タグ設定画面へ進みます。

 

プロダクトを選択

プロダクトを選択では今回Googleアナリティクス上での「イベント」取得が目的なので、「Google Analytics」を選択し「続行」ボタンをクリック。

スクリーンショット 2015-07-18 11.27.20

 

タグの種類を選択

タグの種類は「ユニバーサルアナリティクス」のままで良いかと思います。
※最近ってデフォルトが「ユニバーサルアナリティクス」ですよね。

トラッキングIDはGoogleアナリティクス画面から調べて下さい。
トラッキングタイプは今回「イベント」を設定したいので、「イベント」を選択します。

そうすると、イベントトラッキングパラメータを登録する画面が表示されるかと思いますので、
「カテゴリ」「アクション」「ラベル」に後でアクセス解析画面から管理しやすい内容を登録していきます。

005

 
非インタラクションヒットですが、直帰率に影響をさせたくない場合は、「真」にしておくといいでしょう。
デフォルト「偽」の通常でのイベント計測では、例えば何らかのユーザー行動計測によりページから離脱した場合「ユーザー行動 = 直帰ではない」とみなされてしまうようです。
イベント計測をユーザー行動との関わりを持たせたくない場合は「真」にしておくということみたいです。

その他の設定や詳細設定も行えますが、今回はスルーさせていただきます。
「続行」をクリックして配信するタイミング設定を行います。

 

配信するタイミング

配信するタイミングは、どんなデータを取得したいのか?によって変わってくるかと思います。今回はページ内の一部をクリックしたタイミングで配信してほしいので「クリック」を選択しました。

006

そうすると、「トリガーの作成」画面が表示されます。

スクリーンショット 2015-07-18 11.45.01

ターゲットの設定について「リンクのみ」も選択できますが、今回は「すべての要素」のままにしてます。「続行」をクリックすると、次の設定に進みます。

007

配信するタイミングについては、今回タグ配信を希望する箇所がページ内の一部分だけを指定したいので「一部のクリック」を選択します。

次に、配信するタイミングの条件設定画面が表示されますが、ここが今回の設定で最も重要な設定ポイントになってきます。
しかし、
何を選んだらいいのかわからない・・
要素の説明は書いてない・・

なので、
とりあえずここは、なんでもいいです!
っというのも、後で正しい設定を詳しく説明します。

008

なんでもいいと言っても、各項目が埋まってないと、エラーが表示されてしまうので、テキトーに埋めていきます。
最後に「トリガーを作成」ボタンをクリックします。

トリガー名を最初に入力していない場合は、トリガー名の変更画面が表示されますので、わかりやすい名前を入れておきます。

スクリーンショット 2015-07-18 12.05.12

で、ここまでできたら、「タグを作成」ボタンをクリックしてタグの作成は完了です。

010

タグ名を最初に入力していない場合は、タグ名の変更画面が表示されますので、ここでもわかりやすい名前を入れておきます。

スクリーンショット 2015-07-18 12.06.12

はい。未完成のタグができました!
当然このままでは正しく動作しません!

011

 

プレビューとデバッグ

で、問題はさっきテキトーに登録したタグの配信条件の部分なんですけど、この部分をどうしたら良いかについて説明します。

まず、Googleタグマネージャ管理画面の右上に「公開」というボタンが表示されているかと思いますので、「公開」ボタンの右隣にある下矢印ボタンをクリックして下さい。

 012

メニューが表示されますので、その中から「プレビューとデバッグ」段の「プレビュー」ボタンをクリックして下さい。
そうすると、プレビュー中のバージョン・・・みたいなオレンジ色のバーが出てくるかと思います。

スクリーンショット 2015-07-18 13.51.17

この状態で、アクセス解析対象のWebサイトを、ブラウザの別タブなどで表示してみてください。「Googleタグマネージャ」のプレビュー/デバッグが表示されるはずです。

 

配信条件を確認する

なにやら見慣れない画面がブラウザの下の方に表示されているかと思います。
実はこの画面は「Googleタグマネージャ」のプレビュー/デバッグ画面なんですね。(多分)

スクリーンショット 2015-07-18 12.01.07

でここを見ていくと、設定したいタグの配信条件がわかるんです!!

ためしに、画面のどこでもいいのでクリックしてみてください。
プレビュー/デバッグ画面の左側に表示されている「Summary」の数字が一つ増えてませんか?

013

そう、それがあなたの今の行動ですね。クリックした場合だと「gtm.click」と表示されたのではないでしょうか?

で、
その「gtm.click」の中身が知りたいわけですが、
まず、プレビュー/デバッグ画面の上メニューに表示されている「Variables」をクリックした後、
先ほど追加されたSummary内「gtm.click」をクリックしてください。

014

この表示された内容が、あなたの行動(マウスクリック)で得られた情報なんですね。
どうでしょう?
「element」「element classes」「element id」 など、どこかで見覚えのあるデータ名ですよね。

そう。さっきテキトーにいれたタグの配信条件の変数名と同じですよね!
つまり、マウスクリック時に何が取得できているのか?ここをおさえておけば、タグの配信条件として使えるということです。

しかし、残念なことに今の状態だと、僕が実現したい「お申込みボタンをクリック」した時だけ取得できる変数が確認できません。
できれば、クラス名とかID名が取得できればよかったんですけど・・・
しかし!ここであきらめてはいけません。
クリックした時に取得できる変数は、どうやら増やすことできるようなんです。

 

配信条件の変数を増やす

その方法ですが、
まず、「Googleタグマネージャ」の管理画面に戻りまして、左メニュー内にある「変数」をクリックしてください。

015

有効な組み込み変数という画面が表示されますので、この中から必要な変数にチェックをつければ、先ほどのプレビュー/デバッグ画面内に表示されるようになるわけです。

今回僕はクリックした際の変数を確認したかったので、「クリック」カテゴリ内の変数すべてにチェックしてみました。

スクリーンショット 2015-07-18 12.44.19

 
で、もう一度プレビュー/デバッグ画面に戻り、先ほどと同じように、画面を適当にクリックした後のデータを確認してみると、今度は欲しい情報が表示されていました。

016

クラス名が取得できていると良かったのですが、なぜか入ってこない・・(HTML側の作りの問題?)
とりあえず、ユニークな情報であればよかったので、「Click URL」に格納されているボタン画像のパスを利用することにします。

 

トリガー編集

で、
この情報を今度は、さっきテキトーに設定したトリガーに正しく入れてあげればいいわけですね。

トリガーは「Googleタグマネージャ」の管理画面の左メニュー内にある「トリガー」をクリックすると表示されます。

017

はい。それでは、配信条件の変数を変更/設定します。

 スクリーンショット 2015-07-18 12.44.57

「トリガーを保存」して設定は完了です。

 

設定完了

プレビュー/デバッグ画面に戻り、お申込みボタンをクリックしてみると・・・
ちゃんとタグが配信されているようです。

018

Googleアナリティクスのリアルタイムのイベント確認でもデータがとれているのを確認できました。

019

ちょっと慣れるまでは道のりが長いように思えますが、ポチポチやってるだけで設定が完了しちゃうので、個人的にはすごい便利かな―と思ってます。

で、忘れちゃいけないのが「Googleタグマネージャ」の公開ですね。

これ僕自身よくやっちゃうんですが、公開処理しないとちゃんと動作しないんですよね。
「Googleタグマネージャ」の管理画面の右上に表示されている「公開」ボタンをクリックするだけ。
忘れないようにしておきましょう。
020

 
次回は、順番が前後しちゃいますが「Googleタグマネージャ」の初期設定方法についてをまとめてみます。
ではでは。

 
ちなみにですが、この辺の設定が面倒でしたらマリンロードにご相談下さい!!

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します