Tealeaf Web SDK JSON message types

Data TypeDescription
Client Framework data (JSON)If you are using step-based eventing, data from the client framework is submitted in JSON format and is available through Browser-Based Replay for review and eventing. The JSON data format is documented here with examples. For information about creating Tealeaf events based on this data format can be found here: For Tealeaf on-premise: Step-Based Eventing. For Tealeaf on cloud: Use JSON data to create events and step attributes.

Web SDK message format

The Web SDK uses JSON to communicate with the servers. The data comprising of user interaction, document HTML, and page lifecycle events are assembled into an array of messages. This list of messages, along with information about the client environment and additional metadata about the page, is packaged into an HTTP POST request.

{
    "messageVersion": "12.0.0.0",
    "serialNumber": 1,
    "sessions": [{
            "id": "P.9XKTWLGKPJRXJRW9PZPYHEFSUV9D",
            "tabId": "SYM6",
            "startTime": 1600214929095,
            "timezoneOffset": 420,
            "messages": [{
                    "type": 2,
                    "offset": 15,
                    "screenviewOffset": 0,
                    "count": 1,
                    "fromWeb": true,
                    "screenview": {
                        "type": "LOAD",
                        "name": "root",
                        "originalUrl": "/h4/",
                        "url": "/h4/",
                        "host": "http://uictest.com",
                        "referrer": "",
                        "title": "HTML 4 Test Elements",
                        "queryParams": {}
                    },
                    "dcid": "dcid-1.1600214929110s"
                }, {
                    "type": 12,
                    "offset": 40,
                    "screenviewOffset": 25,
                    "count": 2,
                    "fromWeb": true,
                    "domCapture": {
                        "root": "<html>...</html>",
                        "charset": "windows-1252",
                        "host": "http://uictest.com",
                        "url": "/h4/",
                        "fullDOM": true,
                        "forced": false,
                        "mutationCount": 0,
                        "dcid": "dcid-1.1600214929110s",
                        "eventOn": true
                    }
                }
            ],
            "clientEnvironment": {
                "webEnvironment": {
                    "libVersion": "6.1.0.XXXX",
                    "buildNote":"r3 MP 12/7/2020",
                    "domain": "uictest.com",
                    "page": "http://uictest.com/h4/",
                    "referrer": "",
                    "mouseMovement": true,
                    "screen": {
                        "devicePixelRatio": 1.25,
                        "deviceWidth": 1536,
                        "deviceHeight": 864,
                        "deviceToolbarHeight": 40,
                        "width": 1536,
                        "height": 722,
                        "orientation": 0,
                        "orientationMode": "PORTRAIT"
                    }
                }
            }
        }
    ]
}

The Web SDK Post Request body contains the following metadata.

Property nameData typeDescription
messageVersionStringA version string associated with the JSON schema. This is used for synchronizing between the Tealeaf SDK and server.
serialNumberIntegerIndicates the serial number of the request. The Web SDK can make multiple requests from the same page instance. This field is used to process the requests in the correct order during replay.

Sessions

The Sessions object contains the following information.

Property nameData typeDescription
idStringThe id of the current page
startTimeIntegerAn absolute time stamp (milliseconds since Jan 1, 1970 Coordinated Universal Time ) indicating when the Web SDK was loaded on the current page instance.
tabIdStringA randomly generated unique identifier for the current browser tab.
timezoneOffsetIntegerThe difference, in minutes, between UTC and local time.
messagesArrayEvents observed by the Tealeaf SDK.
clientEnvironmentObjectObject that contains user device and browser data.

Client Environment

The Client Environment object contains general information about the device and the browser window.

PropertyData typeDescription
libVersionStringWeb SDK version string
buildNoteStringOptional text which is specified in the core configuration.
domainStringThe document domain as obtained from window.location.hostname
pageStringThe document URL as obtained from window.location.href
referrerStringThe referrer URL as obtained from document.referrer
mouseMovementBooleanTrue if the mousemove event is triggered on the page.
devicePixelRatioNumberThe physical to CSS pixel ratio as obtained from window.devicePixelRatio
deviceWidthIntegerThe screen width as obtained from window.screen.width
deviceHeightIntegerThe screen height as obtained from window.screen.height
deviceToolbarHeightIntegerThe difference between the screen height and that available for web content as obtained from window.screen.availHeight
widthIntegerViewport width as obtained from window.innerWidth
heightIntegerViewport height as obtained from window.innerHeight
priorPage.pageStringURL of the previous page on which the Web SDK was initialized.
priorPage.terminationReasonStringReason Web SDK terminated on the previous page. Possible values include: "unload", "inactivity", "killswitch".

Web SDK Message Types

The messages sent by the Web SDK can be of multiple types with each message type having its own structure. The following table summarizes the message types used by the Web SDK.

TypeMessage typeTealeaf SDK support Web/iOS/AndroidDescription
1Client state messageWeb/iOS/AndroidClient information such as page and viewport width/height, device orientation. The message is logged during page load/unload, scroll and resize.
2Screen view messagesWeb/iOS/AndroidIndicates when a web page or view (screen) is loaded or unloaded. Logical views can be defined by the application using the associated screenview logging API.
3Connections messagesiOS/AndroidNetwork request information.
4User interaction messages Web/iOS/AndroidUser interaction information with UI controls such as button clicks or text input.
5Custom Event messagesWeb/iOS/AndroidLogged when the application invokes the logCustomEvent API.
6Exception messages Web/iOS/AndroidException information including url, line number and error message.
7 Performance Timing messagesWeb SDKInformation gathered using the W3C Navigation Timing API.
9Hover messages Web SDKMouse hover and hover-to-click activity for Overstat reporting.
10Layout messagesiOS/AndroidLayout information for iOS and Android app. replay.
11Gesture messages Web/iOS/AndroidTouch gesture information such as tap, swipe, pinch etc.
12 DOM Capture messagesWeb SDKHTML snapshots of web apps for replay.
13GeoLocation messages Web/iOS/AndroidGeolocation information including latitude and longitude.
14Cookie messages Web SDKApplication cookie information.
15 Form Completion messagesWeb SDK
16 Data Limit messagesWeb SDKMessage limit notification.
17Performance Alert messageWeb SDKPerformance alert messages.
18Mousemove messagesWeb SDKAny object that contains information about mouse movement messages.
19Data LayerWeb SDKApplication data layer log.

Message header

The message header is common across all message types. The message header contains the following properties:

Property nameData typeDescription
CountIntegerThe serial number of the message. Resets on a new page navigation.
fromWebBooleanIndicates if the message originated from the Web SDK. True for messages originating from the Web SDK. False for messages originating from iOS and Android SDKs.
offsetIntegerMilliseconds since the Web SDK initialized on the page.
screeviewOffsetIntegerMilliseconds since the most recent screenview LOAD event.
typeIntegerThe message type as shown in the Message types table.

Message Body

Depending on the message type being sent the message will have additional properties as follows:

Type 1 Client State message

This message type contains information related to the dimensions of the content and the viewport. It is logged by the Web SDK after page load, resize, scroll and unload events. For page scroll events, the Web SDK consolidates the scrolling action which can result in hundreds of individual scroll events into a single message.

Property nameData typeDescription
deviceOrientationIntegerThe orientation of the device in degrees.
0 = Portrait (default), width < height
90 = Landscape, width > height
The following are additional values for devices that provide detailed orientation information.
-90 = Landscape, device turned clockwise
180 = Portrait, device inverted
deviceScaleStringRatio between the screen width and the viewport width.
eventStringThe event that triggered the client state information to be logged. This can be “load”, “scroll”, “resize” or “unload”.
pageWidthIntegerThe width of the document element.
pageHeightIntegerThe height of the document element.
viewPortWidthIntegerThe width of the browser window.
viewPortHeightIntegerThe height of the browser window.
viewPortXIntegerThe horizontal scroll value in pixels.
viewPortYIntegerThe vertical scroll value in pixels.
viewPortXStartIntegerThe horizontal scroll value at the start of the current scroll event.
viewPortYStartIntegerThe vertical scroll value at the start of the current scroll event.
viewTimeIntegerMilliseconds viewing the page before the current scroll event. For the “attention” event, this represents the time on the page since the load event.

Example

{
	"type": 1,
	"offset": 11486,
	"screenviewOffset": 11468,
	"count": 8,
	"fromWeb": true,
	"clientState": {
		"pageWidth": 1519,
		"pageHeight": 1562,
		"viewPortWidth": 1536,
		"viewPortHeight": 754,
		"viewPortX": 0,
		"viewPortY": 329,
		"deviceOrientation": 90,
		"event": "scroll",
		"deviceScale": "1.000",
		"viewTime": 8688,
		"viewPortXStart": 0,
		"viewPortYStart": 0
	}
}

Type 2 Screenview message

This message type indicates a logical screen change within the context of a single page. In an extreme case, for a single page app there will be only one page load event even though the visitor may experience the app in the form of multiple distinct screens.
These screens are represented in the Tealeaf data stream using the type 2 screenview messages. These messages can come from the following sources:

  1. Built-in defaults: The Web SDK will log a type 2 screenview message corresponding to page load and unload. The screenview name for this built-in message is either the URL hash fragment (location.hash) or "root" if there is no URL hash fragment. The Web SDK can optionally be configured to always log the initial screenview name as "root" irrespective of the URL hash fragment. Refer to Screenview loads are associated with the URL fragment for details. When configured to do so, the Web SDK will also log a type 2 screenview message corresponding to the load of any frame/iframe content. The screenview name for this built-in message is "rootWithFrames".
  2. Automatic detection: The Web SDK will automatically detect when the URL hash changes and it will log a screenview message. In this case, the screenview name will be the value of the URL hash and depend on the application. e.g. "#checkout", "#billing", "#confirmation" etc.
    The Web SDK will also detect changes to the URL made by the app using the HTML5 History API which does not result in a new page load. Such URL path changes would also result in a screenview message being logged with the screenview name as the URL path.
    Automatic detection is enabled by default.
  3. Screenview logging API: The application can be instrumented to use the TLT.logScreenviewLoad and TLT.logScreenviewUnload API. The screenview message will use the screenview name that was passed to the API.
Property nameData typeDescription
dcidStringDOM Capture identifier for matching this type 2 message with the corresponding type 12 DOM Capture message.
hostStringThe protocol and host (HTTP origin) of the page.
nameStringThe screenview name. Refer to the prior explanation for how this name is derived.
referrerStringThe referring screenview name. This is only required when nesting child screens within a parent screen. e.g. “#creditcard” screenview nested within the “#payment” screen would have “#payment” as the referrer screenview. Screenview nesting can only be indicated through the logging API. The automatic detection cannot identify nested screens.
typeString“LOAD” or “UNLOAD”
urlStringThe URL path of the page.

Example 1

{
	"type": 2,
	"offset": 12,
	"screenviewOffset": 0,
	"count": 1,
	"fromWeb": true,
	"screenview": {
		"type": "LOAD",
		"name": "root",
		"url": "/h4/",
		"host": "https://www.uictest.com",
		"referrer": ""
	},
	"dcid": "dcid-1.1552689763486s"
}

Example 2

{
	"type": 2,
	"offset": 13460,
	"screenviewOffset": 0,
	"count": 7,
	"fromWeb": true,
	"screenview": {
		"type": "LOAD",
		"name": "#payment",
		"url": "/checkout",
		"host": "https://www.uictest.com",
		"referrer": ""
	},
	"dcid": "dcid-2.1552951476924s"
}

Type 4 User Interaction message

This message provides information related to the user interaction with the various elements and controls on the page. Multiple consecutive interactions with a single control are consolidated into a single message. For example, a user clicking/tapping on a text input and typing some text into the control will result in the co-ordinate information from the click/tap event being consolidated with the text information from the change event.

Property nameData typeDescription
accessibility.idStringOptional property containing the aria-label attribute value of the target element.
currStateObjectObject containing the current state information of the target control.
dcidStringDOM Capture identifier for matching this type 4 message with the corresponding type 12 DOM Capture message.
dwellIntegerMilliseconds between the control receiving focus and the current event.
eventObjectObject containing the event type corresponding to the user interaction.
focusInOffsetIntegerMilliseconds since Web SDK initialized on the page and when this control received focus.
idStringUnique identifier for the target element with which the user interaction occurred. This will usually be the HTML id of the element. If the element does not have a HTML id attribute then the Web SDK will derive an XPath value by tracing the location of the element in the DOM tree. If the application uses an attribute other than HTML id to uniquely identify the element then the Web SDK can be configured to use this attribute to generate the id.
idTypeIntegerEnumerated value indicating if the id string is HTML ID (-1), XPath (-2) or based on a configured Custom Attribute (-3)
isParentLinkBooleanTrue if the target element is a child of a link element.
NameStringName attribute of the HTML element (if any)
positionObjectObject containing position information for the target element and mouse/tap information.
position.widthIntegerWidth of the target element in pixels.
position.heightIntegerHeight of the target element in pixels.
position.relXYStringRelative x,y position of the click/tap event on the target element.
tlTypeStringType of the target element.
visitedCountIntegerNumber of times the element was visited during this screenview. To count as a distinct visit, the element must lose and regain focus.

Example

{
    "type": 4,
    "offset": 68764,
    "screenviewOffset": 68750,
    "count": 24,
    "fromWeb": true,
    "target": {
        "accessibility": {
            "id": "Continue to payment details."
        },
        "id": "continueBtn",
        "idType": -1,
        "name": "buttonInput",
        "tlType": "button",
        "type": "input",
        "position": {
            "width": 80,
            "height": 20,
            "relXY": "0.4575,0.7103"
        },
        "currState": {
            "value": "Continue"
        },
        "subType": "button",
        "isParentLink": false,
        "visitedCount": 1,
        "dwell": 123
    },
    "event": {
        "tlEvent": "click",
        "type": "click"
    },
    "focusInOffset": 68751,
    "dcid": "dcid-4.1553119039524"
}

Type 5 Custom event message

This message logs application-specific information that the UIC wouldn’t typically capture SDK. The TLT.logCustomEvent API can be used by the application to log this message. Application-specific information includes user input validation results, transaction processing details, and performance instrumentation metrics.

Property nameData typeDescription
dataObjectThe JSON object containing application specific data as provided to the logging API.
nameStringThe name of the custom event as provided to the logging API.

Example

{
	"type": 5,
	"offset": 315340,
	"screenviewOffset": 315323,
	"count": 8,
	"fromWeb": true,
	"customEvent": {
		"name": "payment",
		"data": {
			"status": "success",
			"statusCode": "123",
			"details": {
				"processingTime": 325,
				"serverCode": "XYZ456"
			}
		}
	}
}

Type 6 Exception message

This message provides information regarding JavaScript errors and uncaught exceptions occurring in the application. Error messages can also be explicitly logged by the application using the TLT.logExceptionEvent API.

Property nameData typeDescription
descriptionStringException or error message.
lineInteger(Optional) Line number within the resource where the exception or error occurred.
repeatsInteger(Optional) The number of repeat occurrences of the same Exception or error message on the page.
urlString(Optional) URL of the resource where the exception or error occurred.
{
	"type": 6,
	"offset": 9306,
	"screenviewOffset": 9290,
	"count": 9,
	"fromWeb": true,
	"exception": {
		"description": "Uncaught ReferenceError: badFunction is not defined",
		"url": "http://uictest.com/h4/",
		"line": 93,
		"repeats": 7
	}
}

Type 7 Performance message

This message provides information regarding the W3C Navigation Timing properties. In addition, this message has the render time of the page calculated as the difference between the domLoading and loadEventStart timing properties.

This message does not report timing information for each screenview within a single page app. For a Single Page Application(SPA), the browser provides only the Performance Navigation Timing for the initial page load. It does not track the virtual page transitions (screenviews) which occur within the SPA context. Since the browser does not provide any rendering performance data, it is up to the application to try and achieve an approximation of the page render time for the screenview transitions.

Depending on the application architecture, there can be several proxies that can provide an indication of the screenview render time.

  • In most cases, this metric corresponds to the duration of the AJAX network request that is responsible for fetching the content or data to be displayed for the new screen. If the application uses the AjaxListener module, this timing information should already be available in the Tealeaf session.
  • Another approximation for the screenview render time could be to use the time during which the spinner is enabled. If you already use the spinner in a delayUntil trigger for DOM capture, use the difference in time between the type 2 screenview load and the corresponding type 12 DOM capture as the approximate screenview render time.
  • In some cases, applications may perform multiple network requests and/or extensive client-side processing of the network response data before rendering it on the screen. In such cases, applications will need to measure the end-to-end time from the initial request for the new screen to the final DOM update, which completes the rendering process. The application can then log this measured time as a custom event.

For monitoring screenview level timing within a single page app., the application will have to insert markers within the Tealeaf JSON stream using the TLT.logCustomEvent API to indicate when the screenview load is started and completed.

TypeStringString value “NAVIGATE”, “RELOAD” and “BACKFORWARD” representing the three W3C Navigation types.
redirectCountIntegerW3C redirect count property
renderTimeIntegerDifference between domLoading and loadEventStart properties.
navigationStartIntegerAbsolute timestamp as defined by W3C navigation start property. Used as an epoch to calculate offset values of all other W3C timing properties reported in the message
unloadEventStart
unloadEventEnd
redirectStart
redirectEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
connectEnd
requestStart
responseStart
responseEnd
domLoading
domInteractive
domComplete
loadEventStart
loadEventEnd
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer
Integer







Each of these properties represent the offset value in milliseconds from the navigationStart epoch. Their definitions are in the W3C PerformanceTiming interface specification.
{
	"type": 7,
	"offset": 10,
	"screenviewOffset": 1,
	"count": 2,
	"fromWeb": true,
	"performance": {
		"timing": {
			"navigationStart": 1567635482455,
			"unloadEventStart": 14,
			"unloadEventEnd": 14,
			"redirectStart": 0,
			"redirectEnd": 0,
			"fetchStart": 2,
			"domainLookupStart": 2,
			"domainLookupEnd": 2,
			"connectStart": 2,
			"connectEnd": 2,
			"secureConnectionStart": 0,
			"requestStart": 4,
			"responseStart": 10,
			"responseEnd": 11,
			"domLoading": 16,
			"domInteractive": 20,
			"domContentLoadedEventStart": 20,
			"domContentLoadedEventEnd": 20,
			"domComplete": 256,
			"loadEventStart": 256,
			"loadEventEnd": 257,
			"renderTime": 245
		},
		"navigation": {
			"type": "RELOAD",
			"redirectCount": 0
		}
	}
}

Type 9 Hover message

This message logs the hover location and duration of the mouse or pointer device. Hover durations exceeding a configured threshold are recorded. The default is 1 second. This message is logged only if the Overstat module is enabled.

PropertyData typeDescription
hoverDurationIntegerThe hover duration in milliseconds.
hoverToClickBooleanTrue if the hover ended with a click on the target element. False otherwise.
TargetObjectRefer to the type 4 message description for definitions.
{
	"type": 9,
	"offset": 5542,
	"screenviewOffset": 5532,
	"count": 4,
	"fromWeb": true,
	"event": {
		"hoverDuration": 3578,
		"hoverToClick": false
	},
	"target": {
		"id": "[[\"html\",0],[\"body\",0],[\"h1\",0]]",
		"idType": -2,
		"name": "",
		"tlType": "h1",
		"type": "H1",
		"subType": "",
		"position": {
			"width": 1536,
			"height": 36,
			"relXY": "0.2011,0.9045"
		}
	}
}

Type 11 Gesture messages

This message provides information about the high level gesture event that was interpreted by processing one or more touch events. This interpretation is provided by a 3rd party library called HammerJS.

Property nameData tpeDescription
TypeStringThe type of gesture such as “tap”, “doubletap”, “pinch” or “swipe”
TouchesArrayAn array of touch objects used to interpret the gesture.

Gesture message examples

Example 1

{
	"type": 11,
	"offset": 27790,
	"screenviewOffset": 27469,
	"count": 17,
	"fromWeb": true,
	"event": {
		"tlEvent": "tap",
		"type": "tap"
	},
	"touches": [
        [
            {
				"position": {
					"y": 635,
					"x": 604
				},
				"control": {
					"position": {
						"width": 220,
						"height": 42,
						"relXY": "0.3027,0.3762",
						"scrollX": 0,
						"scrollY": 475
					},
					"id": "button-cart",
					"idType": 1,
					"tlType": "button",
					"type": "button",
					"subType": "button"
				}
			}
		]
    ]
}

Tap events example

{
  "fromWeb": false,
  "type": 11,
  "offset": 46788,
  "screenviewOffset": 42208,
  "count": 14,
  "event": {
    "type": "ACTION_DOWN",
    "tlEvent": "tap"
  },
  "touches": [
    [
      {
        "position": {
          "x": 179,
          "y": 543
        },
        "control": {
          "position": {
            "height": 184,
            "width": 1080,
            "relXY": "0.17,0.93"
              "scrollX": 10
              "scrollY": 15
          },
          "id": "[RL,0]",
          "idType": -4,
          "type": "RelativeLayout",
          "subType": "ViewGroup",
          "tlType": "canvas"
        }
      }
    ]
  ]
}

Double tag events example

{
  "fromWeb": false,
  "type": 11,
  "offset": 49585,
  "screenviewOffset": 45005,
  "count": 15,
  "event": {
    "type": "ACTION_DOWN",
    "tlEvent": "doubleTap"
  },
  "touches": [
    [
      {
        "position": {
          "x": 182,
          "y": 520
        },
        "control": {
          "position": {
            "height": 184,
            "width": 1080,
            "relXY": "0.17,0.8"
              "scrollX": 10
              "scrollY": 15
          },
          "id": "[RL,0]",
           "idType": -4,
          "type": "RelativeLayout",
          "subType": "ViewGroup",
          "tlType": "canvas"
        }
      }
    ]
  ]
}

Tap hold events

{
  "fromWeb": false,
  "type": 11,
  "offset": 52389,
  "screenviewOffset": 47809,
  "count": 16,
  "event": {
    "type": "ACTION_DOWN",
    "tlEvent": "tapHold"
  },
  "touches": [
    [
      {
        "position": {
          "x": 182,
          "y": 536
        },
        "control": {
          "position": {
            "height": 184,
            "width": 1080,
            "relXY": "0.17,0.89"
              "scrollX": 10
              "scrollY": 15
          },
          "id": "[RL,0]",
          "idType": -4,
          "type": "RelativeLayout",
          "subType": "ViewGroup",
          "tlType": "canvas"
        }
      }
    ]
  ]
}

Swipe events example

{
  "fromWeb": false,
  "type": 11,
  "offset": 54409,
  "screenviewOffset": 49829,
  "count": 17,
  "event": {
    "type": "ACTION_DOWN",
    "tlEvent": "swipe"
  },
  "direction": "right",
  "velocityX": 7762.8466796875,
  "velocityY": 127.47991943359375,
  "touches": [
    [
      {
        "position": {
          "x": 75,
          "y": 538
        },
        "control": {
          "position": {
            "height": 184,
            "width": 1080,
            "relXY": "0.07,0.9"
              "scrollX": 10
              "scrollY": 15
          },
          "id": "[RL,0]",
          "type": "RelativeLayout",
          "subType": "ViewGroup",
          "tlType": "canvas"
        }
      },
      {
        "position": {
          "x": 212,
          "y": 526
        },
        "control": {
          "position": {
            "height": 184,
            "width": 1080,
            "relXY": "0.2,0.84"
              "scrollX": 10
              "scrollY": 15
          },
          "id": "[RL,0]",
          "idType": -4,
          "type": "RelativeLayout",
          "subType": "ViewGroup",
          "tlType": "canvas"
        }
      }
    ]
  ]
}

Pinch events example

{
    "type": 11,
    "offset": 2220,
    "screenviewOffset": 2022,
    "count": 6,
    "fromWeb": false,
    "event": {
        "tlEvent": "pinch",
        "type": "onScale"
    },
    "touches": [ 
        [
            {
                "position": {
                    "y": 388,
                    "x": 0
                },
                "control": {
                    "position": {
                        "height": 100,
                        "width": 100,
                        "relXY": "0.6,0.8"
                          "scrollX": 10
                          "scrollY": 15
                    },
                    "id": "com.tl.uic.appDarkHolo:id/imageView1",
                    "idType": -1,
                    "type": "ImageView",
                    "subType": "View",
                    "tlType": "image"
                }
            },
            {
                "position": {
                    "y": 388,
                    "x": 400
                },
                "control": {
                    "position": {
                        "height": 100,
                        "width": 100,
                        "relXY": "0.4,0.7"
                          "scrollX": 10
                          "scrollY": 15
                    },
                    "id": "com.tl.uic.appDarkHolo:id/imageView1",
                    "idType": -1,
                    "type": "ImageView",
                    "subType": "View",
                    "tlType": "image"
                }
            }
        ],
        [
            {
                "position": {
                    "y": 388,
                    "x": 800
                },
                "control": {
                    "position": {
                        "height": 100,
                        "width": 100,
                        "relXY": "0.6,0.8"
                          "scrollX": 10
                          "scrollY": 15
                    },
                    "id": "com.tl.uic.appDarkHolo:id/imageView1",
                    "idType": -1,
                    "type": "ImageView",
                    "subType": "View",
                    "tlType": "image"
                }
            },
            {
                "position": {
                    "y": 388,
                    "x": 500
                },
                "control": {
                    "position": {
                        "height": 100,
                        "width": 100,
                        "relXY": "0.4,0.7"
                          "scrollX": 10
                          "scrollY": 15
                },
                    "id": "com.tl.uic.appDarkHolo:id/imageView1",
                    "idType": -1,
                    "type": "ImageView",
                    "subType": "View",
                    "tlType": "image"
                }
            }
        ]
    ],
   "direction": "close"
}

Type 12 DOM Capture message

This message contains the HTML snapshot information of the application and is linked to a corresponding type 2 Screenview or type 4 User Interaction message. The snapshot can be a full HTML document or it could be a differential calculated from a prior snapshot.

Property nameData typeDescription
attributeDiffsObjectCollection of HTML attribute changes.
charsetStringThe document.charset property.
dcidStringDOM Capture identifier for matching this type 12 message with the corresponding type 2 or type 4 message.
diffsArrayCollection of HTML differentials.
eventOnBooleanIndicates if the snapshot will be processed by the Tealeaf system for events. True for the first full DOM snapshot.
timeoutBooleanIndicates if the snapshot was a result of the timeout specified in the delayUntil configuration of the trigger.
forcedBooleanIndicates if the full DOM snapshot was due to a DOM capture configuration setting mandating a full snapshot irrespective of the number of DOM mutations.
fullDOMBooleanIndicates if the snapshot is a full snapshot or a differential.
originalSizeIntegerLength of the DOM snapshot prior to the application of privacy and removal of scripts, comments, style, base64 etc.
hostStringHost
mutationCountIntegerNumber of DOM mutations processed for this message.
rootStringSnapshot HTML
urlStringURL path of the document.

Examples
The following example shows a DOM capture message with fullDom enabled.

{
    "type": 12,
    "offset": 35,
    "screenviewOffset": 21,
    "count": 2,
    "fromWeb": true,
    "domCapture": {
        "frames": [{
                "root": "<html><head>...</html>",
                "originalSize": 1094,
                "tltid": "tlt-2",
                "host": "http://acoustic.co",
                "url": "/frames/PageFrame1.html",
                "charset": "windows-1252"
            }, {
                "root": "<html>...</html>",
                "originalSize": 741,
                "tltid": "tlt-3",
                "host": "http://acoustic.co",
                "url": "/frames/PageFrame2.html",
                "charset": "windows-1252"
            }
        ],
        "root": "<html><head>...</html>",
        "originalSize": 7835,
        "charset": "windows-1252",
        "host": "http://acoustic.co",
        "url": "/index.html",
        "fullDOM": true,
        "forced": false,
        "mutationCount": 0,
        "dcid": "dcid-1.1583966541769s",
        "eventOn": true
    }
}

The following example shows a DOM capture message with Shadow DOM content:

{
    "type": 12,
    "offset": 790,
    "screenviewOffset": 726,
    "count": 2,
    "fromWeb": true,
    "domCapture": {
        "shadows": [{
            "root": "<style>:host ... </div>",
            "originalSize": 3418,
            "xpath": "[[\"html\",0],[\"body\",0],[\"shop-app\",0]]"
        }, {
            "root": "<style>:host ... </div>",
            "originalSize": 482,
            "xpath": "[[\"html\",0],[\"body\",0],[\"shop-app\",0,\"h\"],[\"header\"]]"
        }, 

        ...

        {
            "root": "<style>:host ... >",
            "originalSize": 1183,
            "xpath": "[[\"html\",0],[\"body\",0],[\"shop-app\",0,\"h\"],[\"iron-pages\",0]"
        }],
        "root": "<html><head>...</body></html>",
        "originalSize": 26821,
        "charset": "UTF-8",
        "host": "https://www.shadowdemo.com",
        "url": "/",
        "fullDOM": true,
        "forced": false,
        "dcid": "dcid-1.1582845770492s",
        "eventOn": true
    }
}

This example shows a DOM capture message with DOM diff enabled:

{
	"type": 12,
	"offset": 147460,
	"screenviewOffset": 147451,
	"count": 12,
	"fromWeb": true,
	"domCapture": {
		"fullDOM": false,
		"diffs": [{
			"root": "<span>Clicking the ...</span>",
			"xpath": "[[\"html\",0],[\"body\",0],[\"span\",0]]"
		}],
		"attributeDiffs": {
			"[[\"exBtn\"]]": {
				"attributeFoo": {
					"value": "newValue"
				}
			}
		},
		"mutationCount": 2,
		"dcid": "dcid-3.1567649143542",
		"eventOn": false
	}
}

Type 13 Geolocation message

This message logs the associated geolocation information when the TLT.logGeolocation API is invoked with a Position object.

accuracyIntegerAccuracy of the position information in meters as described in the W3C specification.
latNumberLatitude in degrees.
longNumberLongitude in degrees.
{
	"type": 13,
	"offset": 59536,
	"screenviewOffset": 59527,
	"count": 5,
	"fromWeb": true,
	"geolocation": {
		"lat": 28.45,
		"long": 101.76,
		"accuracy": 10
	}
}

Type 14 Cookie message

This message provides information about the cookies that have been set on the application domain. This message is logged after each screenview load when the TLCookie module is enabled.

📘

Note:

Cookies set with the HttpOnly attribute are not available to JavaScript and, therefore, are not logged in this message.

Example

{
	"type": 14,
	"offset": 18,
	"screenviewOffset": 1,
	"count": 2,
	"fromWeb": true,
	"cookies": {
		"UnicaNIODID": "b0aelQxf0-bWJM40",
		"CoreID6": "62796865768064&ci=51040000|ESTW3",
		"IBM_W3SSO_ACCESS": "",
		"userContext": "1|us|0",
		"_abck": "F59A92002Nz0GK/d6exXni0=~-1~-1",
		"BMAID": "5d85a257-353fbb7f4",
		"OPTOUTMULTI": "0:0|c1:1|c2:0|c3:0",
		"_hjid": "506aa603-be21fdbc3f3c",
		"WC_SESSION_ESTABLISHED": "true",
		"WC_PERSISTENT": "dtuXlGt10001",
		"WC_ACTIVEPOINTER": "-1,101",
		"WC_CartOrderId_10001": "",
		"JSESSIONID": "0000I9qZU3ZmklUg0SiEkL0:-1"
	}
}

Type 15 Form Completion message

This message is logged when the TLT.logFormCompletion API is invoked or when the submit action on an HTML form is performed. The information provided by this message is used for the Overstat Form completion report.

Property nameData typeDescription
submittedBooleanIndicates if the form was submitted. For a HTML form element this would be true when the submit action is performed.
validBoolean[Optional] Indicates if the form fields were subject to any validation and the result of such validation. This is only available when the logFormCompletion API is invoked otherwise the value is null.

Example

{
	"type": 15,
	"offset": 9189,
	"screenviewOffset": 9177,
	"count": 10,
	"fromWeb": true,
	"formCompletion"

Type 16 Data Limit message

This message type contains information related to any data limits that have been reached. The following limits are checked:

Message typeLimit
5300
6400

If the number of messages of a given type exceeds the specified limit, the corresponding message will not be logged. Instead, a Data Limit message will be logged by the Web SDK. The application should take remedial steps to ensure the specified limits are not breached.

Property nameData typeDescription
messageTypeIntegerThe JSON message type of which the limit has been reached.
maxCountIntegerThe maximum number of messages allowed for the specified message type.

Example

{
    "type": 16,
    "offset": 106103,
    "screenviewOffset": 105984,
    "count": 514,
    "fromWeb": true,
    "dataLimit": {
        "messageType": 5,
        "maxCount": 300
    }
}

Type 17 Performance Alert message

Performance Alert messages log information as per the W3C Resource Timing specification about slow-performing client-side content, such as CSS, JS, and images. To enable the logging of these messages, configure the Web SDKPerformance module..

Property nameDescription
initiatorInitiator type of the request. Example values are "script", "link", "img", "xmlhttprequest", "iframe". Refer to the W3C Resource Timing specification for details.
urlThe resource URL.
durationMilliseconds between request start and response end.
transferSizeSize of the resource in octets. Refer to the W3C Resource Timing specification for details.
NOTE: This value is only available in Chrome 54+, Firefox45+,and Opera 41+.
bpsNormalized speed in bytes per second. Calculated by dividing the transfer size with the duration. Lower values indicate a relatively slower performance.

Example

{
    "type": 17,
    "offset": 2418,
    "screenviewOffset": 2410,
    "count": 12,
    "fromWeb": true,
    "resourceData": {
        "urlNormalized": "http://uictest.com/js/app.js",
        "url": "http://uictest.com/js/app.js",
        "initiator": "script",
        "duration": 2628,
        "responseEnd": 4717,
        "transferSize": 11321,
        "bps": 4308
    }
}

Type 18 Mousemove event message

Mousemove messages are objects that contain information about mouse movement activity. Mousemove messages are Type 18 messages.

This is the schema for Mousemove Event (Type 18) messages.

"$ref": "MessageHeader",
"mousemove": {
    "config": { 
        "ignoreRadius": {
             "title": "The radius in pixels.  Tells sdk to ignore recording a mousemove event if it is within the specified radius from the last event",
             "type": "number"
        },

        "sampleRate": {
             "title": "The rate to record mousemove events.  A value of 200 means that it will capture mousemove position on every 200 milliseconds",
             "type": "number"
        }
    },

   "data": {
        "title": "List of mouse coordinates relative to the target element.  Each item in list has element index, rel x, rel y, and offset",
        "type": "array",
        "required": true
    },

   "elements": {
        "title": "List of elements hovered over.  Each item in list has id and idType",
        "type": "array",
        "required": true
    },

   "limitReached": {
        "title": "Sets to true if 1000 event limit is reached. Otherwise it is false",
        "type": "boolean",
        "required": true
    }

   "maxInactivity": {
        "title": "Maximum time gap between any 2 consecutive mouse move data points in this type 18 message",
        "type": "number",
        "required": true
    }
}

Mousemove (Type 18) message example
This is an example of a Mousemove Event (Type 18) message.

{
    "type": 18,
    "mousemove": {
        "config": {
            "ignoreRadius": 3,
            "sampleRate": 200
        },
        "data": [
            0: [0, "0.3835", "0.4583", 487],
            1: [1, "0.3739", "0.4012", 2578],
            2: [1, "0.3553", "0.4047", 3466]
            3: [2, "0.6639", "0.3861", 7563]
        ],
        "elements": [
            0: {
                id: "[[\"html\",0],[\"body\",0],[\"h2\",0]]",
                idType: -2
            },
            1: {
                id: "[[\"html\",0],[\"body\",0]]",
                idType: -2
            },
            2: {
                id: "name",
                idType: -1
            }
        ],
        "limitReached": false,
        "maxInactivity": 4097
    },
    count: 5,
    fromWeb: true,
    offset: 14353,
    screenviewOffset: 14339
}

Type 19 Data Layer message

This message logs the application data layer object. You can specify the data layer object in the dataLayer module configuration. You can also use the TLT.logDataLayer API to log the data layer object.

{
    "type": 19,
    "offset": 894,
    "screenviewOffset": 865,
    "count": 5,
    "fromWeb": true,
    "dataLayer": {
        "site_country": "US",
        "page_name": "Home",
        "channel": "Content",
        "site_language": "EN",
        "isResponsive": false,
        "isDesktop": true,
        "isMobile": false,
        "isTablet": false
    }
}

Type 20 Page experience signals message

This message logs the Core Web Vitals metrics related to the Page Experience Signals as defined by Google. For more information, see Capture page experience signals.

{
    "$ref" : "MessageHeader",
    "pageExperience": {
        "description": "Page Experience message",
        "type": "object",
        "properties": {     
            "fid": {
                "title": "First Input Delay in milliseconds",
                "type": "Number",
                "required": false
            },

            "lcp": {
                "title": "Largest Contentful Paint in milliseconds",
                "type": "Number",
                "required": false
            },

            "cls": {
                "title": "Cumulative Layout Shift",
                "type": "Number",
                "required": false
            },

            "https": {
                "title": "Indicates if the page is served over HTTPS",
                "type": "Boolean",
                "required": true
            }
        }
    }
}

Example

{
    "type": 20,
    "offset": 4316,
    "screenviewOffset": 3618,
    "count": 8,
    "fromWeb": true,
    "pageExperience": {
        "fid": 36,
        "lcp": 741,
        "cls": 0.28,
        "https": true
    }
}