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

LogRocketとは

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

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

セットアップ

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

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

最後にこの画面がでれば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');

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

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

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