Slide 1: Configuring and Building the UI SDK
Configuring and Building the UI SDK © Copyright IBM Corporation 2018 84 Watson Customer Engagement
Slide 2: UI SDK Configuration Considerations
UI SDK • Determine configuration needs Configuration – Same configuration across the whole site Considerations – Separate configurations for different parts of the website – Any non-standard modules • Determine deployment approach – Single file – Multiple files (libraries and configuration) © Copyri
Slide 3: Building the UI Capture SDK
Building the • Use the latest version UI Capture SDK – Latest fixes, features, and browser support – Typically released every 6 months • Download the library from – Administration Panel of Watson Customer Experience Analytics - Tealeaf (using the configuration wizard) – IBM Support Fix Central (for
Slide 4: Configuration and Download of the SDK from the Administration Panel
Configuration and Download of the SDK from the Administration Panel • Navigate to: – Applications Tab UIC column © Copyright IBM Corporation 2018 87 Watson Customer Engagement
Slide 5: Getting pako.js
Getting pako.js • Download pako.min.js library – Newest version can be downloaded from https://github.com/nodeca/pako/blob/master/dist/p ako.min.js © Copyright IBM Corporation 2018 88 Watson Customer Engagement
Slide 6: Building the SDK
Building the SDK • Copy-Paste pako.min.js into the SDK file pako.min.js UI SDK library © Copyright IBM Corporation 2018 89 Watson Customer Engagement
Slide 7: Configuration of UI SDK
Configuration of • Enable the compression engine for DOM capture UI SDK – In Services > Queue > Queues add parameter "encoder": "gzip" [remember to add a COMMA in the previous line] © Copyright IBM Corporation 2018 90 Watson Customer Engagement
Slide 8: Manual Configuration of the UI Capture SDK for the Cloud Collector
Manual • Enable TLCookie Module Configuration of • Define the Session Cookie name (default TLTSID) the UI Capture • Set the collector endpoint URL SDK for the Cloud Collector • Set the Application Key value • Enable useBeacon • Enable compression of DOM data • Enable DOM capture • Review (adjust) de
Slide 9: UI SDK Privacy Configuration
UI SDK Privacy • Configuration of the UI SDK Privacy will be Confguration discussed in a separate unit of the course © Copyright IBM Corporation 2018 92 Watson Customer Engagement
Slide 10: Dynamic Configuration Examples
Dynamic Configuration Examples © Copyright IBM Corporation 2018 94 Watson Customer Engagement
Slide 11: Configuring Alternate settings for IE8, IE9 and IE10 Browsers
Configuring Alternate settings for IE8, IE9 and IE10 Browsers • IE8 does not support DOM Capture, pako GZIP or Cross Domain Posts (CORS) • IE9 does not support DOM Diff Capture or pako GZIP • IE10 does not support DOM Diff Capture var legacyIE = false; if (document.documentMode === 8) { //--- Disabl
Slide 12: Segmenting Traffic to a different tlAppKey based on the document.URL
Segmenting Traffic to a different tlAppKey based on the document.URL The following example can be modified to support Application Key changes by domain name, URL, QueryString, hash value, cookie value, etc var getLocation = function(href) { var getURL = document.createElement("a"); getURL.href = hre
Slide 13: Testing the UI Capture SDK
Testing the UI Capture SDK © Copyright IBM Corporation 2018 97 Watson Customer Engagement
Slide 14: Testing the SDK Client Side Capture
Testing the SDK • Captures your own sessions • Works in the browser (using script injection plugin) Client Side Capture – No changes on the server/in the application code (CSC) – From the browser perspective - no difference to a script hosted on the server • Allows to – Test if the script is working
Slide 15: Client Side Capture with Injection of UI Capture
Client Side Capture with Injection of UI Personal Computer Capture Request Web Page HTML Web Application JavaScript HTTP Server UI SDK Tealeaf.js Capture JSON Collector IBM Tealeaf CX © Copyright IBM Corporation 2018 99 Watson Customer Engagement
Slide 16: Capture a Session
Capture a • In the web browser navigate to the web-site you want to analyze Session – You may want to use the private/incognito mode – Make sure to DISABLE script and ad-blockers or whitelist the collector's address • Act as a “typical” user - perform a representative session: – Browse products – Us
Slide 17: Troubleshooting and Validation
Troubleshooting • UI SDK successfully loads on all pages in the scope and Validation of deployment (no JS errors in the console) • SDK can send data to the server – Use TLT.flushAll() to force – Request has the AppKey and SessionID headers – HTTP 200 (OK) response with content {“result”:”success”} •
Slide 18: Please proceed to the next module
Please proceed to the next module © Copyright IBM Corporation 2018 103 Watson Customer Engagement