Googleタグマネージャを使えば、イベントトラッキングをかんたんに設定できます。
イベントトラッキングを設定することで、Googleアナリティクスのデフォルト設定では見ることができないデータの計測が可能になり、アクセス解析の幅が広がります。
リニューアルしたメニューの効果測定
前回の投稿では、ブログのスマホ対応ということで、グローバルメニューをボトムナビゲーションに変更しました。
ボトムナビゲーションとは、下の画像のような画面下に固定されたナビゲーションメニューです。
スマホでよく見かけるデザインですね。
せっかくメニューを一新したので、どれだけ利用してもらえるか、データをとって検証（アクセス解析）したいと思います。
以下が検証内容です。
- メニューをわかりやすくして、次のアクションに結びつくか？
（回遊率・直帰率の改善） - メニューのどこが押されているのか？
（イベントトラッキングによる人気ボタン調査） - そもそもメニューは使ってもらえているのか？
（ぜんぜん押されていなければ、ちょっと悲しい・・ですね）
このうち、直帰率・滞在時間などはGoogleアナリティクスの[オーディエンス] などから見ることができますが、メニューのどのボタンがクリックされたのかは、そのままでは数値が計上されません。
計測するには、イベントトラッキングを使います。
イベントトラッキングとは
イベントトラッキングはGoogleアナリティクスの[行動 > イベント] で見ることができますが、数値を見るには設定が必要です。
イベントトラッキングを設定することにより、Googleアナリティクスのデフォルト設定では計測できない、ユーザーの行動を計測できるようになります。
今回の場合だと、スマホ表示用に設置したボトムナビゲーションの各ボタンがどれくらい押されたのかを知るために、イベントトラッキングを設定します。
イベントトラッキングはGoogleタグマネージャ（GTM）を使えば、それほど工数をかけずに設定できます。
以下にまとめましたので、一緒に見ていきましょう。
※以下の設定は はてなブログでの利用を前提としていますが、ワードプレスなどほかのブログやホームページなどでも、ほぼ変わりありません。
また、Googleアナリティクスを利用していることが前提となります。
効果測定の準備
おおまかな流れとしては、このようになります。
- Googleタグマネージャを設置
- イベントトラッキングを設定
まずはGoogleタグマネージャにログインし、初期設定を完了させましょう。
Googleタグマネージャの設置方法
①Googleタグマネージャにログイン
Googleタグマネージャの公式サイトへ行き、ログインします。
②アカウントを新規作成
ログイン後、アカウントを作成します。アカウント名はあとで変更できます。
③コンテナの設定
そのまま下に行き、コンテナの設定をします。
一つのアカウントで複数のコンテナが設定できます。
サイトのタグはコンテナ単位で管理しますので、コンテナ名はサイト（ブログ）名などにすると管理がしやすいかと思います。
わかりやすい名前をつけたら、その下の[ターゲット プラットフォーム] はブログやホームページの場合[ウェブ] を選択します。
[作成] をクリックすると、アカウントが作成されます。
すると下記のウィンドウが開きます。
はてなブログではコードを直接貼り付ける必要がないので、右上の [ × ] を押してウィンドウを閉じてください。
通常はこちらのコードをコピーして、ワードプレスなら[外観 > テーマエディター] から<head>内、<body>内にそれぞれを貼り付ける必要があります。
その場合、この次のコンテナIDの貼り付けは不要です。
また、ワードプレスにはコンテナIDを利用してかんたんに設定できるプラグインもあります。
④コンテナIDをコピー
「GTM-」ではじまる GTM-XXXXXXX という11文字のIDをコピーします。
コンテナIDは、コンテナを作成すると発行されます。
⑤はてなブログに貼り付け
はてなブログ側の設定は、コピーしたコンテナIDを貼り付けるだけです。
管理画面の詳細設定に追加する場所があります。
[設定 > 詳細設定 > 解析ツール > Google タグマネージャ]
貼り付けたら、下の[変更する] をわすれずに！
これで、Googleタグマネージャが使えるようになりました。
イベントトラッキングの設定
つづいて、イベントトラッキングを設定します。
[変数] → [タグ] → [トリガー] の順に設定していきます。
①変数を設定
まずは変数を設定します。下記の手順で進めてください。
- 左のサイドメニューから[変数] をクリック
- [ユーザー定義変数 > 新規] をクリック
- [変数の設定] の右上にある「」マークをクリック
- [変数タイプを選択] から、[定数] を選択
すると、下記の画面になります。
- 一番上は[変数名] です。つぎのタグの設定時に選択しますので、わかりやすい名前をつけてください。
- [値] の部分には、GoogleアナリティクスのトラッキングIDを入力します。
トラッキングIDは、Googleアナリティクスの[管理 > プロパティ > トラッキング情報 > トラッキングコード] から確認できます。
「UA-」ではじまる UA-XXXXXXXXXX-X というコードです。
変数名・変数のタイプ・値の入力を終えたら、右上の[保存] を押してください。
②タグを設定
つぎにタグを設定します。下記の手順で進めてください。
- 左のサイドメニューから[タグ] をクリック
- [タグ > 新規] をクリック
- [タグの設定] の右上にある「」マークをクリック
- [タグタイプを選択] から、[Google アナリティクス: ユニバーサル アナリティクス] を選択
すると、下記の画面になります。
- [トラッキング タイプ] は[イベント] を選択してください。
- [カテゴリ] は任意でわかりやすい名前をつけてください。
- [アクション] の部分には、クリック数を計測するボタン（リンク）につけるクラス名を任意で指定してください。ここでいうクラス名*1とは、HTMLのこの部分です。
<a class="menu-btn" href="https://XXXXXXXX… - [このタグでオーバーライド設定を有効にする] にチェックします。
- [トラッキング ID] は右にある
マークのアイコンをクリックし、[変数を選択] からさきほど設定した変数名を選択してください。
[ラベル]、[値]、[非インタラクション ヒット]、[Google アナリティクス設定] はデフォルトのままでだいじょうぶです。
カテゴリ名、アクション名はGoogleアナリティクスに表示されますので、あとで見てわかりやすい名称がよいかと思います。とくにアクション名（クラス名）は、ほかのクラス名とかぶらないように注意してください。
一番上はタグ名です。任意のわかりやすい名前をつけてください。
すべての入力を終えたら、右上の[保存] を押してください。
③トリガーを設定
トリガーを設定すれば、Googleタグマネージャの設定は終了です。下記の手順で進めてください。
- 左のサイドメニューから[トリガー] をクリック
- [トリガー > 新規] をクリック
- [トリガーの設定] の右上にある「」マークをクリック
- [トリガーのタイプを選択] から、[クリック > すべての要素] を選択
- [このトリガーの発生場所 > 一部のクリック] を選択
すると、下記の画面になります。
- 一番上は[トリガー名] です。任意のわかりやすい名前をつけてください。
- [イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します]
イベントの発生条件を入力します。ここに指定したすべての条件がそろったとき、データが計上されます。
[Click Element]、[CSS セレクタに一致する] を選択して、②のタグの設定で指定したクラス名（例：menu-btn）を入力してください。
※これにより、クラスをつけたリンクやボタンが押されたとき、数値がカウントされるようになります。
入力を終えたら、右上の[保存] を押してください。
つづけて右上の「公開」を押して、タグを公開すれば、Googleタグマネージャの設定は完了です。
④HTMLを編集
②のタグの設定、③のトリガーの設定で指定したクラスを、計測するリンクボタンに追加します。
前回の投稿で設置したボトムナビゲーションのコードの場合だと、管理画面の[デザイン > カスタマイズ > ヘッダ > タイトル下] にあるので、そこに追加します。
ボトムナビゲーションの実装
以下を参考に、リンクが指定されている <a href="… の「a」と「href」のあいだに、「 class="クラス名（例：menu-btn）"」を追加してください。
↓
追加後、[変更を保存] します。
メニューのリンクに、クラスを設定しました。
これで、イベントトラッキングの設定は終了です。お疲れさまでした！
データの確認
効果測定の準備ができたので、データがちゃんと取れているか、確認しましょう。
Googleアナリティクスの[リアルタイム > イベント] を開き、イベントトラッキングを設定したボタンやリンクをクリックしてみてください。
正しく設定ができていれば、数値がカウントされ、
- [イベント カテゴリ] の欄にはタグの設定でつけたカテゴリ名が、
- [イベント アクション] の欄にはタグの設定でつけたアクション名が、
それぞれ表示されるはずです。
クリックの内訳を知るには
蓄積されたデータはGoogleアナリティクスの[行動 > イベント] から閲覧できます。
さらにクリックの内訳を見るには、下記の操作を行います。
- [行動 > イベント > 概要] からイベント カテゴリの列に表示されたカテゴリ名をクリック
- [プライマリディメンション:] の列から[行動 > ページタイトル] をクリック
これで、クリックされたボタンの「合計イベント数（クリック数）」が、リンク先のページタイトル別に表示されます。
まとめ
以上、Googleタグマネージャを利用したイベントトラッキングの設定でした。
イベントトラッキングを設定することで、より高度なアクセス解析が可能になります。
Googleタグマネージャは、設定もかんたんで、タグの管理もしやすいので、これを読んで興味を持たれた方は、ぜひ導入を検討してみてください。
また、前回設定したボトムナビゲーションには、ツイッターのフォローページへのリンクボタンがあり、これは、外部へのリンクです。
外部サイトリンクのクリック数をGoogleアナリティクスで計測するには、今回とは別の設定が必要になります。
正しい検証のため、こちらの設定も行わないといけないのですが・・、記事が長くなりましたので、また引き続き、次の投稿で書かせていただければと、思います。
外部リンクのイベントを設定することで、ブログに貼った参考リンクや、アフィリエイトなどのクリックが計測可能になりますので、こちらも興味があればぜひ、お読みください♪
番外：おすすめグッズ
最近、気になっているおすすめグッズの紹介です。
FINsix社の超小型ACアダプター"DART"
製品紹介ページ
サイズは3.2 x 2.7 x 8.0cm、重さわずか85グラムと非常にコンパクトなノートPC用アダプターです。
一般的な単2乾電池が約70グラム、デスクトップ用マウスが100グラムなので、ACアダプターとしては超！軽量なことがわかります。
デザインもカラフルでおしゃれだから、カフェなどでPCを使うときも、ちょっと気分よさそう。
充電用のUSB端子がついているので、PC・スマホの同時充電が可能。PCのUSB端子が取られないのもメリット。
接続プラグは9種類なので、さまざまなPCに対応可能。
※現状はWindowsのみで、Macでは使えません。
以上、気になるツール「Dart」のご紹介でした。
12,000円と少し高価ですが、持ち運びにかさばらないので出張の多い方には、重宝しそうですね。
*1:クラス（class）について
HTMLの編集で class="XXXX" とクラスを指定すると、CSSコードでデザインを適用したり、今回の場合だとクリックなどのイベントを発生させるキーにすることができます。
クラス名は自由につけられます。クラス名をつけると、ついていないものや、他のクラス名のものと区別ができるようになり、目印の役割をします。
