こんにちは、Speeeトレーディングデスク事業の長山(cho3)と申します。 広告運用者として、GoogleAdWordsやFacebook広告をはじめとする運用型広告の運用を行っています。
非エンジニアです。
先日開催したSpeeeKaigiで、社内wikiにヒートマップを導入する話をしました。
※SpeeeKaigiについては下記のエントリをご覧ください。
社内技術プレゼン大会SpeeeKaigi#3 開催レポート - Speee DEVELOPER BLOG
今回はその内容について書かせて頂きます。
- そもそもヒートマップって...?
- 開発モチベーション
- 実装対象
- 弊社社内wikiが抱える問題点
- このように実装しました
- ちなみに：Firebaseとは
- ちなみに：GoogleTagManagerとは
- 実装してみた結果
- 結果を見て気づいたコト(TOPページ編)
- 気づいたコト(詳細ページ編)
- Slack投稿への執念
- SpreadsheetとGoogleDriveへの拡張
- Spreadsheetにヒートマップを表示する
- Spreadsheetに表示したヒートマップをpdf化する
- 無事Slackへの連携が完了
- 結局何が便利だったの...?
- まとめ
そもそもヒートマップって...?
ヒートマップとは...
サイト訪問者の目線の動きやマウスの動き、サイトの熟読時間などの情報ををひと目で理解できるよう可視化したものです。 数値ではなく、サーモグラフィーのような色のグラデーションで表示されます。
引用：ヒートマップとは？ ヒートマップツールを最大限活用するための基礎知識 | ユーザ視点をもっと間近に - ポップインサイト公式ブログ https://popinsight.jp/blog/?p=2841
簡単に言うと良くテレビで見かける"サーモグラフィー"のWeb版というイメージです。 クリックした位置が赤く色づけされます。
開発モチベーション
- 社内wikiでも気軽にヒートマップで分析したい
- 出来ることなら無料で使いたい
という想いがありました。
実装対象
弊社トレーディングデスクでは、社内のノウハウを蓄積し共有するためのwikiがあります。 WordPressで作っています。
※ほぼモザイクですみません...
弊社社内wikiが抱える問題点
社内wikiは直近アクセスが減ってきてしまっており、 改修を考えているところでした。
wiki内のユーザー行動をヒートマップで分析出来る環境を整え、 改修に向けて歩みだそう、というのが今回の話です。
このように実装しました
- Googleタグマネージャーでクリック位置など情報を取得し
- Firebaseに蓄積
- GoogleAppsScriptでFirebaseに蓄積した情報を呼び出し
- heatmap.jsに渡す
- GoogleAppsScriptにてHTMLを表示し完成
汎用性を高めるため、基本的にはGoogleのツールを使用し、 ヒートマップ表示部分には、以下"heatmap.js"を使用させて頂きました。
heatmap.js : Dynamic Heatmaps for the Web
ちなみに：Firebaseとは
Googleが提供するツールです。
今回は
- Realtime Database
- Cloud Functions
を使用しました。
Realtime Database >>
クラウドでホスティングされる noSQL データベースを使用して、リアルタイムにデータを保存し、 ユーザーと端末の間で同期します。データの更新は接続された端末間で数ミリ秒で同期され、 アプリがオフラインになるとデータが利用可能になり、 ネットワーク接続にかかわらず優れたサービスを提供できます。
引用：https://firebase.google.com/products/
Cloud Functions >>
専用サーバーの管理や拡張を行うことなく、 カスタムのバックエンド コードでアプリを拡張します。 Functions は、webhook を使用して Firebase 製品、Google Cloud サービス、 サードパーティによって出力されるイベントによってトリガーできます。
ちなみに：GoogleTagManagerとは
Googleが提供するタグ一括管理ツールです。
「何を」「いつ」「どこで」実行するか、詳細に指定出来ます。
通常業務では、広告配信に必要な情報を取得するためのjsを埋め込んだり、GoogleAnalyticsのタグを埋め込んだりするのによく使っています。
実装してみた結果
このようにヒートマップを表示することが出来ました。 今回はTOPページ(奥)と詳細ページ(手前)の2ページでトライしてみました。
結果を見て気づいたコト(TOPページ編)
グロナビのログインボタンが使われていない話
かつて要望が出て実装したログインボタンも、 WordPress純正のログインボタン(左上)の登場によって 使用されなくなってしまっているようです。
右側のアクセスランキングは全く使われていない話
かつて良かれと思って実装した週間アクセスランキング部分は、 全くクリックデータがありませんでした。悲しいですね...
TOPページからは検索しかしない話
結局TOPページのクリックは、右上の検索窓に集中しており、 TOPページに記事の一覧を載せているものの、 検索ニーズが一番高い事がわかりました。
気づいたコト(詳細ページ編)
TOPページに戻るリンクはロゴである話
万国共通のルールがここにもありました。
フォルダパスは3クリックで全選択している人が多い話
フォルダパスを載せている部分は、局所的に赤くなっていました。 3クリックで全選択しているのでしょう。 コピーボタンでも設置しておけば、UX向上になるかもしれません。
引き続き使われないアクセスランキング
悲しいですね...
Slack投稿への執念
弊社では社内コミュニケーションツールとしてSlackを使用しており、 以前こちらのようなエントリを書かせて頂きました。 (こちらも便利なので是非ご覧になって下さい!!)
SlackStatus とGoogleCalendarの同期をしてみた - Speee DEVELOPER BLOG
「私がSlack連携やらずに誰がやるんだ」 という謎の執念が湧き上がってしまい、、 ヒートマップをSlackに投稿して本作品の締めとしたいと思います。
SpreadsheetとGoogleDriveへの拡張
以下のように、Spreadsheetにヒートマップを表示させ、 GoogleDriveにpdf化したヒートマップをアップロードし、 SlackにGoogleDriveのリンクを投稿する案で強引に進めます。
Spreadsheetにヒートマップを表示する
GoogleAppsScriptで、Firebaseから取得したクリック数を、 セルに表示させ、半透明のページキャプチャを重ねます。 それだけだと色がつかないため、Spreadsheetのお家芸"条件付き書式"で色を表示させます。
Spreadsheetに表示したヒートマップをpdf化する
GoogleAppsScriptで定期的にpdf化を実行し、 GoogleDriveにアップロードするように設定しておきます。
無事Slackへの連携が完了
無事投稿出来ました。これで安心して眠れます。
結局何が便利だったの...?
色々書いたので、何が便利なのか整理します。
- GoogleTagManagerを使用していることから、汎用性が高いといえる。
- 社内wikiにて実装が出来たため、その他社内サービスに横展開が出来る(改善欲はあるものの外部ツール入れる程でもない、というレベルの改善)
- Slackにクリックが投稿されるため、日々Slackでヒートマップライフが送れる
まとめ
今回非エンジニアとしてエンジニアの社内イベントに参戦しましたが、学びは大きかったです。 自分のアウトプットを、普段とは違うものさしで評価される経験は貴重ですね。 こういった経験を今後も積み重ねていきたいと思います。
ありがとうございました。
