Configuring Operation

You can configure any clickable interactive element, such as registration, add to cart, download, mobile ad click, widget, Flash element, AJAX embedded element, and video playback, as an operation to monitor the response time experience during user operations.

Events are divided into two types:

Automatically created events: You can directly specify the key as the event name. Events with the same key will be classified as the same event.
Cross-page events.

Configuring Fault Tolerance Code

The basis of event monitoring is that the application must have the Browser JS agent embedded and loaded. To prevent event monitoring errors caused by the agent being removed or called before loading, be sure to add fault tolerance code before the event code, as follows:

// Fault tolerance code, declare once per page. Handles fault tolerance when tingyun_rum.js is removed
if(!window.TINGYUN){window.TINGYUN={};window.TINGYUN.newAction=function(){var e={};e.end=function(){};e.fail=function(){};e.store=function(){};return e};window.TINGYUN.endStoreEvent=function(){};};

If you do not add fault tolerance code, it is recommended to check the interface availability before calling:

For example:

if (window.TINGYUN && window.TINGYUN.newAction) {
    window.TINGYUN.newAction({
        ...
    });
}

Customizing User Operation

Syntax:

const action = window.TINGYUN.newAction(options[, immediate]);

Parameters:

options: Operation configuration object
- key: Operation name. String type. Required
- context: Additional data included in the operation. Object type. Optional
- duration: Set operation time. For immediate operations, you can use this to specify the operation time. Number type. Optional
- timeout: Operation timeout. Default is 10 minutes. Operations cannot be ended after timeout. Number type. Optional
immediate: Whether to send this operation immediately. Boolean type. Default is false. Optional

Return:

Returns the operation object action, which can be used to end the operation. The action object contains the following functions.

end: End operation

action.end(options);

options: End operation configuration object. Optional
- context: Additional data included in the operation. Object type. Optional
- status: Set operation status as success or fail, default is success. String type. Optional
fail: End operation with failure status

action.fail(options);

options: End operation configuration object. Optional
- context: Additional data included in the operation. Object type. Optional
store: Store operation. Operation information will be saved in localStorage and can be ended using window.TINGYUN.endStoredAction. Mainly used for cross-page operations. End stored operation:

action.store();

window.TINGYUN.endStoredAction(options);

options: End stored operation configuration object. Optional
- key: End the operation with the specified key. If not provided, ends the current stored operation. String type. Optional
- status: End status of the stored operation. success or fail. String type. Optional
- timeout: Set timeout. Default is 60s. If timeout, data will not be uploaded. Number type. Optional

Example:

Order submission scenario example:

function submitOrder(order) {
    // Create a submit order operation and pass the order id as extra information
    const action = window.TINGYUN.newAction({
        key: 'Submit Order',
        context: {
            orderId: order.id
        }
    });

    // Custom order submission business logic
    sendRequest(SUBMIT_ORDER_URL, data)
        .then((res) => {
            // On success, end the operation and set the returned business status code
            action.end({
                context: {
                    code: res.data.code
                }
            });
        })
        .catch(() => {
            // On failure, end the operation with failure status
            action.fail();
        });
}

Cross-Page Events

If an event needs to span pages under the same domain, use the cross-page event API (the cross-page event API can also be used on the same page, but the normal usage is more efficient and concise, so it is recommended to use this API only when cross-page is needed).

Embedding example:

Page 1:

const action = window.TINGYUN.newAction({
    key: 'Cross-Page Event'
});

// Execute logic
// After logic is complete, do not use end or fail, use store to temporarily store the current event
action.store();

// Subsequent logic jumps to page 2..

Page 2:

  // After page 2 loads, end the event
window.addEventListener('load', function() {
    if (window.TINGYUN && window.TINGYUN.endStoredAction) {
        window.TINGYUN.endStoredAction({
            key: 'Cross-Page Event', // Must match the event on page 1. If not provided, ends the most recent stored event
            status: 'success', // success or fail indicates the event status
            timeout: 60000 // Event timeout. If timeout, data will not be uploaded. Default is 60 seconds
        }); 
    }
})

If no parameters are provided, the most recent stored event is ended by default, with status success.

window.TINGYUN.endStoredAction();

Interface description:

window.TINGYUN.endStoredAction(); // Call without parameters
window.TINGYUN.endStoredAction(options); // Call with parameters

endStoredAction options object parameter description:

Name	Required	Description
key	No	Automatically end event by key. If provided, only ends the event with the specified key. If not, ends the current stored event
status	No	Automatically end event status. Default is success. success: success, fail: fail
timeout	No	Cross-page event timeout. Default is 60s. If timeout, data will not be uploaded

Handling and notes for cross-page events:

Only one cross-page event can be in progress at a time. Each call to the store function replaces the current cross-page event with a new one.
The agent data request will be sent on the page where the event is ended. If the page ending the event is not the same as the page starting the event, a page load information will be added as a network request upload by default.
Both page 1 and page 2 need to embed the code. The uploaded event belongs to the application where page 2 is embedded.
Page 1 and page 2 cannot be cross-domain.

Configuring Fault Tolerance Code​

Customizing User Operation​

Cross-Page Events​

Configuring Fault Tolerance Code

Customizing User Operation

Cross-Page Events