Implement to SPA(Single Page Application) site¶

This section provides information on how to implement Repro Web on a SPA(Single Page Application) site.

Introducing to SPA site¶

The following section explains how to implement web SDK on the SPA site.

There are two types of libraries that support SPA mode: those that use the browser's History API, and those that use onhashchange event, Repro Web supports both.

Turn on SPA mode¶

SPA mode can be turned on by adding the spa_mode property to the setup call in the introduction tag of the Web SDK, as follows.

Turn on SPA mode

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

There are three possible values for spa_mode: 'history', 'hash', and 'none', settings should be made according to how the destination SPA site specifies and displays pages. Specify 'history' for URL paths or query strings, or 'hash' for URL hashes. If 'none' is specified, SPA mode is turned off. In this case, the behavior of Repro Web will be the same as that of a normal non-SPA site.

There are some other additional options in SPA mode. See also setup API options.

Some behaviors changes in SPA mode¶

When the SPA mode is turned on, the following behaviors are realized in addition to the normal operations and functions.

Each time when a page transition is made, the event matches the Event Trigger will be tracked.
After each page transition, the last time of the list of configuration information and messages was retrieved is checked, and If a certain amount of time has passed since that time, the list will be retrieved again. The interval for reacquisition will be 3 minutes.
The callback function that allows processing to be executed at arbitrary times is available.

Register a callback function¶

By registering a callback function in the following form, It is possible to specify that an arbitrary process is to be executed at the following pre-defined timing. In this example, a log is output to the browser console at the timing of page transitions in the SPA.

Register a callback function

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

The value part of pagechange can be one of the following two options.

init : The callback will be executed when the initial configuration information is obtained.
pagechange : The callback is executed when a page change is detected in the SPA.

Turn on SPA mode on site that are not configured with SPA¶

If SPA mode is turned on for a website that is not configured with SPA, Repro Web will still work as usual.

Even if your site consists of SPA but only certain pages are not SPA, please turn on SPA mode.

Set User ID on the SPA site¶

If the user ID is determined at the time the installation snippet is executed, as in the normal site, set reproio("setup", "YOUR_REPRO_SDK_TOKEN"); before reproio("setup", "YOUR_REPRO_SDK_TOKEN"); as in Normal Installation Procedure .

If the user ID is determined later, such as during the login process after the site is loaded, reproio('setUserID') and reproio('setup', 'YOUR_REPRO_SDK_TOKEN') should be called again at that point.

Note

Behavior when calling setUserID:

When called multiple times with the same user ID, reset processing is skipped and existing message display state is maintained
When called with a different user ID, the internal state is reset and any displayed messages are closed

Sample code is presented for a case where the login process is performed after the site is loaded, and a callback is called to set the user ID when the user logs in.

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

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

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