JavaScript integration

The instructions on this page are intended for self service and online accounts.
Enterprise customers should contact their account managers for integration support.

Some websites use JavaScript dialogs/panels for various purposes, such as for implementing a "more info" panel or a registration form. If you haven't yet implemented the instructions described here the panel will not open during playback when the trigger is clicked. In addition to that, you won't see Link Analytics data for elements of the panel if the panel is collapsed initially.

Please note: Be careful to not mistake JavaScript popups with popups that open in a separate window. Popups that open in a separate window are separate pages and need to have the tracking code added to them.

Enabling dynamic JavaScript activation during playback

In order to trigger a JavaScript element which is normally triggered by visitor behavior(this includes CSS menus), you need to call the ClickTaleExec API function within the triggered JavaScript function. ClickTaleExec will register any action you pass to the function and will execute it during playback, thus enabling you or instance to expand/show the panel/dialog.

Example 1: Hidden Div Element

If you have an html page with a button that when clicked shows a DIV html element. This is basically a simple case of a tab control or a DHTML menu. If the button onclick event is:

function ButtonClicked()
{
  pane.style.display="block";
}

To record this change alter the function to add a call to ClickTaleExec:

function ButtonClicked()
{
  if(typeof ClickTaleExec=='function')
    ClickTaleExec("ButtonClicked()");
  pane.style.display="block";
}

Example 2: Dropdown Menu Panels

This is an example of using the ClickTaleExec API command to record a dynamic JavaScript menu. Each section of the menu is represented on the page using a list item which calls a JavaScript function entitled toggleMenu(or similar, Inspect Element can be used to find the exact function) when the visitor's mouse hovers over it, this is often found in Magento:
The menu items are constructed as follows:

<li class="xyz" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">

And the function itself looks like this:

function toggleMenu(el, over)
{
	if (over) {
		...
		...
	}
	else {
		...
		...
	}
}

To record the function properly an id attribute should be added to each list item

<li class="xyz" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" id="menuitem1">

and the function changed to:

function toggleMenu(el, over)
{
	if (typeof ClickTaleExec == "function") {
		var elId = el.id;
		if(elId) {
			ClickTaleExec("toggleMenu(document.getElementById('" + elId + "'),"+over+")");
		}
	}
	if (over) {
		...
		...
	}
	else {
		...
		...
	}
}

Where "el" is the element, "elId" the ID added to the element, "over" is the toggle action. Note: As ClickTaleExec is part of an if statement it will only affect the menus during playback.

Note: Some Magento skins will include a 3rd parameter, in this case the following can be used:

ClickTaleExec("toggleMenu(document.getElementById('" + elId + "'),"+over+",”+second+”)");

A quick summary of implementation:

1. Right click the element on the page and select "Inspect Element" (in Firefox)
2. Identify the function name and parameters that control the movement to be recorded
3. Perform the above ClickTaleExec additions to the function
4. Add an ID to each menu item if there isn't already one

Enabling dynamic JavaScript activation during aggregated reports

This is essential in order to view Link Analytics info and/or Form Analytics info on the elements of the panel(s). To implement, add the following code to your page after all panels have been loaded:

<script type="text/javascript">
function CTIsPlayback() {
   try { return parent && parent.WebPlayer; }
   catch(e) { return false; }
}
if(CTIsPlayback() && !parent.P2SIDs)
{
   // TODO: add code here to show/expand your panels
}
</script>

The code will only be executed when the page is shown as a backdrop of ClickTale's aggregated report.

A useful function to assist in implementing ClickTaleExec calls

To use the ClickTaleExec API command to its full potential you will need to make sure your script can differentiate between three states:

• Regular viewing
• Playback
• Aggregated report

You can do so by including the following function:

function ClickTaleIsIn (testFor) {
	var topLocation = top.location;
 
	if(testFor == "recording" && window.location == topLocation) {
		return true;
	} else if(testFor == "recording" || window.location == topLocation) {
		return false;
	}
 
	switch(testFor.toLowerCase()) {
	case "report":
		var fn = arguments.callee;
		return fn("scroll-heatmap") || fn("click-heatmap") || fn("form-analytics");
	case "scroll-heatmap":
		var regex = new RegExp("Heatmap.aspx\?", "i");
		return regex.test(topLocation);
	case "click-heatmap":
		var regex = new RegExp("ClickHeatMap.aspx\?", "i");
		return regex.test(topLocation);
	case "form-analytics":
		var regex = new RegExp("FormAnalytics.aspx\?", "i");
		return regex.test(topLocation);
	case "playback":
		var regex = new RegExp("Player.aspx\?", "i");
		return regex.test(topLocation);
	}
}

The parameters it can be given are:

• "recording"
• "report" (all aggregated reports will return true)
• "playback" (true only in playback)
• "scroll-heatmap"
• "click-heatmap"
• "form-analytics"

So in case of a regular visitor, the function will return false for every parameter other than "recording"

This way, the ClickTaleExec command can be invoked only if it's in playback mode, and during aggregated reports, you can, for instance, choose to expand all JavaScript panels in a menu in order to better understand visitor interaction with them.


This code section MUST stay outside of the tracking codes scripts and comments section (< !-- ClickTale end of Bottom part -->).