Tampermonkeyを使用したTealeaf UI Capture SDKのテスト方法

#Tampermonkeyを使用したTealeaf UI Capture SDKのテスト方法
この記事ではIBM Tealeaf (Acoustic Experience Analytics） UI Capture SDKをブラウザの拡張機能であるTampermonkeyを使用してテストする方法を記載します。
これによりWebサイトにUIC SDK（JavaScript）を実装する前にテストを実施することができます。
またデモのために既存Webサイト上の行動（ページ遷移やクリック、文字入力、プルダウン選択等）をTealeafでリプレイすることができます。

##1. Tampermonkeyのインストール
ChromeにTampermonkeyをインストールします。
https://www.tampermonkey.net/

##2. Tampermonkeyの設定
Chromeの拡張機能を開き、Tampermonkeyの詳細をクリックします。

「ファイルのURLへのアクセスを許可する」を有効化します。

##3. UserScriptの作成
Tampermonkeyのダッシュボードを開き、新規スクリプトを作成します。
以下はデフォルトの設定です。

UserScript

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

必要な設定は以下です。

1. @matchにテスト対象WebサイトのURLを指定
2. @requireの行を追加し、UIC SDKの保存先ディレクトリを指定
3. functionは削除
   それ以外の@nameなどの設定は任意で構いません。

tealeaf_sample

// ==UserScript==
// @name         Sample
// @namespace    Sample
// @version      0.1
// @description  Tealeaf
// @author       You
// @match        https://qiita.com/*
// @grant        none
// @require      file:///C:/js/tealeaf_5.6.0.js
// ==/UserScript==

##4. 送信データの確認
設定を保存してTampermonkeyを有効化したら、@matchに指定したWebサイトにアクセスし、ページの遷移やクリックを行います。

F12でデベロッパーツールを開き、Networkタブを開きます。"collectorPost"があればTealeafにデータが送信されていることが分かります。もし見つからなければ設定を見直してください。

##5. リプレイの確認
Tealeafにログインし、自分のセッションを検索・リプレイします。
自分が操作した通りに再生されれば完了です。