Overview

Skill Level: Any

Prerequisites

Before you do this task you must:

  • Install the UIC library
  • Run the Configuration wizard and enable DOM Capture
  • Set the DOM Capture options that you want

You can specify targets for your events. This specification is the same as configuring the module events. The targets can be specified by their IDs (HTML, XPATH, or CUSTOM) or by a CSS selector. If no target is specified, DOM Capture is triggered on each event instance.

For load and unload events, you can specify the screenview names. If no screenview name is specified, then the DOM Capture is triggered for each event occurrence.

In all cases, you can optionally use the delay parameter to specify a delay in milliseconds after which the DOM snapshot is taken.

 

Only DOM Capture is supported for hybrid apps that are instrumeted with Cordova

DOMdiff is not supported and must be disabled by setting difEnalbed: false,

Step-by-step

  1. Locate the event that you want to capture. For example, click, change, load, or unload.

  2. Optional: Specify a set of targets.

  3. Optional: Specify screenview names if you are configuring a load or unload event.

    Load and unload triggers support regex matching of screenview names. In the following example, the load trigger captures any screenview that has payment in it.

    event: "load",
    screenviews: [
    "root",
    { regex: "ˆpayment.*"}
    ]

    In this scenario a screenview that has the name paymentSubmit or paymentConfirmation will trigger the event.

  4. Specify a delay in milliseconds for the DOM capture to wait the snapshot is taken.

    This step is optional, except for load events. For load events, you must specify a 500ms delay.

    {
    event: "load",
    delay: 500
    }

     

  5. Specify queues for hybrid apps that are instrumented with Cordova.

    In the “queues” section, use the following:

    queues:[
    {
    qid: "DEFAULT",
    endpoint: "/TealeafTarget.php",
    maxEvents: 50,
    timerInterval: 300000,
    maxSize: 500,
    checkEndpoint: false,
    endpointCheckTimeout: 3000
    }
    

    If you already specified an endpoint in the native section and are not specifying an endpoint now, use the following in the “queues”section:

    queues: [
    {
    qid: "DEFAULT",
    endpoint: "",
    maxEvents: 50,
    timerInterval: 300000,
    maxSize: 500,
    
    }
    

    NOTE: All parameters in the above examples are recommended.

    The pako library is used for compressing data, which is required in the regular UIC SDK on the web but not hybrid apps. For this reason, you do not need to use the pako library with hybrid apps.

Expected outcome

Examples

  • This example shows how to configure DOM Capture to trigger whenever the user clicks an element with id “xyz” or any element with CSS class “domcapture”. Since delay is specified, the actual DOM snapshot will be taken ~500 milliseconds after the click event
{
event: "click",
targets: [
{
id: "xyz",
idType: -1
},
".domcapture"
],
delay: 500
}
  • This example specifies that a DOM snapshot is taken on each change event irrespective of the target element.
{
event: "change"
}
  • This example specifies that a DOM snapshot is taken when there is a screenview load event for “root” or “payment” screenviews. The snapshot will be taken after ~500-millisecond delay.
{
event: "load",
screenviews: [
"root",
"payment"
],
delay: 500
}

Join The Discussion

Your email address will not be published. Required fields are marked *