Speee DEVELOPER BLOG

Speee開発陣による技術情報発信ブログです。 メディア開発・運用、スマートフォンアプリ開発、Webマーケティング、アドテクなどで培った技術ノウハウを発信していきます!

非エンジニアが社内wikiにヒートマップを実装してみた話

こんにちは、Speeeトレーディングデスク事業の長山(cho3)と申します。 広告運用者として、GoogleAdWordsやFacebook広告をはじめとする運用型広告の運用を行っています。

非エンジニアです。

先日開催したSpeeeKaigiで、社内wikiにヒートマップを導入する話をしました。

※SpeeeKaigiについては下記のエントリをご覧ください。

社内技術プレゼン大会SpeeeKaigi#3 開催レポート - Speee DEVELOPER BLOG

http://tech.speee.jp/entry/2017/09/01/102341

今回はその内容について書かせて頂きます。

そもそもヒートマップって...?

ヒートマップとは...

サイト訪問者の目線の動きやマウスの動き、サイトの熟読時間などの情報ををひと目で理解できるよう可視化したものです。 数値ではなく、サーモグラフィーのような色のグラデーションで表示されます。

引用:ヒートマップとは? ヒートマップツールを最大限活用するための基礎知識 | ユーザ視点をもっと間近に - ポップインサイト公式ブログ https://popinsight.jp/blog/?p=2841

簡単に言うと良くテレビで見かける"サーモグラフィー"のWeb版というイメージです。 クリックした位置が赤く色づけされます。

f:id:numabe:20170904213322p:plain

開発モチベーション

  • 社内wikiでも気軽にヒートマップで分析したい
  • 出来ることなら無料で使いたい

という想いがありました。

実装対象

弊社トレーディングデスクでは、社内のノウハウを蓄積し共有するためのwikiがあります。 WordPressで作っています。

※ほぼモザイクですみません...

f:id:numabe:20170905103209p:plain

弊社社内wikiが抱える問題点

社内wikiは直近アクセスが減ってきてしまっており、 改修を考えているところでした。

f:id:numabe:20170904213544p:plain

wiki内のユーザー行動をヒートマップで分析出来る環境を整え、 改修に向けて歩みだそう、というのが今回の話です。

このように実装しました

  1. Googleタグマネージャーでクリック位置など情報を取得し
  2. Firebaseに蓄積
  3. GoogleAppsScriptでFirebaseに蓄積した情報を呼び出し
  4. heatmap.jsに渡す
  5. GoogleAppsScriptにてHTMLを表示し完成

f:id:numabe:20170904213613p:plain

汎用性を高めるため、基本的にはGoogleのツールを使用し、 ヒートマップ表示部分には、以下"heatmap.js"を使用させて頂きました。

heatmap.js : Dynamic Heatmaps for the Web

https://www.patrick-wied.at/static/heatmapjs/

ちなみに:Firebaseとは

Googleが提供するツールです。

firebase.google.com

今回は

  • Realtime Database
  • Cloud Functions

を使用しました。

Realtime Database >>

クラウドでホスティングされる noSQL データベースを使用して、リアルタイムにデータを保存し、 ユーザーと端末の間で同期します。データの更新は接続された端末間で数ミリ秒で同期され、 アプリがオフラインになるとデータが利用可能になり、 ネットワーク接続にかかわらず優れたサービスを提供できます。

引用:https://firebase.google.com/products/


Cloud Functions >>

専用サーバーの管理や拡張を行うことなく、 カスタムのバックエンド コードでアプリを拡張します。 Functions は、webhook を使用して Firebase 製品、Google Cloud サービス、 サードパーティによって出力されるイベントによってトリガーできます。

引用:https://firebase.google.com/products/

ちなみに:GoogleTagManagerとは

Googleが提供するタグ一括管理ツールです。

www.google.com

何を」「いつ」「どこで」実行するか、詳細に指定出来ます。

通常業務では、広告配信に必要な情報を取得するためのjsを埋め込んだり、GoogleAnalyticsのタグを埋め込んだりするのによく使っています。

実装してみた結果

このようにヒートマップを表示することが出来ました。 今回はTOPページ(奥)と詳細ページ(手前)の2ページでトライしてみました。

f:id:numabe:20170904213644p:plain

結果を見て気づいたコト(TOPページ編)

グロナビのログインボタンが使われていない話

かつて要望が出て実装したログインボタンも、 WordPress純正のログインボタン(左上)の登場によって 使用されなくなってしまっているようです。

f:id:numabe:20170904213728p:plain

右側のアクセスランキングは全く使われていない話

かつて良かれと思って実装した週間アクセスランキング部分は、 全くクリックデータがありませんでした。悲しいですね...

f:id:numabe:20170904213755p:plain

TOPページからは検索しかしない話

結局TOPページのクリックは、右上の検索窓に集中しており、 TOPページに記事の一覧を載せているものの、 検索ニーズが一番高い事がわかりました。

f:id:numabe:20170904213824p:plain

気づいたコト(詳細ページ編)

TOPページに戻るリンクはロゴである話

万国共通のルールがここにもありました。

f:id:numabe:20170904213848p:plain

フォルダパスは3クリックで全選択している人が多い話

フォルダパスを載せている部分は、局所的に赤くなっていました。 3クリックで全選択しているのでしょう。 コピーボタンでも設置しておけば、UX向上になるかもしれません。

f:id:numabe:20170904213859p:plain

引き続き使われないアクセスランキング

悲しいですね...

f:id:numabe:20170904213915p:plain

Slack投稿への執念

弊社では社内コミュニケーションツールとしてSlackを使用しており、 以前こちらのようなエントリを書かせて頂きました。 (こちらも便利なので是非ご覧になって下さい!!)

SlackStatus とGoogleCalendarの同期をしてみた - Speee DEVELOPER BLOG

http://tech.speee.jp/entry/2017/04/24/114000

私がSlack連携やらずに誰がやるんだ」 という謎の執念が湧き上がってしまい、、 ヒートマップをSlackに投稿して本作品の締めとしたいと思います。

SpreadsheetとGoogleDriveへの拡張

以下のように、Spreadsheetにヒートマップを表示させ、 GoogleDriveにpdf化したヒートマップをアップロードし、 SlackにGoogleDriveのリンクを投稿する案で強引に進めます。

f:id:numabe:20170904214119p:plain

Spreadsheetにヒートマップを表示する

GoogleAppsScriptで、Firebaseから取得したクリック数を、 セルに表示させ、半透明のページキャプチャを重ねます。 それだけだと色がつかないため、Spreadsheetのお家芸"条件付き書式"で色を表示させます。

f:id:numabe:20170904214203p:plain

Spreadsheetに表示したヒートマップをpdf化する

GoogleAppsScriptで定期的にpdf化を実行し、 GoogleDriveにアップロードするように設定しておきます。

f:id:numabe:20170904214231p:plain

無事Slackへの連携が完了

無事投稿出来ました。これで安心して眠れます。

f:id:numabe:20170904214252p:plain

結局何が便利だったの...?

色々書いたので、何が便利なのか整理します。

  • GoogleTagManagerを使用していることから、汎用性が高いといえる。
  • 社内wikiにて実装が出来たため、その他社内サービスに横展開が出来る(改善欲はあるものの外部ツール入れる程でもない、というレベルの改善)
  • Slackにクリックが投稿されるため、日々Slackでヒートマップライフが送れる

まとめ

今回非エンジニアとしてエンジニアの社内イベントに参戦しましたが、学びは大きかったです。 自分のアウトプットを、普段とは違うものさしで評価される経験は貴重ですね。 こういった経験を今後も積み重ねていきたいと思います。

ありがとうございました。