SPA(Single Page Application)サイトへの導入¶

SPA(Single Page Application)サイトにRepro Webを導入する方法について案内します。

SPAサイトへ導入する¶

SPAサイトでの導入方法を説明します。

SPAに対応しているライブラリには、「ブラウザのHistory APIを利用するもの」と「 onhashchange イベントを利用するもの」の2つがあり、Repro Webはどちらにも対応しています。

SPAモードをオンにする¶

Web SDKの導入タグの setup 呼び出し部分に、次のように spa_mode というプロパティを追加することでSPAモードがオンになります。

SPAモードをオンにする

reproio('setup', "YOUR_REPRO_SDK_TOKEN", { spa_mode: 'history' })

spa_mode の値には 'history' , 'hash' , 'none' の3つが指定可能で、導入先のサイトがページをどの様に識別して表示しているかに応じて設定をする必要があります。 URLのパスもしくはクエリ文字列で指定している場合は 'history' を、URLのハッシュで指定している場合は 'hash' を指定してください。 'none' を指定するとSPAモードはオフになります。この場合、SPAではない通常のサイトにおけるRepro Webの動作と同じになります。

その他、SPAモードではいくつか追加のオプションがあります。 setup API も参考にしてください。

SPAモードで変わること¶

SPAモードをオンにすると、通常の動作や機能に加えて次のような挙動が実現されます。

ページ遷移のたびにイベントトリガーに合致するイベントがトラックされます。
ページ遷移のたびに、設定情報およびメッセージのリストを取得した最後の日時をチェックし、その日時から一定の時間が経過していればメッセージのリストを再取得します。再取得する間隔は3分になります。
任意のタイミングで処理を実行することのできるコールバック機能が利用できるようになります。

コールバック関数を登録する¶

次のような形でコールバック関数を登録することで、あらかじめ用意された次のタイミングにおいて任意の処理を実行するよう指定することができます。この例ではSPAにおけるページ遷移のタイミングでブラウザのコンソールにログを出力しています。

コールバック関数を登録する

reproio('on', 'pagechange', () => {
  console.log('page changed!');
})

pagechange の値部分には以下の2つが指定できます。

init : 初回の設定情報の取得が完了したときにコールバックが実行されます。
pagechange : SPAにおけるページ遷移を検知したときにコールバックが実行されます。

SPAで構成されていないWebサイトでSPAモードをオンにする¶

SPAで構成されていないWebサイトでSPAモードをオンにした場合も、Repro Webは通常通り動作します。

SPAで構成されているが、特定のページのみSPAではないサイトでも、SPAモードをオンにしてください。

SPAサイトでユーザーIDをセットする¶

通常のサイトと同じ様に導入スニペットが実行されるタイミングでユーザーIDが決定している場合は、通常の導入手順と同じく reproio("setup", "YOUR_REPRO_SDK_TOKEN"); よりも前に reproio('setUserID') を設定してください。

サイト読み込み後にログイン処理が行われるなど、後からユーザーIDが決定される場合は、その時点で reproio('setUserID') と再度 reproio('setup', 'YOUR_REPRO_SDK_TOKEN') を呼び出すようにする必要があります。

注釈

setUserID を呼び出す際の挙動について：

同じユーザーIDで複数回呼び出された場合、リセット処理はスキップされ、既存のメッセージ表示状態が維持されます
異なるユーザーIDで呼び出された場合、内部状態がリセットされ、表示中のメッセージは閉じられます

サイト読み込み後にログイン処理を行い、ログインしたタイミングでコールバックを呼び出してユーザーIDをセットする場合のサンプルコードを提示します。

// User.auth はサンプルです
User.auth(id, password, {
    // ログインに成功
    success: function(user) {

        // user.idにユーザーIDが入っていると仮定しています
        reproio("setUserID", user.id);
        reproio("setup", "YOUR_REPRO_SDK_TOKEN");

        // ログイン後の処理
        ...
    },
});