ClickTale Support Forums

All times are UTC - 6 hours



Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Tue Feb 24, 2009 7:45 am 
Offline
Site Admin

Joined: Fri Jul 21, 2006 2:39 pm
Posts: 1206
Location: Israel
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.

Don't 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 as if they are a separate page.

Supporting panel/dialog activation during playback:
You will need to call a ClickTale API function called ClickTaleExec at the time the trigger of the panel is called. ClickTaleExec will register any action you pass to the function and will execute it during playback. As a result you can register an action to expand/show the panel/dialog.
See viewtopic.php?f=3&t=5&hilit=clicktaleexec for an example.

Supporting panel/dialog display during aggregative reports:
You will want to implement this so that you can see 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:
Code:
<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>

add your code to make the panel shown. The code will only be executed when the page is shown in the context of ClickTale's aggregated report.

For further assistance, contact our team via tickets or forum.

Regards,
Arik.


Top
 Profile  
 
PostPosted: Mon Oct 05, 2009 7:02 am 
Offline

Joined: Wed Mar 25, 2009 7:17 pm
Posts: 213
Here 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 when the visitor's mouse hovers over it:
Code:
<li ... onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">

And the function itself looks like this:
Code:
function toggleMenu(el, over)
{
    if (over) {
        ...
        ...
        ...
    }
    else {
        ...
        ...
        ...
    }
}

To record the function properly an id attribute was added to each list item, and the function was changed to:
Code:
function toggleMenu(el, over)
{
    if (typeof ClickTaleExec == "function") {
        elId = el.id;
        if(elId) {
            ClickTaleExec("toggleMenu(document.getElementById(" + elId + "),"+over+")");
        }
    }
    if (over) {
        ...
        ...
        ...
    }
    else {
        ...
        ...
        ...
    }
}


Top
 Profile  
 
PostPosted: Mon Oct 12, 2009 9:03 am 
Offline

Joined: Wed Mar 25, 2009 7:17 pm
Posts: 213
To properly use the ClickTaleExec API command 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:
Code:
ClickTaleIsIn = function(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")

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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 6 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group