エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

『LogRocket』でサイト閲覧者の行動を動画で確認する(無料)【671日目】

LogRocketって?

JavaScriptタグをサイトのheadに埋め込むことで、サイト閲覧者の行動が、動画で保存できるよφ(・

logrocket.com

無料・5分で完了するから簡単。
もちろんはてなブログでも使えます。

手順

  1. アカウントを作成する
  2. プロジェクト名をつける
  3. タグを埋め込む

おしまい!

アカウント作成

f:id:willow710kut:20190814231854p:plain

『Get Started free』から登録。

GoogleGitHubでも登録可能

とりあえずさくっと登録しちゃいましょ。

プロジェクト名をつける

プロジェクト名をつけよう。

下のメアドの部分は、一つのサイトをみんなで共有とかしてたら、
管理画面を一緒に見たい人もいるでしょう。
そんなときに、管理画面を共有するメアドを登録出来るよ。

私みたいなぼっちには関係のない機能

f:id:willow710kut:20190814232145p:plain

サイトに設定をしよう

今回は、サイトはすでにあるので、
Script Tagって書いているところをクリック。

ここに書かれているJavaScriptのタグを、サイトの <head>タグの中にいれよう。

f:id:willow710kut:20190814232347p:plain

さあ、準備はおしまい。Go To Dashboard!

管理画面

管理画面自体は、個人情報多少入っているのでスクショはなし。

誰か一人でもアクセスしたら、画面中央右に動画の再生ボタンがあるよ。

その再生ボタンを押すと、ユーザーのマウスの動きやスクロールの情報が手に入りますφ(・

f:id:willow710kut:20190815203801p:plain

マウスの動きが取れるので、『あ、これコピペしてるな』みたいなのもわかったり。
サイトの閲覧者数がほどほどの人には、『ちゃんと読まれてるのかな?どこ読まれてるのかな?』
みたいなのがわかって、結構重宝すると思いますφ(・

本当に簡単なので、ぜひまずは使ってみてください!

おまけ。はてなブログでの設定

  1. 管理画面の設定をクリック
  2. 詳細設定をクリック
  3. headに要素を追加に、さっきのタグを貼り付け

でおしまい!