Tealeaf を使う！[ Step1：社内勉強会 ] *ご紹介資料あり
投稿者：ソリューション担当 S
![Tealeaf を使う！[ Step1：社内勉強会 ] *ご紹介資料あり](https://storage.googleapis.com/website1-prd-wordpress-bkt/news/images/TLB.png)
こんにちは。担当[ S ]です。
今日、担当SEの方が社内勉強会を開いてくれましたので、その様子をご紹介します。
参加者は、担当SE 側から3名、リーダーの[ Nさん ]、<.jsファイル> の作成や諸々の設定をしてくれた[ Kさん ]、それから今年度の新人[ Tさん ]。マーケティングメンバーからは4名が参加しました。
勉強会は１時間。
[ Kさん ]が準備をしてくれた資料をもとに、座学とハンズオンの2本立てで進められました。
目次
・Tealeafとは
・データの収集方法
・行動を自動的に検出する
・入力データのマスキングについて
・ハンズオン： Tealeaf へログインしてみる
・ハンズオン： Tealeaf で ユーザーのページ遷移を体感してみる （セッション分析）
・ハンズオン： ヒートマップを見てみる （スナップ・ショットギャラリー）
・ハンズオン： スナップショットを撮る
・Tealeaf ご紹介資料のご案内
Tealafとは
Tealeafを使うと、お客様がWEBサイト上でどのように行動したのかを見ることができます。
マウスオーバーやクリックした回数の多い箇所が色づけされて見れるほか、ページ内をどのように動いているのかを再生して見ることもできます。
Google Analytics(GA)と競合しているの？と聞かれることもありますが、GAではPV数や訪問時間などの定量的な情報を、Tealeafでは、お客様の動線など定性的な情報を知ることが出来るため、併用して利用することで、WEBサイトの改善がさらに高まると言えます。（Tealeafをご利用いただいている90%以上のお客様は既存のWEB分析ツールと併用）
データの収集方法
Tealeafでデータ収集するには、たった1行のscriptタグを対象ページに埋めるだけです。このタグが WEBサーバー上に置くUIC SDKファイルを参照することで、対象のページのDOMデータをIBM Tealeafに転送します。
行動を自動的に検出する
事前に定義した条件でレポートを作成したり、事前に定義した条件のしきい値を超えた場合にアラートを出すことも可能です。
入力データのマスキングについて
問い合わせフォームなど、お客様の個人情報を入力するケースがあるかと思いますが、それをマスキング（見えないように）することが可能です。マスキングのパターンは二つあります。
一つはそもそもクラウド上のTealeafに収集しない方法。ユーザーが入力した値のうち、マスキング指定した項目を[XXX]といった意味を持たない値に変換し、Tealeaf上に保存します。
*当社の設定はこちらになります。
もう一つは収集はするものの、項目別にマスキングをして見えないように設定する方法です。Tealeaf上にはデータとして値は保存されますが、Tealeaf担当者が操作する画面上では、ユーザーが入力した値を見ることが出来ません。
マスキング対象はカスタマイズが可能なので、お客様のセキュリティーポリシーに沿って設定することができます。個人情報の取扱いが厳しい昨今、こういった制限機能が選べるのはとても安心ですね。
ハンズオン： Tealeaf へログインしてみる
簡単な座学がおわったので、実際のTealeafの画面を見てみようということになりました。
アカウント発行時にメールに記載されていたURLよりログインを行うと、下記のような画面が表示されます。
メニューバーのアプリケーションをクリックすると、「Tealeaf Customer Experience on Cloud 顧客行動分析」というメニューが表示されるので、それを選択しクリックします。
Tealeafの画面へ遷移します。
ハンズオン： Tealeaf で ユーザーのページ遷移を体感してみる （セッション分析）
左側のメニューにある「セッション分析」を選択します。
*セッションとは、ユーザーがWEBサイトに訪問してから離脱(＝セッションが切れる)までの一連の行動のことを指します。
セッション検索の画面に移動しますが、何も表示されていませんので、とりあえず検索ボタンをクリックします。
画面が表示されました。 先ほどの画面で検索キーワードを何もいれずに検索ボタンを押したので、全セッションが表示されます。
セッション動向を再生して見てみたいと思うものにカーソルをあてると、小さな三角ボタンが表示されるので、そのボタンを押します。
期間が長いものや、再生ビューの多いものを選んで再生してみました。ユーザーがどの画面からどの画面へ遷移して離脱したのか、一連の動作が再生されます。
ハンズオン： ヒートマップを見てみる （スナップ・ショットギャラリー）
スナップショット・ギャラリーをメニューより選択すると、あらかじめスナップショットでページの写真を撮っておいたページの一覧がこちらに表示されます。
下記は改定する前の当社のWEBサイトのSol Index ページです。 （画面ショットを撮っておきました）
メニューより、「ヒートマップ」を選択します。
クリックが多かった箇所が赤っぽく表示されます。
ハンズオン： スナップショットを撮る
スナップショットを撮りたいWEBページを開きメニューバーのスナップショットを押すと、カメラマークが出るのでそれを押します。
（*Tealeafの専用タグの埋め込んであるページでないと値は取得できませんのでご注意ください）
キャプチャを撮る際、下記のようなハチのマークが表示されます。
PCサイズの画面が表示されます。
スマートフォンサイズの画面が表示されます。
画面キャプチャが撮り終わる間、スナップショットの図上に下記のようなマークが表示されます。
画面キャプチャはこれで終了です。
スナップショットギャラリーは、スタックというフォルダのようなもので分類することが出来ます。
追加したいスナップショットにカーソルをあてると、「スナップショットの追加」が表示されるので、「＋」マークをクリックします。
すでに撮影済みの画面ショットの中から、追加したい画面を選択しチェックマークをつけ、「スタックに追加」を押すと追加されます。
Tealeaf ご紹介資料のご案内
Tealeafをもう少し詳しく知りたいという方に、ご紹介資料をご用意しました。ご希望の方はダウンロードが可能ですので、下記よりお問い合わせください。
>> Tealeaf ご紹介資料をご希望の方はこちらをクリック <<
Q&A
今回の勉強会の中で出たQ&Aについて、参考までにご紹介させていただきます。
Q1：[ Y部長 ]「実際にどういうことを求めてTealeafを使うお客様が多いの？」
A1：[ Nさん ]「入力画面などで離脱してしまうお客様の動線を確認して、ページ改善をしたいといったお客様が多いように思います」
Q2：[ Tさん ]「これから画面キャプチャを取りたいページがあるのですが、以前の状況（動線）を確認することはできますか？」
A2：[ Nさん ]「画面キャプチャを取った日以前の状況を再生したりすることはできないので、設定した以降のデータを見ていただくことになります」
Q3：[ S ]「画面キャプチャの取得数に上限などがあるのですか？」
A3：[ Nさん ]「PV数によって利用金額が異なりますが、画面キャプチャ数の上限はありません」
*補足事項
本サイトでご紹介している内容は、2018年1月時点でのご紹介となります。
製品のバージョンアップ等に伴う機能のグレードアップが発生した際は、内容に異なる点が生じる場合もございますので、その点については何卒ご了承ください。
関連ブログのご紹介
Tealeafを使う！ その前に
Tealeaf を使う！
- Step1：社内勉強会 *ご紹介資料あり
- Step2：使ってよかった機能のご紹介
