brick - ヒートマップマニュアル

ヒートマップ使い方ガイド
2016.01
© 2015 TechLoCo, Inc. All Rights Reserved.
目次
ヒートマップでできること
･････　P
3
Google アナリティクスを登録する
･････　P
4
レポートを見る
･････　P
12
有料契約のお申し込み（支払登録）
･････　P
19
有料契約の解除（解約申請）
･････　P
26
© 2015 TechLoCo, Inc. All Rights Reserved.
2
はじめに
ヒートマップでできること
Google アナリティクスと連携してユーザーの動きを計測、ヒートマップとして表示します。
ユーザーがページ上のどこに注目し、クリックしているかを可視化します。
ポイント
・スクロール、クリック、マウスの3種類のレポート形式
・Google アナリティクスと連携したら、タグを設置するだけで計測開始
・コンバージョンの有無など、Google アナリティクスと同じ条件でデータの絞り込みが可能
・A/Bテストツール「Optimizely」との連携も可能
© 2015 TechLoCo, Inc. All Rights Reserved.
3
Google アナリティクスを登録する
© 2015 TechLoCo, Inc. All Rights Reserved.
4
Google アナリティクスを登録する
01. ［Google アナリティクス追加］をクリックします。
はじめに、ヒートマップ計測対象サイトのGoogle アナリティクスの登録を行います。
02. Google アカウントを選択します。
計測対象サイトのGoogle アナリティクスが紐付けられたGoogle アカウントを選択、ログインします。
ブラウザがGoogle アカウントにログイン状態の場合、すぐにリクエストの承認画面になります。
その場合は、次のステップに進みます。
© 2015 TechLoCo, Inc. All Rights Reserved.
5
Google アナリティクスを登録する
03. リクエストを許可します。
リクエストの内容を確認し、［許可］をクリックします。
表示されているGoogle アカウントが対象のアカウントと異なる場合は、右上のメールアドレスをクリック → ［アカ
ウントを追加］をクリックし、Google アカウントを変更します。
04. アカウントを選択します。
計測対象サイトのGoogle アナリティクスアカウント名の［選択］をクリックします。
© 2015 TechLoCo, Inc. All Rights Reserved.
6
Google アナリティクスを登録する
05. プロパティを選択します。
計測対象サイトのGoogle アナリティクスプロパティ名の［選択］をクリックします。
06. ビューを選択します。
計測対象サイトのGoogle アナリティクスビュー名の［選択］をクリックします。
© 2015 TechLoCo, Inc. All Rights Reserved.
7
Google アナリティクスを登録する
07. 発行されるタグをコピーします。
Google アナリティクスの登録が完了し専用タグが発行されるので、タグをコピーします。
タグをクリックすると全体が選択されるので、そのままコピーください。
※タグをコピーする前に画面遷移してしまっても、ツールTOPの［設定］から再確認できます。
08. 計測対象となるURLを設定します。
① 計測対象URL［+条件追加（OR）］をクリックします。
※URLを指定しない場合、タグを設置したすべてのページでヒートマップが計測されます。
※計測対象URLは、ツールTOPの［設定］からいつでも変更可能です。
© 2015 TechLoCo, Inc. All Rights Reserved.
8
Google アナリティクスを登録する
08. 計測対象となるURLを設定します。
② ヒートマップ計測したいページのURLルールを設定し、［設定を保存］をクリックします。
※URLルールは複数設定可能です。
※計測対象URLは、ツールTOPの［設定］からいつでも変更可能です。
【URL設定例】
URL
マッチタイプ
パラメータ付き
URLを含める
OK
NG
http://www.brick.tools/
等しい
チェックあり
http://www.brick.tools/
http://brick.tools/
https://www.brick.tools/
http://www.brick.tools/index.html
http://www.brick.tools/?utm_source=yahoo...
http://www.brick.tools/lp/
http://www.brick.tools/?gclid=12345...
チェックなし
http://www.brick.tools/
http://brick.tools/
https://www.brick.tools/
http://www.brick.tools/index.html
http://www.brick.tools/lp/
http://www.brick.tools/?utm_source=yahoo...
http://www.brick.tools/
前方一致
チェックあり
http://www.brick.tools/
https://www.brick.tools/
http://www.brick.tools/index.html
http://www.brick.tools/lp/
http://www.brick.tools/?utm_source=yahoo...
http://www.brick.tools/?gclid=12345...
チェックなし
http://www.brick.tools/
https://www.brick.tools/
http://www.brick.tools/index.html
http://www.brick.tools/lp/
http://www.brick.tools/?utm_source=yahoo...
http://www.brick.tools/?gclid=12345...
http://www.brick.tools/?pid=1
http://www.brick.tools/?pid=1
等しい
前方一致
チェックあり
-
-
チェックなし
http://www.brick.tools/?pid=1
http://www.brick.tools/?pid=10
https://www.brick.tools/?pid=1
http://www.brick.tools/?pid=01
チェックあり
-
-
チェックなし
http://www.brick.tools/?pid=1
http://www.brick.tools/?pid=01
https://www.brick.tools/?pid=1
http://www.brick.tools/?pid=10
© 2015 TechLoCo, Inc. All Rights Reserved.
9
Google アナリティクスを登録する
09. ツールTOPのテーブルにレコードが追加されます。
ヒートマップ計測できるようになりました。
※サイトにタグを設置しないとレポートは計測されません。
※自動的に有料契約へ移行することはありません。
10. サイトにタグを設置します。
対象サイトの <body></body>タグ内に、コピーしたタグを設置します。
</head>
<body>
<script type="text/javascript" charset="UTF-8" src="//tag.brick.tools/js/brick.js"></script>
<script type="text/javascript" charset="UTF-8" src="//tag.brick.tools/js/prop/UA-12345678-1.js"></script>
<script>Brick.init();</script>
</body>
</html>
※タグの橙色部分は、サイトによって変化します。
<body></body>タグ内であれば、設置位置は上方でも下方でも問題ありません。
本タグはGoogle タグマネージャのカスタムHTMLタグを利用して設定・発行いただくことも可能です。
© 2015 TechLoCo, Inc. All Rights Reserved.
10
Google アナリティクスを登録する
注意事項
本ツールは、ユニバーサルアナリティクス（analytics.js）対応です。
データの計測には、Google アナリティクスの「イベントトラッキング」機能を利用します。
そのため、ページ内でのユーザーの動きを計測する度に、ヒットが発生します。
1プロパティで計測できるヒット数には上限があるため、
計測するページを絞ってご利用になることをおすすめしております。
【ヒット数の上限】
・プロパティあたり 1 か月 1,000万ヒット
・セッションあたり 500ヒット
ページの長さによっても変わりますが、ページあたりのヒット数の平均は 5～10ヒットです。
（他にイベントトラッキングが設定されていない場合）
月間ページビューが 100万PV以内で、セッションあたりの平均ページビュー数が
5PVの規模のサイトであれば、全ページで計測いただいても支障はない想定ですが、
ヒット数がセッションあたりの上限を超えると、
同セッションの以降のヒットは処理されなくなりますのでご注意ください。
まずは、ランディングページやお問い合わせフォームなど主要なページで計測を行い、
問題なければ他のページでの計測を検討ください。
モバイルの表示は、レスポンシブWebデザインのサイトに対応しております。
レスポンシブWebデザインのサイトの場合、デバイスを「モバイル」で絞り込めば、
スマートフォンの表示画面サイズでデータをご確認いただけます。
© 2015 TechLoCo, Inc. All Rights Reserved.
11
レポートを見る
© 2015 TechLoCo, Inc. All Rights Reserved.
12
レポートを見る
01. レポートの表示
［レポート］をクリックします。
02. 期間の指定
期間を指定して［適用］をクリックします。
※初期状態では、当日を含む直近1週間のデータが表示されます。
© 2015 TechLoCo, Inc. All Rights Reserved.
13
レポートを見る
03. ページの切り替え
URL部分をクリックして指定のページを選択し、［適用］をクリックします。
※初期状態では、セッション数が最も多いページが表示されます。（URLの並びはセッション数降順）
URL or タイトルで検索できます。
04. レポート形式の切り替え
スクロール / クリック / マウスタブをクリックして、レポート形式を切り替えます。
※初期状態では、クリックが表示されます。
© 2015 TechLoCo, Inc. All Rights Reserved.
14
レポートを見る
■スクロール
ユーザーがページのどこまでスクロールしたか、スクロール到達率を可視化します。
100%、80%、60% … と20%ごとにラインが表示され、何%
のユーザーがどこまでスクロールしているかを把握できます。
1stビューに表示させるコンテンツの配置を見直したり、適切な
ページの長さを調整するのに役立てます。
■クリック
ユーザーが実際にクリックしているポイントを可視化します。
ユーザーにクリックされた箇所に色がつき、よくクリックされて
いる箇所ほど赤く表示されます。
コンテンツの配置やリンクの設置箇所の見直し、リンクの見た目
の最適化に役立てます。
© 2015 TechLoCo, Inc. All Rights Reserved.
15
レポートを見る
■マウス
ユーザーがマウスカーソルをどこに置いていたのかを可視化します。
マウスカーソルがよく置かれたポイントほど赤く表示されます。
マウスの動きから、ユーザーが注目している箇所を把握します。
狙い通りにコンテンツが見られているかを確認し、コンテンツの
最適化に役立てます。
05. セグメントを使用してデータを絞り込む【有料版】
Google アナリティクスのセグメントを使用してデータを絞り込むことができます。
データを抽出する条件を選択して、［絞り込み］をクリックします。
複数の条件を選択してデータを絞り込むことも可能です。
使用できるセグメントは、次項になります。
© 2015 TechLoCo, Inc. All Rights Reserved.
16
レポートを見る
■コンバージョン
Google アナリティクスに設定されたコンバージョンの有無でデータを絞り込みます。
［した］　：コンバージョンが達成された訪問（目標の完了数 > 0）に絞り込みます。
［していない］：コンバージョンに至らなかった訪問（目標の完了数 = 0）に絞り込みます。
■トランザクション
eコマースのトランザクションの有無でデータを絞り込みます。
［した］　：トランザクションの発生した訪問（トランザクション数 > 0）に絞り込みます。
［していない］：トランザクションが発生していない訪問（トランザクション数 = 0）に絞り込みます。
■デバイス
デバイスカテゴリ別でデータを絞り込みます。
［PC］　：PC（desktop）またはタブレット（tablet）による訪問に絞り込みます。
［モバイル］　：スマートフォン（mobile）による訪問に絞り込みます。
■属性
ユーザータイプ別でデータを絞り込みます。
［新規ユーザ］：新規ユーザー（New Visitor）の訪問に絞り込みます。
［リピータ］　：リピーター（Returning Visitor）の訪問に絞り込みます。
■チャネル
チャネルグループでデータを絞り込みます。
例：Paid Search
■参照元
参照元でデータを絞り込みます。
例：google
■メディア
メディアでデータを絞り込みます。
例：cpc
© 2015 TechLoCo, Inc. All Rights Reserved.
17
レポートを見る
06. モバイルセグメント時の表示サイズの切り替え
モバイルにデータを絞り込むと、ヒートマップの表示の横幅が 320pxに切り替ります。
サイトがViewportの指定によるレスポンシブに対応していない場合は［フルサイズ］を、
レスポンシブのViewportが480px（640px）に設定されている場合は
［480px］（［640px］）をクリックして表示サイズを切り替えてご覧ください。
© 2015 TechLoCo, Inc. All Rights Reserved.
18
有料契約のお申し込み（支払登録）
© 2015 TechLoCo, Inc. All Rights Reserved.
19
有料契約のお申し込み（支払登録）
01. ［支払登録］をクリックします。
有料版をご利用いただける場合は、［支払登録］から有料契約をお申込みください。
02. お支払い方法を選択します。
ご希望のお支払い方法を選択し、［支払登録］をクリックします。
※Paid（後払い）のご利用にあたっては、事前にPaidへのお申し込みが必要となります。
お支払い方法についての詳細はお支払い方法を参照ください。
© 2015 TechLoCo, Inc. All Rights Reserved.
20
有料契約のお申し込み（支払登録）
03. ［確認］をクリックします。
お支払い内容を確認いただき、［確認］をクリックします。
04. ［お客様情報登録］をクリックします。
クレジットカードをご利用の場合は、続けて［お客様情報登録］をクリックします。
※Paidをご利用の方はお客様情報が登録済みのため、ボタンが［支払処理を実行する］になります。
Paidをご利用の場合は［支払処理を実行する］をクリックします。
© 2015 TechLoCo, Inc. All Rights Reserved.
21
有料契約のお申し込み（支払登録）
05. お客様情報を入力します。
1
2
3
4
5
6
7
8
1
事業区分
「法人」または「個人」を選択します。
2
会社名
会社名を入力します。（個人の場合は個人名を入力ください）
3
担当者名
担当者名を入力します。
4
郵便番号
郵便番号を入力します。（郵便番号を入力すると市区町村まで自動で入力されます。）
5
住所
住所を入力します。
6
電話番号
電話番号を入力します。（ハイフン不要）
7
URL
会社ホームページのURLを入力します。（個人の場合は入力不要です）
8
確認
入力内容確認画面へ遷移します。
※すでに他のツールで支払登録してお客様情報を登録済みの場合は、確認画面が表示されます。
© 2015 TechLoCo, Inc. All Rights Reserved.
22
有料契約のお申し込み（支払登録）
06. ［お支払い方法選択］をクリックします。
入力内容を確認して［お支払い方法選択］をクリックします。
07. クレジットカードの「新規入力」を選択します。
「新規入力」をクリックし、クレジットカード情報を登録します。
© 2015 TechLoCo, Inc. All Rights Reserved.
23
有料契約のお申し込み（支払登録）
08. クレジットカード情報を入力します。
クレジットカード情報を入力し、［支払処理を実行する］をクリックします。
09. 支払処理が完了したら［戻る］をクリックします。
支払完了と同時に、ご登録メールアドレスへ契約完了の確認メールをお送りします。
© 2015 TechLoCo, Inc. All Rights Reserved.
24
有料契約のお申し込み（支払登録）
10. ステータスが「利用中」に、［支払登録］が［契約状況］に切り替ります。
課金履歴や領収書などお支払い情報の詳細は［契約状況］からご確認いただけます。
解約のお申し込みがない限り、翌々月以降は自動更新となります。
© 2015 TechLoCo, Inc. All Rights Reserved.
25
有料契約の解除（解約申請）
© 2015 TechLoCo, Inc. All Rights Reserved.
26
有料契約の解除（解約申請）
01. ［契約状況］をクリックします。
有料契約を解除するアカウントの［契約状況］をクリックします。
02. ［解約申請手続き］をクリックします。
契約状況を確認し、［解約申請手続き］をクリックします。
© 2015 TechLoCo, Inc. All Rights Reserved.
27
有料契約の解除（解約申請）
03. ［解約申請］をクリックします。
利用停止日時を確認し、［解約申請］をクリックします。
※解約手続きは、毎月20日締めとなります。20日までの解約手続きで当月末日のサービス停止となります。
※解約申請後は、解約処理の取り消しはできません。
04. 解約申請が完了したら［戻る］をクリックします。
解約申請と同時に、ご登録メールアドレスへ解約完了の確認メールをお送りします。
© 2015 TechLoCo, Inc. All Rights Reserved.
28
有料契約の解除（解約申請）
05. ステータスに「解約申請済」が追加、利用期限に利用停止日が表示されます。
利用停止日時をもって解約となります。利用停止日までは、引き続き有料版としてご利用いただけます。
© 2015 TechLoCo, Inc. All Rights Reserved.
29

Download Report