The Connect Web SDK provides public interfaces for capturing user behavior and performance data in web applications. This reference documents the core APIs available in the library.

Initialization & configuration

getDefaultConfig()

Returns the base default configuration object. Use this as a starting point to configure the Web SDK. This is a function member of the TLT namespace.

Syntax

TLT.getDefaultConfig()

Returns:

• Object - The default global configuration object

Example

const myConfig = TLT.getDefaultConfig();
// Modify configuration as needed
myConfig.core.modules.replay.enabled = true;

init()

Initializes the Connect Web SDK with the specified configuration. The call is asynchronous - the library initializes only after the DOM loads. This is a function member of the TLT namespace.

Syntax

TLT.init(configObject, [callbackFunction])

Parameters

Callback states

• "initialized" - SDK successfully initialized
• Other states indicate initialization failure

Examples

Basic initialization:

function initializeConnect(configObject) {
    if (TLT && !TLT.isInitialized()) {
        TLT.init(configObject);
    }
}

With callback:

function postInitCallback(state) {
    if (state === "initialized") {
        console.log("Connect SDK ready");
        // Perform post-initialization tasks
    } else {
        console.error("Connect SDK initialization failed:", state);
    }
}

function initializeConnect(configObject) {
    if (TLT && !TLT.isInitialized()) {
        TLT.init(configObject, postInitCallback);
    }
}

initLib()

Initializes the Connect library with the provided configuration information. Sets up modules, hooks up web events and includes additional libraries needed for Connect.

This method automatically includes the following JavaScript libraries inline in your application:

• pako (compression library)
• HammerJS 1.3 (gesture library)
• Connect gesture module
• construct-style-sheets-polyfill 3.1.0 (for Safari browser dynamic styles capture)
• Connect Ajax listener
• Helper to restart the library for single-page applications

This is a function member of the TLT namespace.

Syntax

TLT.initLib(appKey, postUrl)

Parameters

• appKey: String - Your application key
• postUrl: String - The collector URL to which the data will be posted

Example

window.TLT && window.TLT.initLib("app_key", "collector_URL");

initLibAdv()

Initializes the library with advanced configuration options. Provides granular control over which additional libraries are included. This method offers the same functionality as initLib() but with optional flags to control library inclusion.

This is a function member of the TLT namespace.

Syntax

TLT.initLibAdv(appKey, postUrl, newConfig, addPako, addHammer, addSafariPolyFill, addAjaxListener, addRestartTLTforSPA)

Parameters

• appKey (String) - The application key from the SaaS organization
• postUrl (String) - The collector URL to which the data will be posted
• newConfig (Object) - Configuration object to use without the application key and post URL
• addPako (Boolean) - Whether to add the pako library
• addHammer (Boolean) - Whether to add the HammerJS 1.3 library
• addSafariPolyFill (Boolean) - Whether to add the construct-style-sheets-polyfill 3.1.0 library for Safari browsers to help capture dynamic styles
• addAjaxListener (Boolean) - Whether to add the Connect Ajax listener
• addRestartTLTforSPA (Boolean) - Whether to add the helper for restarting the library for single-page applications

Example

const myConfig = TLT.getDefaultConfig();
myConfig.core.buildNote = 'My custom config';

TLT.initLibAdv(
    'app_key',
    'collector_URL',
    myConfig,
    true,   // addPako
    false,  // addHammer
    true,   // addSafariPolyFill
    true,   // addAjaxListener
    true    // addRestartTLTforSPA
);

isInitialized()

Returns the initialization state of the Connect Web SDK. This is a function member of the TLT namespace.

Syntax

TLT.isInitialized()

Returns

• Boolean - true if initialized, false otherwise.

Example

function logToConnect(msg) {
    if (TLT && TLT.isInitialized()) {
        TLT.logCustomEvent("customMsg", msg);
    }
}

getLibraryVersion()

Returns the version number of the Connect Web SDK. This is a function member of the TLT namespace.

Syntax

TLT.getLibraryVersion()

Returns

• String - Version number (e.g., "6.4.177")

Example

const version = TLT.getLibraryVersion();
console.log("Connect SDK version:", version);

Session management

getSessionData()

Returns Connect session data, including session ID information. The session data format and availability depends on your configuration. This is a function member of the TLT namespace.

Syntax

TLT.getSessionData()

Returns

• Object - Session data object containing:
  • tltSCN (String) - Session cookie name
  • tltSCV (String) - Session cookie value
  • tltSCVNeedsHashing (Boolean, optional) - Whether the value requires hashing
• null - If session data is unavailable or not configured

Configuration requirements

Enable session data in your configuration:

{
    modules: {
        TLCookie: {
            sessionDataEnabled: true,
            sessionData: {
                sessionCookieName: "TLTSID"  // or use sessionQueryName
            }
        }
    }
}

Example

function getSessionInfo() {
    const sessionData = TLT.getSessionData();
    
    if (sessionData) {
        const sessionId = sessionData.tltSCN;
        const sessionValue = sessionData.tltSCV;
        verifySession(sessionId, sessionValue);
    }
}

Event logging

logCustomEvent()

Logs a custom event into the SDK's message stream for backend processing and reporting. This is a function member of the TLT namespace.

Syntax

TLT.logCustomEvent(name, customMsgObj)

Parameters

Limits

• Maximum 300 custom events per page

Example

if (TLT.isInitialized()) {
    TLT.logCustomEvent("apiMetrics", {
        url: "/v1.0/getAccountInfo",
        status: 200,
        retries: 0,
        errorCode: 0,
        timestamp: Date.now()
    });
}

logExceptionEvent()

Logs an error or exception message into the message stream. This is a function member of the TLT namespace.

Syntax

TLT.logExceptionEvent(msg, [url], [line])

Parameters

Limits

• Maximum 400 exception messages per page

Error handling behavior

• First occurrence: Logged inline with full context
• Subsequent occurrences: Counted and logged on screenview unload with repeat count

Configuration

Register error event handlers in your configuration:

{
    modules: {
        replay: {
            events: [
                { name: "error", target: window }
            ]
        }
    }
}

Example

try {
    // Your code
    someFunction();
} catch (error) {
    TLT.logExceptionEvent(
        error.message,
        window.location.href,
        error.lineNumber || -1
    );
}

Message format

{
    "type": 6,
    "exception": {
        "description": "Uncaught TypeError: Cannot read property 'foo' of undefined",
        "url": "https://example.com/app.js",
        "line": 93,
        "repeats": 4
    }
}

📘

Note

The repeats field only appears on screen view unload if the error occurred multiple times.

logFormCompletion()

Logs form completion data for analytics and reporting. This is a function member of the TLT namespace.

Syntax

TLT.logFormCompletion(submitted, [valid])

Parameters

Configuration requirement

Enable submit event tracking:

{
    modules: {
        overstat: {
            events: [
                { name: "submit", recurseFrames: true }
            ]
        }
    }
}

Example

document.getElementById('myForm').addEventListener('submit', function(e) {
    const isValid = validateForm();
    
    if (!isValid) {
        e.preventDefault();
    }
    
    TLT.logFormCompletion(true, isValid);
});

logGeolocation()

Logs geolocation data using the W3C Geolocation API Position object. This is a function member of the TLT namespace.

Syntax

TLT.logGeolocation(position)

Parameters

Example

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        if (TLT.isInitialized()) {
            TLT.logGeolocation(position);
        }
    });
}

Message format

{
    "type": 13,
    "geolocation": {
        "lat": 37.788497,
        "long": -122.399935,
        "accuracy": 63
    }
}

logDataLayer()

Logs application data layer information. The Connect SDK normally logs the data layer after each screen view load. Use this API for manual control. This is a function member of the TLT namespace.

Syntax

TLT.logDataLayer([data])

Parameters

Configuration

To disable automatic logging and use manual control:

{
    modules: {
        dataLayer: {
            enabled: true,
            dataObjects: []  // Don't specify dataObject for manual mode
        }
    }
}

Examples

Log configured data layer:

if (TLT.isInitialized()) {
    TLT.logDataLayer();
}

Log custom data object:

if (TLT.isInitialized()) {
    TLT.logDataLayer({
        userId: "12345",
        pageCategory: "checkout",
        cartValue: 99.99
    });
}

logScreenCapture()

Triggers a native screen capture. Only available when a screenCapture callback is registered. This is a function member of the TLT namespace.

Syntax

TLT.logScreenCapture()

Example

if (TLT && TLT.isInitialized()) {
    TLT.logScreenCapture();
}

logSignal()

Logs a signal event with custom data. This is a function member of the TLT namespace.

Syntax

TLT.logSignal(signalData)

Parameters

Returns

• Boolean - true if logged successfully, false otherwise

Example

if (TLT.isInitialized()) {
    TLT.logSignal({
        signalType: "pageView",
        name: "pageView generated by web site",
        category: "Behavior",
        url: "https://www.example.com/painting-and-decorating/tools/",
        pageCategory: "Catalog",
        effect: "positive",
    });
}

Screen view management

logScreenviewLoad()

Logs a screen view load event. Use this for manual screen view tracking in single-page applications or when automatic tracking is disabled. This is a function member of the TLT namespace.

Syntax

TLT.logScreenviewLoad(screenviewName, [referrerName], [root])

Parameters

Best practices

• Always pair logScreenviewLoad with logScreenviewUnload
• Use consistent naming between load and unload calls
• Leverage referrerName for hierarchical screenview structures

Examples

Basic screenview:

// Load
TLT.logScreenviewLoad("payment");

// Unload
TLT.logScreenviewUnload("payment");

Nested screenviews:

// Parent screenview
TLT.logScreenviewLoad("payment");

// Child screenview
TLT.logScreenviewLoad("creditcard", "payment");

// Switch child screenviews
TLT.logScreenviewUnload("creditcard");
TLT.logScreenviewLoad("directpayment", "payment");

// Exit parent screenview
TLT.logScreenviewUnload("directpayment");
TLT.logScreenviewUnload("payment");

logScreenviewUnload()

Logs a screenview unload event. This is a function member of the TLT namespace.

Syntax

TLT.logScreenviewUnload(screenviewName)

Parameters

Example

TLT.logScreenviewUnload("payment");

DOM capture

logDOMCapture()

Captures and logs a DOM snapshot. Returns a unique identifier for the capture. This is a function member of the TLT namespace.

Syntax

TLT.logDOMCapture([root], [configOptions])

Parameters

Configuration options

Returns

• String - Unique capture ID
• null - If capture failed or feature is disabled

Examples

Basic capture:

if (TLT && TLT.isInitialized()) {
    const captureId = TLT.logDOMCapture();
}

Capture with script removal:

if (TLT && TLT.isInitialized()) {
    const captureId = TLT.logDOMCapture(document.body, { 
        removeScript: true 
    });
}

Capture with frames:

if (TLT && TLT.isInitialized()) {
    const captureId = TLT.logDOMCapture(null, { 
        captureFrames: true,
        removeScript: true 
    });
}

UI interaction

rebind()

Reprocesses event listeners after dynamic DOM updates. Call this when your application adds new user input elements to the DOM. This is a function member of the TLT namespace.

Syntax

TLT.rebind([root])

Parameters

📘

Performance note

For large and complex DOMs, specifying the exact subset that has been updated improves efficiency.

Example

function addDynamicForm() {
    const form = document.createElement('form');
    // ... add form elements ...
    document.body.appendChild(form);
    
    // Notify Connect SDK of new elements
    if (TLT && TLT.isInitialized()) {
        TLT.rebind(form);
    }
}

processDOMEvent()

Explicitly informs the Connect SDK of DOM events that are blocked from bubbling by the application. This is a function member of the TLT namespace.

Syntax

TLT.processDOMEvent(event)

Parameters

Use cases

• Events blocked with preventDefault() or stopPropagation()
• Events that Connect SDK listeners cannot automatically process

Example

$(document).ready(function() {
    $(".disable").click(function(event) {
        event.preventDefault();
        event.stopPropagation();
        
        // Notify Connect SDK
        if (TLT && TLT.processDOMEvent) {
            TLT.processDOMEvent(event);
        }
        
        $("#log").append("<div>Event prevented</div>");
    });
});

Data control

flushAll()

Immediately flushes all buffered data to the configured endpoint. This is a function member of the TLT namespace.

Syntax

TLT.flushAll()

Use case

Typically used with setAutoFlush(false) for precise network control in performance-critical applications.

Example

function manualFlush() {
    if (TLT && TLT.isInitialized()) {
        TLT.flushAll();
    }
}

setAutoFlush()

Enables or disables automatic data flushing. Auto-flush is enabled by default and controlled by configurable queue length. This is a function member of the TLT namespace.

Syntax

TLT.setAutoFlush(enabled)

Parameters

🚧

Important

When disabled, your application is responsible for calling flushAll() at appropriate intervals.

Example

// Disable auto-flush
TLT.setAutoFlush(false);

// Later, manually flush
TLT.flushAll();

// Re-enable auto-flush
TLT.setAutoFlush(true);

Bridge callbacks

registerBridgeCallbacks()

Registers callback functions for hybrid mobile applications. Enables communication between web and native layers. This is a function member of the TLT namespace.

Syntax

TLT.registerBridgeCallbacks(callbackArray)

Parameters

🚧

Warning

This is an advanced API. Incorrect use can cause data loss. Do not use in hybrid apps where native logging frameworks are already registered.

Callback types

Callback configuration

{
    enabled: Boolean,      // Required
    cbType: String,        // Required: 'messageRedirect', 'screenCapture', or 'addRequestHeaders'
    cbFunction: Function,  // Required
    order: Number          // Optional, for messageRedirect only
}

Example

TLT.registerBridgeCallbacks([
    {
        enabled: true,
        cbType: 'screenCapture',
        cbFunction: function() {
            nativeBridge.captureScreen();
        }
    },
    {
        enabled: true,
        order: 1,
        cbType: 'messageRedirect',
        cbFunction: function(msgStr, msg) {
            // Modify or consume the message
            if (msg.type === 4) {
                msg.customField = "value";
            }
            return msg;  // Return null to discard
        }
    },
    {
        enabled: true,
        cbType: 'addRequestHeaders',
        cbFunction: function() {
            return [
                {
                    name: "X-Custom-Header",
                    value: "custom-value",
                    recurring: true
                }
            ];
        }
    }
]);

Library management

destroy()

Destroys the SDK instance and cleans up resources. This is a function member of the TLT namespace.

Syntax

TLT.destroy([skipEvents], [reason])

Parameters

Example

// Clean destroy with flush
TLT.destroy();

// Destroy without flushing (e.g., on error)
TLT.destroy(true, "Critical error occurred");

Utility functions

getXPathFromNode()

Returns the XPath string for a given DOM node. This is a function member of the TLT namespace.

Syntax

TLT.getXPathFromNode(node)

Parameters

Returns

• String - XPath representation of the node

Example

const element = document.getElementById('myButton');
const xpath = TLT.getXPathFromNode(element);
console.log(xpath);
// e.g., "//div[@id='container']/button[@id='myButton']"

Configuration notes

The following APIs require initialization:

• getSessionData
• logCustomEvent
• logExceptionEvent
• logScreenviewLoad
• logScreenviewUnload
• logScreenCapture

If the library is not initialized when these APIs are called, the behavior depends on the build type:

• In development builds, they throw exceptions and log the exceptions to the console.
• In production builds, the API calls fail silently.