Advanced scenarios

This topic describes the SDK usage in complex scenarios.

SPA page reporting

In a single page application (SPA), a page will only be refreshed once. Traditionally, PV is only reported once after the page is loaded. However, PVs of sub-pages cannot be collected, and logs of other types cannot be aggregated to corresponding sub-pages.

The SDK provides two methods for processing SPA pages.

1. Enable automatic SPA resolution

This method is applicable to most SPAs that use URL hash as the route.

In initial configuration items, hashchange event listening on the page is enabled if enableSPA is set to true (re-reporting PV will be triggered), and URL hash is used as the page field for reporting other data.

<Function>parseHash can be used together with enableSPA. For more information, see SDK configuration items.

2. Manually report data

This method is applicable to all SPA scenarios. Use this method if the first option doesn’t work.

The SDK provides the setPage method for manually updating page name during data reporting. When this method is called, page PV will be reported again by default.

Example

// Listens for an application route change event
app.on('routeChange', function (next) {
    __bl.setPage(next.name);
});

Pre-report data

Scenario 1: Some data needs to be reported when a page is being loaded, when the SDK initialization may not be complete yet (or it is not clear if the SDK initialization is complete).

Scenario 2: The setConfig method is called in the application initialization logic. However, because the SDK is asynchronously loaded, the loading may not be complete yet.

Solution: The SDK adds the pipe attribute to the __bl object and caches pre-called information into this variable.

For example:

__bl.pipe = [
    // Use HTML of the current page as an API for reporting.
    ['api', '/index.html', true, performance.now, 'SUCCESS'],
    // After SDK initialization is complete, enable automatic SPA resolution.
    ['setConfig', {enableSPA: true}]
];

To report a single data record, use:

__bl.pipe = ['msg', 'I'm another generic message'];

The zeroth number in the array is the method name, followed by input parameters.After the SDK initialization is complete, it calls methods and parameters attached to window.__bl.pipe one by one.

NOTE: Before the SDK initialization is complete, if the value of __bl.pipe is set multiple times, the last value takes precedence.

pipe can be called after the SDK initialization is complete on Internet Explorer 9 or a later version. You can use this method if you are not sure about if the SDK initialization is complete and you don’t want to employ complex judgment logic either.

Example:

In an SPA, after autoSend: false is set, report PV for the first time after application initialization. However, it’s not clear that if the SDK initialization is complete or not.

// Set the name of the page to 'homepage' and report PV.
__bl.pipe = ['setPage', 'homepage'];