Playback Time JavaScript API

This article describes the functionality of the ClickTale Playback Time JavaScript API. This relates to the functions, variables and objects that are made available in a page to customers while the page is rendered in the ClickTale account (reports or recordings). The main goal of this API is to assist in proper rendering of the page for playback and reports. Calls to this API are performed at report render time.

General

ClickTaleExcludeBlock

A method to declare areas in your page's html as those that should be excluded from rendering inside the ClickTale system. At the same time a method to declare areas as those that should be included. Effectively you can add an area of html to your page and declare it in such a way that it will not run when your page is rendered to visitors, but it will run when your page is rendered in the ClickTale system.
See ClickTaleExcludeBlock

ClickTaleIsPlayback

A deprecated method to detect whether the page is currently rendered inside the ClickTale system.
See JavaScript_API#Inline ClickTaleIsPlayback.

Recording context

A recording context is an object that represents information about a single recording. You can query for this context when your page is rendered in a context of one specific recording, such as the case with Visitor Playback. You can also query for this object in the case of an aggregated report, as with a Mouse Move Heatmap, in which case your context will contain information of one of the recordings in the aggregation.

To receive the context, call the ClickTaleContext.getRecordingContextAsync([version], [callback]) function.
[version] is a version of the context, where "1" and "1.1" are available at the moment. Version "1" doesn't implement recording context in aggregated reports.
[callback] is a function reference to a function that accepts one parameter.

Call example

ClickTaleContext.getRecordingContextAsync("1.1", function(context){/*your code*/});

The callback will receive a "context" object containing the following fields:

context = {
    string navigator;
    string userAgent;
    string itime;
    string rtime;
    string location;
    string referrer;
    string platform;
    string scrDepth;
    string errorCount;
    string country;
    string countryCode;
    string timeZone;
    string languageCode;
    string length;
    string activeTime;
    object loadTime;
    string[] tags;
    Dictionary fields;
}

Aggregation context

An aggregation context is an object that you can query for when your page is rendered in a context of an aggregated report, such as the case with a Mouse Move Heatmap.

To receive the context, call the ClickTaleContext.getAggregationContextAsync([version], [callback]) function.
[version] is a version of the context, where only "1beta" is available at the moment.
[callback] is a function reference to a function that accepts one parameter.

Call example

ClickTaleContext.getAggregationContextAsync("1", function(context){/*your code*/});

The callback will receive a "context" object containing the following fields:

// 1beta context is of the following structure:
context = {
    string ReportType; // options: AttentionHeatmap, ScrollReachHeatmap, MouseClickHeatmap, MouseMoveHeatmap, FormAnalytics
    array VisitorEvents; // where each array item is [bool include_event,number event_id, string event_name]
}

Context example

context = {
    "ReportType":"MouseMoveHeatmap", // other options: AttentionHeatmap, ScrollReachHeatmap, MouseClickHeatmap, MouseMoveHeatmap, FormAnalytics
    "VisitorEvents":[
        // [<include event?>,<event id>,<event name>]
        [true,211039,"dashboard"] // sample
    ]
    "PageEvents":[
        // [<include event?>,<event id>,<event name>]
        [true,211039,"dashboard"] // sample
    ]
}

Example - Open hidden DIVs in Heatmaps and Form Analytics

Let's assume you have a multiple step form, consisting of a few hidden <div>s, two of which are:

<div id="step2" style="display:none">
<div id="step3" style="display:none">

You would like these <div>'s to be visible in the MouseMove and Clicks Heatmaps as well as in Form Analytics. To enable this simply put the following code on the HTML of your page:

 
  <script type="text/javascript">
                   if (typeof ClickTaleContext == 'object') {
                           try {
                                ClickTaleContext.getAggregationContextAsync("1", function (context) {
                                  if (context.ReportType == 'MouseMoveHeatmap' || context.ReportType == 'MouseClickHeatmap' || context.ReportType == 'FormAnalytics') {
                                            document.getElementById('step2').style.display='block';
                                            document.getElementById('step3').style.display='block';
                        }
                    });
                }
                catch (e) { }
            }
  </script>

Advanced Example - Events as Switches

Let's assume you have a hidden <li>:

<ul id="litohide" class="menu" style="display: none; visibility: hidden; ">

You want this <li> to be visible in MouseMove and Click Heatmaps as well as Form Analytics. You also want this to be visible only when the visitor Event "show li" is selected.

To solve this simply put the following code on the HTML of the page:

<script type="text/javascript">
    if (typeof ClickTaleContext == 'object') {
        try {
            ClickTaleContext.getAggregationContextAsync("1", function (context) {
                if (context.ReportType == 'MouseMoveHeatmap' || context.ReportType == 'MouseClickHeatmap' || context.ReportType == 'FormAnalytics') {
                    for (i = 0; i < context.VisitorEvents.length; i++) {
                        if (context.VisitorEvents[i][2] == "show li") {
                            document.getElementById("litohide").style.display = "block";
                            document.getElementById("litohide").style.visibility = "visible";
                        }
                    }
                }
            });
        }
        catch (e) { }
    }
</script>