BLOGSpeee開発陣による技術情報発信ブログです。ヒートマップTweetこんにちは、Speeeトレーディングデスク事業の長山(cho3)と申します。広告運用者として、GoogleAdWordsやFacebook広告をはじめとする運用型広告の運用を行っています。先日開催したSpeeeKaigiで、社内wikiにヒートマップを導入する話をしました。※SpeeeKaigiについては下記のエントリをご覧ください。BLOGhttp://tech.speee.jp/entry/2017/09/01/102341今回はその内容について書かせて頂きます。結局何が便利だったの...?まとめそもそもヒートマップって...?ヒートマップとは...サイト訪問者の目線の動きやマウスの動き、サイトの熟読時間などの情報ををひと目で理解できるよう可視化したものです。数値ではなく、サーモグラフィーのような色のグラデーションで表示されます。https://popinsight.jp/blog/?p=2841簡単に言うと良くテレビで見かける"サーモグラフィー"のWeb版というイメージです。クリックした位置が赤く色づけされます。開発モチベーション社内wikiでも気軽にヒートマップで分析したい出来ることなら無料で使いたいという想いがありました。弊社トレーディングデスクでは、社内のノウハウを蓄積し共有するためのwikiがあります。WordPressで作っています。改修を考えているところでした。改修に向けて歩みだそう、というのが今回の話です。ヒートマップ表示部分には、以下"heatmap.js"を使用させて頂きました。Webhttps://www.patrick-wied.at/static/heatmapjs/ちなみに:FirebaseとはGoogleが提供するツールです。Functionsを使用しました。ユーザーと端末の間で同期します。ネットワーク接続にかかわらず優れたサービスを提供できます。コードでアプリを拡張します。サードパーティによって出力されるイベントによってトリガーできます。引用:https://firebase.google.com/products/ちなみに:GoogleTagManagerとはGoogleが提供するタグ一括管理ツールです。www.google.com「何を」「いつ」「どこで」実行するか、詳細に指定出来ます。通常業務では、広告配信に必要な情報を取得するためのjsを埋め込んだり、GoogleAnalyticsのタグを埋め込んだりするのによく使っています。実装してみた結果このようにヒートマップを表示することが出来ました。今回はTOPページ(奥)と詳細ページ(手前)の2ページでトライしてみました。使用されなくなってしまっているようです。クリックデータがありませんでした。検索ニーズが一番高い事がわかりました。万国共通のルールがここにもありました。フォルダパスは3クリックで全選択している人が多い話フォルダパスを載せている部分は、局所的に赤くなっていました。3クリックで全選択しているのでしょう。コピーボタンでも設置しておけば、UX向上になるかもしれません。以前こちらのようなエントリを書かせて頂きました。ヒートマップをSlackに投稿して本作品の締めとしたいと思います。SlackにGoogleDriveのリンクを投稿する案で強引に進めます。セルに表示させ、半透明のページキャプチャを重ねます。それだけだと色がつかないため、Spreadsheetのお家芸"条件付き書式"で色を表示させます。GoogleDriveにアップロードするように設定しておきます。これで安心して眠れます。結局何が便利だったの...?色々書いたので、何が便利なのか整理します。GoogleTagManagerを使用していることから、汎用性が高いといえる。社内wikiにて実装が出来たため、その他社内サービスに横展開が出来る(改善欲はあるものの外部ツール入れる程でもない、というレベルの改善)Slackにクリックが投稿されるため、日々Slackでヒートマップライフが送れるまとめ今回非エンジニアとしてエンジニアの社内イベントに参戦しましたが、学びは大きかったです。自分のアウトプットを、普段とは違うものさしで評価される経験は貴重ですね。いった経験を今後も積み重ねていきたいと思います。ありがとうございました。システムのご紹介と2018年の人気書籍2019年、明けましておめでとうございます。...2017-11-14SwiftでRiemann球面を扱うこんにちは。iOSエンジニアの飯田@iida-hayatoです。参加してきました月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。