All Products
Search

This Product

    Mobile Platform as a Service:Automatic HTML5 container tracking

    Document Center

    Mobile Platform as a Service:Automatic HTML5 container tracking

    Last Updated:Mar 22, 2021

    When the Nebula container provided by mPaaS is used to load an HTML5 page, the Nebula container will automatically collect statistics on page loading actions and performance, and capture exceptions to help you track data about HTML5 page loading. This topic describes how to integrate the Nebula container automatic tracking function and view tracking data.

    Prerequisite

    To integrate the automatic HTML5 container tracking function provided by mPaaS, ensure that:

    • You have created an app on the mPaaS console.
    • You have completed the steps to add the SDK , and the client project has integrated NebulaLogging.framework.

    Procedure

    Initialize configurations

    1. To integrate the automatic tracking function of the Nebula container, enable HTML5 tracking monitoring during container initialization.
      1. // Monitoring delegation. Add automatic HTML5 container tracking.
      2.  NBLogConfigurationGet().shouldInjectSPMJS=YES;
      3.  #ifdef DEBUG
      4.  NBLogConfigurationGet().enableConsoleLog = YES;
      5.  #endif
      6.  [NBLogServiceGet() start];
      7.  [[NBMonitor defaultMonitor] setDelegate:NBLogServiceGet()];
    2. When the Nebula container is used to load an HTML5 page after HTML5 tracking monitoring is enabled, the container will automatically collect statistics on page loading actions, performance, and exceptions. Based on the scenarios of viewing tracking data, there are two methods:
      • View client logs: View local tracking data on the client. This mode applies to troubleshooting in the app development phase. See View client logs.
      • View server logs: View actual tracking data generated for online users. This mode applies to online troubleshooting after an app is released online. See View server logs.

    View client logs

    After an HTML5 page is loaded, search the keyword [h5log] on the Xcode console to view key information about tracking data related to page loading, as shown in the following figure.

    client logs

    The following table lists the key information included in the HTML5 container tracking data output by the Xcode console.

    SeedId Example Description
    bizType webapp Log type. Written into the file name of the local log file.
    seedId H5_AL_SESSION_FROM_NATIVE Unique tracking ID. For detailed description, see
    HTML5 container tracking sets.
    head HD-VM Log model. See Performance tracking.
    params https://www.baidu.com URL of the current page.
    currentTimestamp=1553072784000 Custom parameter, such as the timestamp and page loading status.
    - Custom parameter, such as the page element position.
    ^url=https://www.baidu.com^referer=MPH5DemoVC^viewId
    =MPH5DemoVC^refviewId=MPHomeViewController^token=
    A994169ddd50640fa262dbc2dfebb2bb3^h5SessionToken=
    db4db9cfd83521aa2bc31a2e5a6df30e/td>     		Tracking information:
    Including offline package app ID, offline package version number,
    URL loaded by the current HTML5 page, VC class name,
    and token of the current page.
    formatter header = "HD-VM" Same as the description of the head field.

    To view the complete content of a log record on the Xcode console, find the file whose name begins with bizType under the Library/log directory in the sandbox, and then search by the keyword seedId.

    client logs

    View server logs

    To view HTML5 container tracking data of an online user, search for the data through Log replays on the mPaaS console.

    server log

    HTML5 container tracking sets

    Automatic tracking data measured by the HTML5 container is uniquely identified by seedId. There are three types of tracking sets based on the HTML5 page loading method.

    • Tracking set regarding opening online URLs
    SeedId Description
    H5_AL_SESSION_FROM_NATIVE The container has been started.
    H5_AL_PAGE_START Page loading begins.
    H5_AL_NETWORK_START The page starts to send network requests.
    H5_OPEN_PAGE_FINISH Page loading is complete.
    H5_AL_PAGE_APPEAR The page appears for the first time.
    H5_AL_JSAPI_SENDEVENT A page calls a JSAPI.
    H5_AL_JSAPI_NOTFOUND JSAPI call on HTML5 page failed.
    H5_TITLEBAR_BACK_BT The Back button on the navigation bar is tapped.
    H5_PAGE_PERFORMANCE The page loading performance is measured.
    • Tracking set regarding opening offline package pages
    SeedId Description
    H5_APP_REQUEST Request offline package information.
    H5_APP_LOAD_DATASOURCE Load offline package information.
    H5_AL_SESSION_FROM_NATIVE The container has started.
    H5_APP_DOWNLOAD Download an offline package.
    H5_APP_UNZIP Decompress an offline package.
    H5_APP_POOL Perform operations on the package management information pool, including adding, deleting, and modifying information in the pool.
    H5_APP_VERIFY Perform signature verification for an offline package.
    H5_AL_SESSION_VERIFYTAR_FAIL Signature verification for an offline package failed.
    H5_AL_PAGE_START Page loading begins.
    H5_AL_SESSION_MAP_SUCCESS A local offline package is loaded successfully.
    H5_AL_SESSION_FALLBACK Loading a local offline package failed. A fallback function is executed to request an online page.
    H5_OPEN_PAGE_FINISH Page loading is complete.
    H5_AL_PAGE_APPEAR The page appears for the first time.
    • Exception tracking set
    seedId Description
    H5_AL_NETWORK_PERFORMANCE_ERROR Resource request exception.
    H5_PAGE_ABNORMAL Page exception.
    H5_AL_PAGE_JSERROR JS exception.
    H5_AL_JSAPI_RESULT_ERROR JSAPI exception.