Contents


Optimizing the single-page application experience

An IBM® Tealeaf DOM Capture and Replay solution for customers

Comments

IBM Tealeaf for improved online customer experience

IBM Tealeaf improves the online customer experience by capturing and providing analytics on the visitors' online interactions. It provides extensive visibility into customers' online experiences, insight into customer behaviors, and the reaction of the site in response to the customer's requests. IBM Tealeaf solutions uniquely capture both the quantitative and qualitative details of each interaction.

Tealeaf can be used across an organization to support a range of functions, including e-commerce, marketing, production support, and customer service and compliance administration. It allows an organization to explore the site improvement and innovation opportunities, drive requirements, and set priorities to deliver better online solutions and services to customers.

Background: Transition to SPAs

The expectations of an increasingly web-savvy and empowered consumer population, along with advancements in web technologies are the key factors that drive businesses to create modern web applications that provide a smooth user experience. Single-page applications (SPAs) are an example of one such modern application.

SPAs are web applications or websites that fit on a single scrollable web page, with the appropriate content loaded dynamically in response to user actions. They can support rich interactions with multiple components on a single page.

Multi-page web applications versus SPAs

Traditional web applications are typically composed of static content that require full page loads and data transmission between the client and server, as the user navigates from page to page.

Delivered as one page to the browser, an SPA does not require page reloads, even as the customer moves from one part of the application to another.

Because SPAs separate data from presentation of the data, they can redraw any part of the UI without requiring a server roundtrip to retrieve the HTML. Thus, SPAs present a more fluid user experience, faster navigation, and more efficient network transfers.

From an IT perspective, SPAs are more resource intensive on the client-side than traditional multi-page applications.

Benefits of SPAs

The advantages that SPAs have over multi-page applications are as follows:

  • Load time: SPAs take less time to load, with one file each of HTML, CSS, JS
  • Less data transfer: With SPAs, XHR calls send raw data only, not HTML markup, resulting in less data transfer
  • Load distribution: SPAs reduce the load on your server by distributing it to clients. Caching is simplified and more beneficial.
  • Dynamic data loading from the server-side API, works with RESTful web services.
  • SPAs have more fluid transitions between page states and richer interaction between UI components.
  • Markup, CSS, and JS required for the application are sent with the initial request.
  • Page changes occur via JavaScript by using templates and DOM manipulation.
  • URL fragments are used to track states and can be bookmarked.

Challenges in the transition

As more businesses move to SPAs, capture and replay solution providers must understand implications of the paradigm shift (where all of the user interactions occur on a single page) along with the technical challenges presented by resource-intensive, client-side processes.

Both businesses and solution providers must consider the advancements in client-side technology such as AJAX, jQuery, JavaScript Frameworks, and DOM and understand the effect that these advancements have on strategies for capturing customer interactions with SPAs.

Limitations of Classic Capture and Replay on SPAs

Classic replay uses the captured HTTP network data and user interaction to re-create a stateful rendering of the application.

For a multi-page application, Classic replay renders each page in a browser sandbox. The sandbox replicates the state of the original application instance. The user interactions (for example, selecting a check box or clicking a button) are triggered programmatically to create a visualization of the user's journey through the application, such that it can be replayed.

The following conditions are necessary for Classic replay to achieve stateful rendering of applications:

  • The ability to re-create the sandbox for the initial page rendering.
  • The ability to maintain the correct application state while the recorded user interactions are applied.

In a multi-page application, each page represents a break where the rendering state is effectively reset. Resetting the rendering state enables Classic replay to recover and provide business value - even when some pages in the application cannot be replayed.

Classic replay of an SPA becomes a binary proposition, wherein if the application is unable to initialize in the correct state, it becomes impossible to recover from the failure.

Classic replay was not designed to work for applications where almost all of the user interactions occur on a single page. In SPAs, the number of user interactions that are associated with a single page is several times that of a multi-page application. The programming complexity that is required at replay time to maintain the application state increases in direct proportion to the number of user interactions that are recorded per page. If the application state is broken, the subsequent user interactions cannot be replayed.

DOM Capture and Replay solution for SPAs

Tealeaf DOM Capture and Replay addresses the technical challenges of replaying single-page applications by capturing one or more snapshots. Snapshots show the rendered state of the application in HTML format and represent the serialized DOM of the application. Unlike Classic replay, which tries to re-create a stateful rendering at a subsequent time, the snapshots from DOM Capture and Replay can be rendered independent of each other.

The amount of data you capture varies depending on the application content. However, the size of data that is captured by using DOM Capture and Replay almost always exceeds the size of data that is captured by using Classic Capture and Replay.

Extra storage can be extensive. To offset any replay performance issues that can result from the increased size of the data, you need to strategically configure DOM Capture and Replay, triggering captures optimally so that you achieve maximum business value.

By implementing innovative client-side capture protocols and listeners that collect the DOM and its changes, the Tealeaf DOM Capture and Replay solution provides high fidelity visualizations (and the functionality to analyze them) for modern on-premise, cloud, and mobile hybrid SPAs - and does so while ensuring that key capabilities such as privacy, security, events, and reports continue to work.

Benefits from a carefully planned implementation of Tealeaf DOM Capture and Replay are as follows:

  • Faster time-to-value and greater robustness due to lesser configuration required to enable IBM Tealeaf DOM Capture and Replay as compared to the industry’s traditional capture and replay solutions.
  • Simpler replay due to fewer replay rules.
  • Faster replay performance due to bypass of the rendering engines.
  • High fidelity replay visualizations of the user experience at time of capture.

Although addressing many of the technical challenges inherent to SPAs, a DOM Capture and Replay solution is not without its own set of challenges. For a general comparison of DOM Capture and Replay versus Classic Capture and Replay, see Deciding between Classic Capture and Replay and DOM Capture and Replay documentation on the IBM Knowledge Center.

Case study: ARC truly understands their customers with IBM Customer Experience Analytics

Background

Airlines Reporting Corporation (ARC) is a Tealeaf customer for over 10 years. ARC uses Tealeaf to provide an accurate and complete representation of the customer’s experience, by capturing and recording what each customer sees and does on the ARC web pages that are monitored by Tealeaf. From the Level 1 Customer Care Representative, all the way through the Enterprise Production Support Team, Tealeaf plays an integral role in identifying, diagnosing, and resolving customer experience issues.

Challenge of new web technology

Over the years ARC’s applications evolved from green-screen character-based applications to basic HTML web applications to Adobe Flex-based applications, and most recently to Angular/HTML5- based applications.

When ARC moved from green-screen character-based applications to HTML web applications, Tealeaf was able to provide an accurate and complete capture and replay solution. Tealeaf, an industry leader in Customer Experience Management (CEM), excelled at capturing and replaying standard web-based applications, where the web page is rendered on the server prior to being sent down the wire to the client’s browser.

For a period, ARC was using the Adobe Flex development platform for the web applications. The applications that are created with Adobe Flex proved difficult to capture and replay. The high-quality replay experience that ARC had with their basic HTML applications, was missing with their Adobe Flex-based applications. At the same time, the industry was trending toward Angular / HTML5 applications. ARC’s management team recognized they could resolve some of the technical issues present in Adobe Flex-based applications by moving to an Angular / HTML5 development platform. However, this transition presented its own set of technical challenges.

The web pages that are developed by using Angular/HTML5 would not be rendered on the server, but instead would be rendered dynamically on the client browser. Additionally, because only the most current industry browsers support Angular / HTML5 technology, ARC customers who use older browsers might not be able to interact with the new Angular / HTML5 applications. In fact, Tealeaf Analytics revealed that over 25 % of the current ARC user base would need to upgrade their browsers in order to interact with ARC’s new Angular / HTML5 applications.

In all its years of using Tealeaf, ARC never had to modify their applications to capture and replay the customer experience. However, with shifts in web development practices and changes in browser technology, ARC realized if they wanted to continue to benefit from Tealeaf capture and replay, they would need to modify their applications.

Solution

ARC reached out to Tealeaf to come up with a capture and replay solution that would work for applications that are rendered on the client, rather than the server.

As limited Tealeaf resources were available to ARC, the Tealeaf client-side Software Development Kit (SDK), which typically required customizations per application, was not a viable solution to use.

Tealeaf presented ARC with a DOM Capture / SDK solution. The DOM capture solution required minimal changes to the application, while enabling ARC to capture the customer experience at the client.

Real-world scenario

ARC is PCI and ISO 27001 certified. A 2015 audit revealed that ARC still supported an SSLV3 cipher, which would need to be disabled in order to maintain their PCI and ISO 27001 certifications.

The original solution was to simply switch off the cipher deal with any potential connectivity issues that customers might encounter. However, Tealeaf Analytics revealed that 25% or more of ARC’s customers would be unable to access critical ARC systems if the cipher was switched off.

ARC decided on a programmatic solution, where if an out-of-date client browser was detected, a pop-up message would display, and the customer would be directed to a support page. The support page was a Single Page Application (SPA) for examining the user’s environment and presenting the user with their current browser and operating system versions. The determination of the user’s environment was made at the client side and not the server side.

Unfortunately, the solution resulted in problems for ARC’s support team. When ARC customers called the Help Desk for assistance, the Help Desk replayed the customer’s session by using Tealeaf Classic Capture and Replay, which was not handling the new SPA. This situation was unacceptable and needed to be remedied quickly. A solution had to be developed and deployed to production in a short period.

Tealeaf was able to demonstrate how the new DOM / SDK solution would solve this problem. With only a few minor changes to ARC's check browser SPA and by activating the DOM Capture and Replay within the Tealeaf system, the ARC support group was able to see the customer's exact experience when the page was replayed:

  • If the customer's system environment does not meet the minimum requirements, they are instructed to take corrective action through provided links to update their out-of-compliance browser and operating system before they can securely access ARC's products and services.
  • Otherwise, if the customer's system environment meets the minimum requirements, they are informed that they are in-compliance and can proceed to securely access ARC's products and services.

Going forward

Based on their experience with the DOM/SDK integration, ARC is now evaluating how to include this functionality in all of its new Angular/HTML5-based applications.

Best practices for implementing Tealeaf DOM Capture and Replay

The following list defines best practices and provides helpful facts that are related to implementing an IBM Tealeaf DOM Capture and Replay solution.

Note: As is the case with best practices in general, they are subject to change as the product evolves and practitioners become experienced and adept at developing and implementing innovative use cases and strategies.

  1. Cost-benefit analysis: Use cost benefit analysis to determine which capture and replay solution is best for your SPA: Deciding which capture and replay solution is best for your SPA, requires a cost-benefit analysis.

    Although Tealeaf Classic Capture and Replay requires less network resources, getting the solution to work for an SPA can be complex and time consuming.

    Conversely, even though DOM Capture and Replay for an SPA is easy to implement, the solution almost always incurs extra processing and network transmission costs.

    Consider the following aspects:

    • Classic Capture and Replay works well for traditional customer-to-website-interaction scenarios, where everything that runs the application and or website is contained in the response to the customer’s request.
    • For scenarios not currently supported by Classic Capture and Replay (such as SaaS) or for scenarios where the complexity for configuring classic replay makes it prohibitive, consider DOM Capture and Replay. For example, consider DOM Capture and Replay when a complicated JavaScript runs in a single-page application.

    For information on the differences between Classic Capture and Replay and DOM Capture and Replay, see DOM Capture and Replay documentation on the IBM Knowledge Center.

  2. Mixed-mode solutions: For non-SPAs, consider mixed mode solutions with elements of Classic Capture and Replay and judicious use of DOM Capture and Replay:

    This mixed mode model requires no migration.

    Optimal UIC configuration is the key to successfully integrating DOM Capture into your capture and replay solution. Existing Tealeaf customers can continue to use and extend their traditional Tealeaf capture, replay, events, and technological investments.

    Do not view IBM Tealeaf DOM Capture and Replay as a replacement for Classic Capture and Replay solutions (although optimization enhancements are underway that can help achieve this). Instead, consider using DOM Capture and Replay for specific pages, screen views, or elements of interest where extra visibility is needed.

    Note: For SPAs, you must use either Classic Capture and Replay or DOM Capture and Replay – there is no mixed-mode approach to capturing SPAs.

    For an implementation of DOM Capture and Replay, the following steps must be complete:

    • Ensure that Classic capture works before you use the Configuration wizard to enable DOM capture. This step includes ensuring that the event and privacy configuration and the target page deployment all work for Tealeaf Classic capture.
    • Do an initial setup and test only

      From the DOM Capture page of the Configuration wizard, enable DOM Capture. Trigger DOM capture on all load, click, change, and unload events to verify that DOM snapshots are captured.

      Use the Configuration wizard to add these triggers, where the resulting UIC SDK replay module can look like the following example:

      Listing 1. Initial DOM Capture configuration
         replay: {
          // DOM Capture configuration
          domCapture: {
              /**
               * NOTE: Enabling DOM Capture has significant implications
               * on data transmission and infrastructure. Hence this
               * feature should be enabled judiciously. If enabled, it 
               * requires further configuration to only perform the DOM
               * Capture based on specific events and elements. Please
               * refer to the documentation for more details.
               */
               enabled: true,
              /**
               * The rules for triggering DOM Snapshots are similar to 
               * the Privacy configuration. It accepts a mandatory 
               * "event" followed by one or more optional targets as 
               * well as an optional delay after which to take the DOM 
               * snapshot. The default configuration below will capture 
               * a full DOM snapshot for each and every click, change 
               * action as well as for all screenview load and unloads. 
               * Please refer to the documentation for details on fine 
               * tuning this configuration to specific elements and 
               * screenviews.
               */
              triggers: [
                {
                   event: "click"
                },
                {
                   event: "change"
                },
                {
                   event: "load"
                },
                {
                   event: "unload"
                }
              ]
            }
         }
  3. Fine-tune the triggers for staging and production: After verifying that Tealeaf DOM capture works, you must fine-tune your DOM capture triggers to capture the data (at the page or element level) that is critical to your application, while ensuring that you meet the performance, payload transmission and storage requirements.

    For SPAs, a strategic and optimal UIC configuration is the key to obtaining a useful replay of the customer's experience. Although it varies from application to application, typically, you need several key snapshots only to provide a visualization that accurately depicts the user experience.

    With SPAs, capturing every click, change, load, and unload can result in a large amount of data to transmit and store (which can increase costs and degrade performance). Therefore, it is imperative that you:

    • Review workflow of the application from a business perspective, identifying the key stages (triggers).
    • Review replay granularity versus performance and storage and payload transmission tradeoffs.
    • Ensure your UISDK (tealeaf.js) does not have superfluous DOM Capture trigger examples that might negatively affect the triggers that you need.

      For example, if your apps do not have a tempTestButton element, but the click event in your SDK is set to trigger a DOM Capture for the tempTestButton element only, then you must remove tempTestButton from the SDK. Failure to do so can negatively affect your DOM capture solution and can lead to loss of time in troubleshooting the problem.

      It is recommended that you review and validate UISDK event triggers for DOM Capture to ensure that they reflect precisely what you want to capture on your environment.

    • Configure triggers to obtain the minimal number of snapshots that are required without compromising the replay usefulness and accuracy of the application workflow.
    • Fine-tune triggers by setting appropriate delay, if required.
    • Optional: Tealeaf clients that agree to integrate the gzip encoder into their Tealeaf solution would need to configure and enable gzip encoding as the final step for fine-tuning the triggers for staging and production.
  4. Set the Maximum message threshold: Set the maximum message threshold size for the DOM Capture message. The default target page is 20 KB.

    The DOM capture size limitation is based on the uncompressed size. So, if the size of the captured DOM is less than the size limitation for the uncompressed data, then the capture is serialized into a JSON Type 12 message (and compressed if gzip is on). Otherwise, if the captured DOM exceeds the configured size limit, the capture is discarded and an error message is logged.

    More details about the threshold size can be found in the IBM Tealeaf CX UI Capture j2 Version 4 Release 0 released on December 4th, 2014.

  5. Set the gzip compression of DOM Capture POST requests: Set the gzip compression of DOM Capture POST requests if you can you use gzip encoding in your organization.

    The DOM Capture size limitation is based on the uncompressed size. The UIC (4.0.0) supports gzip compression of the request data. Gzip is supported on MS IE 10+.

    To enable compression:

    1. You must agree to include pako JS (Open source compression encoding library). You can download and deflate the library from the following website:
      • Project Page: https://github.com/nodeca/pako
      • Download Directory: https://github.com/nodeca/pako/tree/master/dist
    2. Ensure pako JS is included BEFORE the UIC on the page.
    3. In the UIC, ensure that the queue service configuration has the encoder: gzip property set as follows:
      Listing 2. Enabling gzip compression
      queue: {
         /**
          * WARNING: Enabling asynchronous request on unload may
          * result in incomplete or missing data
          */
         asyncReqOnUnload: false,
         queues: [
           {
              qid: "DEFAULT",
              endpoint: "/TealeafTarget.php",
              maxEvents: 50,
              timerInterval: 300000,
              encoder: "gzip"
           }
         ]
      }
  6. Enable DOM Capture: Using the Tealeaf Management System (TMS), set Enable DOM Capture to 1 in the Replay Server configuration
  7. Enable DOMCaptureVHit: Using the Tealeaf Management System (TMS), enable the DOMCaptureVHit session agent from the Transport Server node:

    Make sure that you insert the DOM Capture Virtual Session Agent after inflate and before privacy in the pipeline.

    Note: Virtual hits are needed to build search index, apply privacy rules, and eventing for the DOM. Virtual hits are not visible in the BBR navigation list, though they can be seen in a TLA of the session.

  8. Browser-based replay: Tealeaf Browser Based Replay (BBR) 9.0.1+ supports mixed mode replay at the page level:

    Replay is transparent, with the EnableDOMCapture global option enabled by default.

    • If DOM is detected for the page, then replay uses the captured DOM.
    • If DOM is not detected for the page, then replay defaults to traditional replay.
    • To determine whether replay is DOM capture or Classic capture:

      Go to port 38000, select the session of interest, and click the Nav List XML to view the navigation list XML.

      If you see the property isDomCapture = true, then you know that this UI event is replayed with DOM.

      Currently, Tealeaf DOM support is available for UI events, so for pages where the property UIEvent = false, the isDOMCapture property must be set to false.

    • Pages that include captured DOM are identified in Tealeaf Browser Based Replay.
  9. Review canister event metrics: Review canister event metrics to determine whether they need to be revised

    Depending on the DOM capture scenario, you might need to modify the Canister Safety Limits [BB] event.

    The Canister Safety Limits [BB] event closes the session if it is too long, too large, or has too many hits. Because a DOM Capture solution can incur extra processing and network transmission cost, you might need to increase the byte size that is specified in the Bytes section of the Canister Safety Limits [BB] Event to accommodate the additional costs and prevent the session from splitting too early.

    For more information, see Canister safety limits [BB] event documentation on the IBM Knowledge Center.

  10. Existing Tealeaf events work with Tealeaf DOM.

Conclusion

Effectively managing customer experience is key to the success of businesses across all industries. Today’s web-savvy and empowered consumers expect to conduct business online through modern web applications, such as SPAs. IBM Tealeaf DOM technology, which is available in Version 9.0.1 or later, effectively provides the high fidelity capture and replay, as well as actionable insights via Tealeaf analytics for SPAs, and modern technologies and techniques that can help businesses proactively improve their customer's experience with faster time-to-value. Customers such as ARC are adopting and benefiting from Tealeaf DOM technology, and are committed to extra implementations in the future. We welcome your inquiries on how IBM Tealeaf DOM technology can help manage and improve your customer's experience. Stay tuned for future white papers in the IBM Tealeaf DOM technology series!


Downloadable resources


Related topics

  • For a full description of IBM Tealeaf capabilities, see the IBM Tealeaf Customer Experience documentation on the IBM Knowledge Center.
  • Read the ARC case study to understand how they used IBM Tealeaf DOM technology to build innovative services and meet industry compliance requirements.

Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Commerce, Data and analytics
ArticleID=1022975
ArticleTitle=Optimizing the single-page application experience
publish-date=12032015