GAを利用した数値分析とUI改善

#はじめに
Google Analytics(以下GA)を使ってUI改善案を考えることが増えてきたので、いつも自分の行なっている方法を紹介したいと思います:raised_hand_tone1:
今回は、GAのイベントトラッキングの数値とPVを利用して、改善したい枠のCTRを分析してアップさせることを目的にしています:sparkles:

#イベントトラッキングとは？
例えば、ページのある枠内の案件がそれぞれどのくらいクリックされているか。
グローバルナビゲーションのどのメニューが一番クリックされているのか。

上記のことが数行のスクリプトを埋め込むだけでGAにて計測することができます:sparkles:
GAに渡すことのできるパラメータは３種類(カテゴリ、アクション、ラベル)ありますが、それなりに考えてパラメータを設定しないと計測結果が見難くなる場合がありますので、設定前に整理しましょう:point_up_tone1:

導入方法は以下を参考にしましょう。
https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja#overview

#PVとは？
サイトの中のページが表示された回数を表す数字です。
例えば、1人の訪問者が10ページを表示した場合のページビューは10になります。
同じページを何回も更新した場合も、同様に表示するたびにPVは増えます。

#CTRとは？
ページが表示された数のうちクリックされた回数(クリック数)の割合を示すものです。
### **CTRの算出方法**
CTR(クリック率) [%]= クリック数 ÷ 表示回数 ×100

#今回の問題点
今回はトップページの人気ランキング枠に注目してみました。
タブでアクセス数ランキングとクチコミ数ランキングの表示切り替えをしていますが、
アクセス数ランキングの各案件のクリック数よりもクチコミ数ランキングの各案件のクリック数が極端に少ない問題点が見つかりました。

### 【改善前】
![image.png](https://qiita-image-store.s3.amazonaws.com/0/73756/a5d8a0f4-e8c1-f99a-d332-df45b9dc461f.png)


### **クリックイベント数**

| | | 7/21(金)〜7/27(木)   |
|------|------|---------|
|アクセス数<br>ランキング | 【落札】ヤフオク！  | 642 |
| |楽天市場  | 317 | 
| | Yahooショッピング  | 79 | 
|クチコミ数<br>ランキング| 【再登録OK】ニコニコ動画  | 41 |
| | Hulu  | 12 | 
| | UNEXT  | 14 | 


#今回の改善案
トップページのアクセス数ランキングとクチコミ数ランキングのタブ切り替え表示をやめ、全て表示する形に変更する。
タブ切り替えをなくすことで、ユーザーはクチコミ数ランキンングの広告を一目で確認することができる為、クリック数とCTRが上がるはず。

### 【改善後】
<img width="600" alt="改善後" src="https://qiita-image-store.s3.amazonaws.com/0/73756/bde46439-dc50-a307-679a-63f13c1ff1cd.png">



#数値分析
使うツール：GA
計測期間：改善前後の1週間
（リリース後1週間は値がぶれやすいので、リリース後1週間あけて数値をとります）

### **トップページのPV数を確認**
左メニューから**行動** > **サイトコンテンツ**  > **すべてのページ** を選択。 一覧の中からトップページのURLを検索するとページビュー数を確認できます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/73756/dbb2b343-df19-14f4-aa09-8f8beabb5780.png" width="1000">




### **イベントトラッキングでクリック数を確認**
今回はイベントアクションで数値が見れるように設定しましたので数値が見れる場所まで移動してみましょう。

<img src="https://qiita-image-store.s3.amazonaws.com/0/73756/ca88f09a-eb64-e3e6-9946-47ad373cf78a.png" width="1000">



左メニューから**行動** > **イベント** を選択。 **イベントカテゴリ** の枠から今回対象にした箇所をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/73756/39f26094-541f-1191-5fd8-f55d06453973.png" width="1000">


**イベントアクション**を選ぶと該当箇所がありました。
合計イベント数をメモします！
![レイヤー 1.png](https://qiita-image-store.s3.amazonaws.com/0/73756/d0ec0db6-2fc4-3195-a12a-1a543ac3c8b3.png)



#改善結果

##比較期間
改善前：7/21(金)〜7/27(木)
改善後：9/22(金)〜9/28(木)

■人気ランキング枠全体

  | 7/21(金)〜7/27(木)  |   9/22(金)〜9/28(木) |   前期間比(%)     |
|------|---------|---------|---------|
| クリック数   | 1,781 | 2,422| <font color="blue">**641(+135%)**</font>  |

> - 若干ではあるが全体のCTRが**<font color="blue">1.2倍</font>**上がった。

■各案件のクリック数比較

| | | 7/21(金)〜7/27(木)  |   9/22(金)〜9/28(木) |   前期間比     |
|------|------|---------|---------|---------|
|アクセス数<br>ランキング | 【落札】ヤフオク！  | 642 | 618| <font color="red">**-24**</font>  |
| |楽天市場  | 317 | 189| <font color="red">**-128**</font>  |
| | Yahooショッピング  | 79 | 168| <font color="blue">**89**</font>  |
|クチコミ数<br>ランキング| 【再登録OK】ニコニコ動画  | 41 | 218| <font color="blue">**176**</font>  |
| | Hulu  | 12 | 160| <font color="blue">**148**</font>  |
| | UNEXT  | 14 | 199| <font color="blue">**185**</font>  |

![image.png](https://qiita-image-store.s3.amazonaws.com/0/73756/1cbe1a12-ac10-4f8a-ac90-6be579536b62.png)


> - クチコミ数ランキングは改善前と比べて**<font color="blue">5〜14倍</font>**のクリックがあり大幅に効果があった！
> - CTRについても**<font color="blue">5.4〜19倍</font>**上がっていることを確認。


#さいごに
いかがだったでしょうか？
これから新しい枠を新設する方や改善点を見つけたい方は、ぜひ、イベントトラッキングを入れて見てください。
数値化することで、ユーザーの反応を実感することができます。数値を追いながら、効果が出るように日々改善を重ねてより良いUIにしていきましょう！