JavaScript integration

From ClickTale Wiki
Jump to: navigation, search
ClickTale Wiki
The instructions on this page are intended for self service accounts.
Enterprise customers should contact their account managers for integration support.

Many websites use JavaScript dialog boxes/panels for various purposes. By default JavaScript induced elements are not automatically displayed in Playback. Specific JavaScript Support is required in order to display such elements. This article lists a few such additions for JavaScript support.
Another possible method for capturing dynamic elements on the page is using the ActivePlayback API.

Please note: JavaScript in-page elements should not be confused with JavaScript pop-ups 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 if they are to be recorded.

Enabling dynamic JavaScript activation during playback

In order to trigger a JavaScript element which is normally triggered by visitor action (Click, hover on, CSS menus etc.), you should 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 for instance to expand/show a panel/dialog box .

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 edit the function to include a call to ClickTaleExec in the following manner:

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

Please note that the above is merely an example displaying a possible use of the ClickTaleExec function. The "ButtonClicked" function should be replaced with the relevant function which is to be triggered in Playback

Example 2: Drop-down Menu Panels (JS)

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.
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 should be 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 and "over" is the toggle action. Note: As ClickTaleExec is part of an "if" statement it will only affect the menus during playback.

Also 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 the implementation:

  1. Right click the element on the page and select "Inspect Element" (in Firefox)
  2. Identify the function name and the 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 one is not already defined.


Example 3: Drop-down Menu Panels (CSS)

If you are using drop-down menus that open by CSS manipulation, try the following method.

Use JavaScript with our ClickTaleExec API to simulate the ‘hover’ effect for the drop-down menu.

CSS menus.png

The HTML structure of the menu:


<nav>
     <ul>
           <li>Products
                       <ul>
                          <li>Product 1</li>
                          <li>Product 2</li>
                          <li>Product 3</li>
                       </ul>
           </li>
           <li>About Us</li>
      </ul>
</nav>

The JavaScript to handle this example:


<script type='text/javascript'>
   jQuery('nav>ul>li').hover(function(){
        var idx = jQuery('nav>ul>li').index(this);
        var code = 'jQuery("nav>ul>li:eq(' + idx + ')>ul").show()';
        if (typeof ClickTaleExec == 'function' ) ClickTaleExec( code );
   }, function(){
        var idx = jQuery('nav>ul>li').index(this);
        var code = 'jQuery("nav>ul>li:eq(' + idx + ')>ul").hide()';
        if (typeof ClickTaleExec == 'function' ) ClickTaleExec( code );
   });
</script>

*jQuery can be added to any web page by simply adding the following script in the ‘<HEAD>’ of the file:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>


Example 4: Div Color Change (jQuery)

This is an example using jQuery. The changes in display are presented here:

jQuery(".logo").bind("mouseover",function(){
   jQuery(this).parent().css("color","Red");
});
 
jQuery(".logo").bind("mouseout",function(){
   jQuery(this).parent().css("color","Blue");
});

The behavior may be recreated during playback based on visitor experience by adding the following:

jQuery(".logo").bind("mouseover",function(){
   if (typeof ClickTaleExec == 'function') {
      ClickTaleExec("jQuery('.logo').trigger('mouseover');");
   }
});
 
jQuery(".logo").bind("mouseout",function(){
   if (typeof ClickTaleExec == 'function') {
      ClickTaleExec("jQuery('.logo').trigger('mouseout');");
   }
});

Enabling dynamic JavaScript activation during aggregated reports

In case you wish to display in an aggregated report, elements which are hidden when the page initially loads and only appear as a result of visitor interaction, add the following code to make the elements visible:

<script type="text/javascript">
    if (typeof ClickTaleContext == 'object') {
        try {
            ClickTaleContext.getAggregationContextAsync("1", function (context) {   
                 // TODO: add code here to show hidden elements / expand panels / etc...
            });
        }
        catch (e) { }
    }
</script>

The code will only be executed when the page is shown as a backdrop of one of ClickTale's aggregated report. The context object also stores information on which report is being displayed, enabling you to trigger different code in different aggregated reports. For more about this and other properties of the ClickTaleContext object, please see the playback time JavaScript API.