Data Type	Description
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.

Data Type

Description

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 name	Data type	Description
messageVersion	String	A version string associated with the JSON schema. This is used for synchronizing between the Tealeaf SDK and server.
serialNumber	Integer	Indicates 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 name	Data type	Description
id	String	The id of the current page
startTime	Integer	An absolute time stamp (milliseconds since Jan 1, 1970 Coordinated Universal Time ) indicating when the Web SDK was loaded on the current page instance.
tabId	String	A randomly generated unique identifier for the current browser tab.
timezoneOffset	Integer	The difference, in minutes, between UTC and local time.
messages	Array	Events observed by the Tealeaf SDK.
clientEnvironment	Object	Object that contains user device and browser data.

Client Environment

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

Property	Data type	Description
libVersion	String	Web SDK version string
buildNote	String	Optional text which is specified in the core configuration.
domain	String	The document domain as obtained from window.location.hostname
page	String	The document URL as obtained from window.location.href
referrer	String	The referrer URL as obtained from document.referrer
mouseMovement	Boolean	True if the mousemove event is triggered on the page.
devicePixelRatio	Number	The physical to CSS pixel ratio as obtained from window.devicePixelRatio
deviceWidth	Integer	The screen width as obtained from window.screen.width
deviceHeight	Integer	The screen height as obtained from window.screen.height
deviceToolbarHeight	Integer	The difference between the screen height and that available for web content as obtained from window.screen.availHeight
width	Integer	Viewport width as obtained from window.innerWidth
height	Integer	Viewport height as obtained from window.innerHeight
priorPage.page	String	URL of the previous page on which the Web SDK was initialized.
priorPage.terminationReason	String	Reason 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.

Type	Message type	Tealeaf SDK support Web/iOS/Android	Description
1	Client state message	Web/iOS/Android	Client information such as page and viewport width/height, device orientation. The message is logged during page load/unload, scroll and resize.
2	Screen view messages	Web/iOS/Android	Indicates 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.
3	Connections messages	iOS/Android	Network request information.
4	User interaction messages	Web/iOS/Android	User interaction information with UI controls such as button clicks or text input.
5	Custom Event messages	Web/iOS/Android	Logged when the application invokes the logCustomEvent API.
6	Exception messages	Web/iOS/Android	Exception information including url, line number and error message.
7	Performance Timing messages	Web SDK	Information gathered using the W3C Navigation Timing API.
9	Hover messages	Web SDK	Mouse hover and hover-to-click activity for Overstat reporting.
10	Layout messages	iOS/Android	Layout information for iOS and Android app. replay.
11	Gesture messages	Web/iOS/Android	Touch gesture information such as tap, swipe, pinch etc.
12	DOM Capture messages	Web SDK	HTML snapshots of web apps for replay.
13	GeoLocation messages	Web/iOS/Android	Geolocation information including latitude and longitude.
14	Cookie messages	Web SDK	Application cookie information.
15	Form Completion messages	Web SDK
16	Data Limit messages	Web SDK	Message limit notification.
17	Performance Alert message	Web SDK	Performance alert messages.
18	Mousemove messages	Web SDK	Any object that contains information about mouse movement messages.
19	Data Layer	Web SDK	Application data layer log.

Message header

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

Property name	Data type	Description
Count	Integer	The serial number of the message. Resets on a new page navigation.
fromWeb	Boolean	Indicates 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.
offset	Integer	Milliseconds since the Web SDK initialized on the page.
screeviewOffset	Integer	Milliseconds since the most recent screenview LOAD event.
type	Integer	The 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 name	Data type	Description
deviceOrientation	Integer	The 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
deviceScale	String	Ratio between the screen width and the viewport width.
event	String	The event that triggered the client state information to be logged. This can be “load”, “scroll”, “resize” or “unload”.
pageWidth	Integer	The width of the document element.
pageHeight	Integer	The height of the document element.
viewPortWidth	Integer	The width of the browser window.
viewPortHeight	Integer	The height of the browser window.
viewPortX	Integer	The horizontal scroll value in pixels.
viewPortY	Integer	The vertical scroll value in pixels.
viewPortXStart	Integer	The horizontal scroll value at the start of the current scroll event.
viewPortYStart	Integer	The vertical scroll value at the start of the current scroll event.
viewTime	Integer	Milliseconds 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:

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".
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.
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 name	Data type	Description
dcid	String	DOM Capture identifier for matching this type 2 message with the corresponding type 12 DOM Capture message.
host	String	The protocol and host (HTTP origin) of the page.
name	String	The screenview name. Refer to the prior explanation for how this name is derived.
referrer	String	The 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.
type	String	“LOAD” or “UNLOAD”
url	String	The 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 name	Data type	Description
accessibility.id	String	Optional property containing the `aria-label` attribute value of the target element.
currState	Object	Object containing the current state information of the target control.
dcid	String	DOM Capture identifier for matching this type 4 message with the corresponding type 12 DOM Capture message.
dwell	Integer	Milliseconds between the control receiving focus and the current event.
event	Object	Object containing the event type corresponding to the user interaction.
focusInOffset	Integer	Milliseconds since Web SDK initialized on the page and when this control received focus.
id	String	Unique 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.
idType	Integer	Enumerated value indicating if the id string is HTML ID (-1), XPath (-2) or based on a configured Custom Attribute (-3)
isParentLink	Boolean	True if the target element is a child of a link element.
Name	String	Name attribute of the HTML element (if any)
position	Object	Object containing position information for the target element and mouse/tap information.
position.width	Integer	Width of the target element in pixels.
position.height	Integer	Height of the target element in pixels.
position.relXY	String	Relative x,y position of the click/tap event on the target element.
tlType	String	Type of the target element.
visitedCount	Integer	Number 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 name	Data type	Description
data	Object	The JSON object containing application specific data as provided to the logging API.
name	String	The 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 name	Data type	Description
description	String	Exception or error message.
line	Integer	(Optional) Line number within the resource where the exception or error occurred.
repeats	Integer	(Optional) The number of repeat occurrences of the same Exception or error message on the page.
url	String	(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.


Type	String	String value “NAVIGATE”, “RELOAD” and “BACKFORWARD” representing the three W3C Navigation types.
redirectCount	Integer	W3C redirect count property
renderTime	Integer	Difference between domLoading and loadEventStart properties.
navigationStart	Integer	Absolute 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.

Property	Data type	Description
hoverDuration	Integer	The hover duration in milliseconds.
hoverToClick	Boolean	True if the hover ended with a click on the target element. False otherwise.
Target	Object	Refer 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 name	Data tpe	Description
Type	String	The type of gesture such as “tap”, “doubletap”, “pinch” or “swipe”
Touches	Array	An 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 name	Data type	Description
attributeDiffs	Object	Collection of HTML attribute changes.
charset	String	The document.charset property.
dcid	String	DOM Capture identifier for matching this type 12 message with the corresponding type 2 or type 4 message.
diffs	Array	Collection of HTML differentials.
eventOn	Boolean	Indicates if the snapshot will be processed by the Tealeaf system for events. True for the first full DOM snapshot.
timeout	Boolean	Indicates if the snapshot was a result of the timeout specified in the delayUntil configuration of the trigger.
forced	Boolean	Indicates if the full DOM snapshot was due to a DOM capture configuration setting mandating a full snapshot irrespective of the number of DOM mutations.
fullDOM	Boolean	Indicates if the snapshot is a full snapshot or a differential.
originalSize	Integer	Length of the DOM snapshot prior to the application of privacy and removal of scripts, comments, style, base64 etc.
host	String	Host
mutationCount	Integer	Number of DOM mutations processed for this message.
root	String	Snapshot HTML
url	String	URL 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.


accuracy	Integer	Accuracy of the position information in meters as described in the W3C specification.
lat	Number	Latitude in degrees.
long	Number	Longitude 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 name	Data type	Description
submitted	Boolean	Indicates if the form was submitted. For a HTML form element this would be true when the submit action is performed.
valid	Boolean	[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 type	Limit
5	300
6	400

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 name	Data type	Description
messageType	Integer	The JSON message type of which the limit has been reached.
maxCount	Integer	The 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 name	Description
initiator	Initiator type of the request. Example values are "script", "link", "img", "xmlhttprequest", "iframe". Refer to the W3C Resource Timing specification for details.
url	The resource URL.
duration	Milliseconds between request start and response end.
transferSize	Size 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+.
bps	Normalized 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
    }
}

Tealeaf Web SDK JSON message types

Web SDK message format

Sessions

Client Environment

Web SDK Message Types

Message header

Message Body

Type 1 Client State message

Type 2 Screenview message

Type 4 User Interaction message

Type 5 Custom event message

Type 6 Exception message

Type 7 Performance message

Type 9 Hover message

Type 11 Gesture messages

Gesture message examples

Type 12 DOM Capture message

Type 13 Geolocation message

Type 14 Cookie message

📘
Note:

Type 15 Form Completion message

Type 16 Data Limit message

Type 17 Performance Alert message

Type 18 Mousemove event message

Type 19 Data Layer message

Type 20 Page experience signals message

Web SDK message format

Sessions

Client Environment

Web SDK Message Types

Message header

Message Body

Type 1 Client State message

Type 2 Screenview message

Type 4 User Interaction message

Type 5 Custom event message

Type 6 Exception message

Type 7 Performance message

Type 9 Hover message

Type 11 Gesture messages

Gesture message examples

Type 12 DOM Capture message

Type 13 Geolocation message

Type 14 Cookie message

📘Note:

Type 15 Form Completion message

Type 16 Data Limit message

Type 17 Performance Alert message

Type 18 Mousemove event message

Type 19 Data Layer message

Type 20 Page experience signals message

📘
Note: