ヒートマップ使い方ガイド 2016.05 2015 TechLoCo, Inc. All Rights Reserved.
目次 ヒートマップでできること P 3 Google アナリティクスを登録する P 4 レポートを見る P 12 有料契約のお申し込み ( 支払登録 ) P 20 有料契約の解除 ( 解約申請 ) P 27 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 を設定します 1 計測対象 URL[+ 条件追加 (OR)] をクリックします URL を指定しない場合 タグを設置したすべてのページでヒートマップが計測されます 計測対象 URL は ツール TOP の [ 設定 ] からいつでも変更可能です 2015 TechLoCo, Inc. All Rights Reserved. 8
Google アナリティクスを登録する 08. 計測対象となる URL を設定します 2 ヒートマップ計測したいページの URL ルールを設定し [ 設定を保存 ] をクリックします URL ルールは複数設定可能です 計測対象 URL は ツール TOP の [ 設定 ] からいつでも変更可能です URL 設定例 URL マッチタイプパラメータ付き URL を含める OK http://www.brick.tools/ 等しいチェックあり http://www.brick.tools/ http://brick.tools/ https://www.brick.tools/ http://www.brick.tools/?utm_source=yahoo... http://www.brick.tools/?gclid=12345... NG http://www.brick.tools/index.html http://www.brick.tools/lp/ チェックなし http://www.brick.tools/ http://brick.tools/ https://www.brick.tools/ 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/index.html http://www.brick.tools/lp/ http://www.brick.tools/?utm_source=yahoo... チェックなし http://www.brick.tools/?pid=1 http://www.brick.tools/?pid=10 https://www.brick.tools/?pid=1 http://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
レポートを見る Google アナリティクスのセグメントを利用 [Google Analytics のセグメントを利用 ] をクリックすると セグメント選択画面に切り替わります セグメントを選択して [ 適用 ] をクリックします 検索して指定できます システム ( 既定のセグメント ) Google アナリティクスに既定で登録されているセグメントです アイコンがスマートフォンのセグメントは 適用するとモバイルサイズでヒートマップが表示されます カスタム ( ユーザーが作成したセグメント ) 連携に使用したメールアドレスで Google アナリティクスに追加されたセグメントです API の仕様上 対象のビューに設定されたものだけでなく メールアドレスに紐づくものがすべて表示されます 条件に デバイスカテゴリ完全一致 mobile を指定しているセグメントはアイコンがスマートフォンになり 適用するとモバイルサイズでヒートマップが表示されます 2015 TechLoCo, Inc. All Rights Reserved. 18
レポートを見る 06. モバイルセグメント時の表示サイズの切り替え モバイルを指定してデータを絞り込むと ヒートマップの表示がモバイルサイズ ( 横幅 320px) に切り替ります サイトが Viewport の指定によるレスポンシブに対応していない場合は [ フルサイズ ] を レスポンシブの Viewport が 480px(640px) に設定されている場合は [480px]([640px]) をクリックして表示サイズを切り替えてご覧ください 2015 TechLoCo, Inc. All Rights Reserved. 19
有料契約のお申し込み ( 支払登録 ) 2015 TechLoCo, Inc. All Rights Reserved. 20
有料契約のお申し込み ( 支払登録 ) 01. [ 支払登録 ] をクリックします 有料版をご利用いただける場合は [ 支払登録 ] から有料契約をお申込みください 02. お支払い方法を選択します ご希望のお支払い方法を選択し [ 支払登録 ] をクリックします Paid( 後払い ) のご利用にあたっては 事前に Paid へのお申し込みが必要となります お支払い方法についての詳細はお支払い方法を参照ください 2015 TechLoCo, Inc. All Rights Reserved. 21
有料契約のお申し込み ( 支払登録 ) 03. [ 確認 ] をクリックします お支払い内容を確認いただき [ 確認 ] をクリックします 04. [ お客様情報登録 ] をクリックします クレジットカードをご利用の場合は 続けて [ お客様情報登録 ] をクリックします Paid をご利用の方はお客様情報が登録済みのため ボタンが [ 支払処理を実行する ] になります Paid をご利用の場合は [ 支払処理を実行する ] をクリックします 2015 TechLoCo, Inc. All Rights Reserved. 22
有料契約のお申し込み ( 支払登録 ) 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. 23
有料契約のお申し込み ( 支払登録 ) 06. [ お支払い方法選択 ] をクリックします 入力内容を確認して [ お支払い方法選択 ] をクリックします 07. クレジットカードの 新規入力 を選択します 新規入力 をクリックし クレジットカード情報を登録します 2015 TechLoCo, Inc. All Rights Reserved. 24
有料契約のお申し込み ( 支払登録 ) 08. クレジットカード情報を入力します クレジットカード情報を入力し [ 支払処理を実行する ] をクリックします 09. 支払処理が完了したら [ 戻る ] をクリックします 支払完了と同時に ご登録メールアドレスへ契約完了の確認メールをお送りします 2015 TechLoCo, Inc. All Rights Reserved. 25
有料契約のお申し込み ( 支払登録 ) 10. ステータスが 利用中 に [ 支払登録 ] が [ 契約状況 ] に切り替ります 課金履歴や領収書などお支払い情報の詳細は [ 契約状況 ] からご確認いただけます 解約のお申し込みがない限り 翌々月以降は自動更新となります 2015 TechLoCo, Inc. All Rights Reserved. 26
有料契約の解除 ( 解約申請 ) 2015 TechLoCo, Inc. All Rights Reserved. 27
有料契約の解除 ( 解約申請 ) 01. [ 契約状況 ] をクリックします 有料契約を解除するアカウントの [ 契約状況 ] をクリックします 02. [ 解約申請手続き ] をクリックします 契約状況を確認し [ 解約申請手続き ] をクリックします 2015 TechLoCo, Inc. All Rights Reserved. 28
有料契約の解除 ( 解約申請 ) 03. [ 解約申請 ] をクリックします 利用停止日時を確認し [ 解約申請 ] をクリックします 解約手続きは 毎月 20 日締めとなります 20 日までの解約手続きで当月末日のサービス停止となります 解約申請後は 解約処理の取り消しはできません 04. 解約申請が完了したら [ 戻る ] をクリックします 解約申請と同時に ご登録メールアドレスへ解約完了の確認メールをお送りします 2015 TechLoCo, Inc. All Rights Reserved. 29
有料契約の解除 ( 解約申請 ) 05. ステータスに 解約申請済 が追加 利用期限に利用停止日が表示されます 利用停止日時をもって解約となります 利用停止日までは 引き続き有料版としてご利用いただけます 2015 TechLoCo, Inc. All Rights Reserved. 30