「バグったって言われたけど、どうやっても動作再現できない・・・」みたいなことありませんか？
先日のWordBench京都・大阪合同会の懇親会で面白いサービスを教えてもらったので、早速入れてみました。

LogRocketとは

「バグがなぜ起きたのかを想像するのはもうやめよう」みたいな感じですかね

JavaScriptでユーザーの行動をトラッキングしてくれるオンラインサービスです。

無料から始めることができる様子で、保存するセッション数や参加ユーザーによって月額プランへ変更を促すスタイルです。

セットアップ

アカウントはGoogle / GitHubのアカウントから作ることもできます。

“Sign Up”を押すと出る画面

アカウントを作ると、トラッキングするプロジェクトの登録画面が出ます。
プロジェクトの名前や、管理ユーザーの登録をここで済ませましょう。

トラッキングするプロジェクトの情報など

最後にこの画面がでればOKです。あとは自分のアプリに組み込んでいきましょう。

ライブラリインストールを促される

サービスへの組み込み

ここからは実際にアプリに組み込みしていきます。
今回はCreate React Appで作られたアプリを想定しています。

Reactアプリへの組み込み

ライブラリの追加

先ほどのチュートリアルを見るとnpm i --save logrocketしてくださいと書かれています。
ですのでここはあえてYarnでいれてみましょう。

$ yarn add logrocket

Reactアプリへ組み込む

src/index.jsに以下のコードを追加します。

import LogRocket from 'logrocket';
LogRocket.init('jlpbmj/wp-kyoto');

jlpbmj/wp-kyotoの部分はアカウント・プロジェクトによって変わる様子なので、必要に応じて書き換えてください。

おわり

じつはやることはこれだけです。

yarn startしてローカル環境でアクセスすると、録画されたものがすでにダッシュボードから確認できます。

録画一覧

キャプチャは動画で見れる

webサイトへ組み込む

npmのインストールコマンドが紹介されているページにSCRIPT TAGというタブがあります。
これをクリックすると、以下のようなJSタグが表示されます。

<script src="https://cdn.logrocket.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('PJID/PROJECT_NAME');</script>

この２行をサイトに追加することで、通常のwebサイトでもLogRocketを使うことができます。

WordPressサイトに組み込む

公式のプラグインなどはなかったので、とりあえずざっとこんな感じのコードをhello.phpにでも書いておきましょう。
Hello Dollyプラグインは、プラグインを作るのがめんどくさいけどちょっとしたスニペットを組み込みたい時に使うと便利なのです。

function insert_logrocket_script() {
    wp_enqueue_script( 'logRocket', 'https://cdn.logrocket.com/LogRocket.min.js', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'insert_logrocket_script' );

function insert_logrocket_code() {
?>
<!-- [Logrocket code] -->
<script>window.LogRocket && window.LogRocket.init('PJID/PROJECT_NAME');</script>
<!-- [/Logrocket code] -->
    <?php
}
add_action('wp_head', 'insert_logrocket_code');

インテグレーションも豊富

まだインストールしてみただけですが、管理画面をざっと見た感じですとかなり拡張性が高そうです。

ReduxやRN向けのプラグインなど

IntercomやZendeskなどのサポートチャットや、GitHub / Rollbarなどと連携することもできる様子した。

Tag: LogRocket

LogRocketを使って動画でユーザーの動きについてトラッキングする