Tracking code

From ClickTale Wiki
Jump to: navigation, search
This article describes the Balkan type code. If you need the Atlas type code article, please read this article.

How can I find which code type my project is using?

The Tracking Code initiates the recording process for every page on your site on which it is placed, although not every visitor will actually be recorded. That is determined by your recording ration, quota, visitor type, browser and other parameters.

The Tracking Code (Balkan) allows the user to set the recording ratio for the project without changing the code on the site pages. Setting the ratio is done using a slider control in a convenient manner.

The code uses the ClickTale server to store the unique parameters for your code, while allowing you to run all your custom code using Hook functions.

The ClickTale tracking code shown here is used for all standard HTML webpages, both HTTP and HTTPS, and is generated in a few simple steps on your ClickTale account.

Here is how to generate your code and perform a standard installation.

For non-standard, session-based or dynamic pages, please use the relevant plugin or integration module.

Setting up a new project

  • Once your account is activated, log in and click the "+ Create Project" button.
  • Click the "Get started" button on the introduction page.


Step 1 - Project Details

  • Specify the domain you will be recording, name your project and select the industry type of the site.
  • If your site uses features such as dynamic elements, a shopping cart or POST pages that you would like to record, then check all the boxes that apply to your site under "Website Infrastructure".
    If not, check the "None of the above" checkbox.
  • If you have checked any of the features above, you will be asked to specify your site's architecture by selecting from the drop-down list. Choose the correct platform or click "Go" to allow our automated service to try and determine your site's architecture, if you don't know it.
  • Click "Next".


Step 2 - Recording ratio setup

  • Try to estimate roughly, how many pageviews your site gets per day. Set that number in the "Estimated Traffic" field.
  • Use the slider control to set the ratio you selected, or click the green arrow to set the ratio recommended by the system.
  • Click "Next".


Step 3 - Recommendation and Tracking Code

  • If you chose any architecture options for your site in step 1, you will be shown a recommendation at the top of the page. This will advise which implementation of ClickTale will allow you to get the most useful data recorded.
    The recommendation has a link to an integration module for your site's architecture, which will enhance your implementation of ClickTale.
    Please note that if you already have a specific ClickTale integration on your desktop website (such as one of our integration modules), it is strongly recommended to use the same integration on your mobile website, or contact our support for a professional assessment.
  • Below that, you can see the two sections of the tracking code created for your project.
  • Before pasting the top and bottom code snippets into your source code, template or page-generating system, the bottom tracking code may need to be slightly adjusted, based on the nature of your mobile site. Please see the tracking code instructions below for more information.


Hooks and Timing

The Hooks in Balkan tracking code are actually functions synchronized with various stages of the ClickTale Recorder loading and operation. Hooks allow you to insert any custom code you want to run for various ClickTale scenarios, using the ClickTale API functions.

The default hook available is ClickTalePreRecordingHook. This Hook is executed after the ClickTale code has loaded, but before recording is started.

This would be the appropriate timing for running most all of the ClickTale API functions that you want to execute before starting to record - like ClickTaleFetchFromWithCookies, ClickTaleUploadPage, ClickTaleGet/SetUID etc.

Here's an example of custom code placed in the Hook:

<!-- ClickTale Bottom part -->
<script type='text/javascript'>
 
// The ClickTale Balkan Tracking Code may be programmatically customized using hooks:
// 
   function ClickTalePreRecordingHook() {
    ClickTaleFetchFromWithCookies.setFromCookie(/^ASPSESSIONID.*/);
    window.ClickTaleFetchFrom = ClickTaleFetchFromWithCookies.constructFetchFromUrl();
    ClickTaleEventsMask-=4;                                        }
//
// For details about ClickTale hooks, please consult the wiki page http://wiki.clicktale.com/Article/Customizing_code_version_2
 
document.write(unescape("%3Cscript%20src='"+
(document.location.protocol=='https:'?
"https://clicktalecdn.sslcs.cdngc.net/wwwxx/ptc/xxxxxx-xxxx-xxxx-xxx-xxxxxx.js":
"http://cdn.clicktale.net/wwwxx/ptc/xxxxxx-xxxx-xxxx-xxx-xxxxxx.js")+"'%20type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- ClickTale end of Bottom part -->


Note: Any new variable or function you wish to use inside the hook should be defined in the Global scope by preceding it with "window."
The example above has "window.ClickTaleFetchFrom =" defined in the global scope.
ClickTale functions are already defined in the global scope by virtue of their inclusion in the ClickTale recorder code.


If you need to use other hooks/timings for ClickTale functions, please contact our support team.

Basic Code Formats

Top Part

The top part of the code is a time stamp and does not load any scripts. While it's not necessary to have the top code, it is recommended. The top code should be placed after the opening <BODY> tag.

Example top code and placement:

<HTML>
<HEAD>
</HEAD>
<BODY>
<!-- ClickTale Top part -->
<script type="text/javascript">
var WRInitTime=(new Date()).getTime();
</script>
<!-- ClickTale end of Top part -->
 
[site content]

Bottom Part

The bottom part of the code loads the ClickTale recording script. It is recommended to place it after your page's content (so that the script loading does not affect the loading of other elements on your page) and before the closing </body> tag.

<!-- ClickTale Bottom part -->
<script type='text/javascript'>
 
// The ClickTale Balkan Tracking Code may be programmatically customized using hooks:
//
//   function ClickTalePreRecordingHook() { /* place your customized code here */  }
//
// For details about ClickTale hooks, please consult the wiki page http://wiki.clicktale.com/Article/Customizing_code_version_2
 
document.write(unescape("%3Cscript%20src='"+
(document.location.protocol=='https:'?
"https://clicktalecdn.sslcs.cdngc.net/wwwxx/ptc/xxxxxx-xxxx-xxxx-xxx-xxxxxx.js":
"http://cdn.clicktale.net/wwwxx/ptc/xxxxxx-xxxx-xxxx-xxx-xxxxxx.js")+"'%20type='text/javascript'%3E%3C/script%3E"));
</script>
 
<!-- ClickTale end of Bottom part -->


XHTML-Compliant version of the code


If you need to use an XHTML-Compliant version of the Balkan code (for example, to use with a Tag Management service, you need to check a checkbox in Advanced Settings and regenerate the code.

Below is the format of the XHTML-Compliant version, for general knowledge.

<script type='text/javascript'>
// The ClickTale Balkan Tracking Code may be programmatically customized using hooks:
//
//   function ClickTalePreRecordingHook() { /* place your customized code here */  }
//
// For details about ClickTale hooks, please consult the wiki page http://wiki.clicktale.com/Article/Customizing_code_version_2
 
// Add this to "OnDomLoad" event
(function(){
if (typeof (ClickTaleCreateDOMElement) != "function")
{
                ClickTaleCreateDOMElement = function(tagName)
                {
                                if (document.createElementNS)
                                {
                                                return document.createElementNS('http://www.w3.org/1999/xhtml', tagName);
                                }
                                return document.createElement(tagName);
                }
}
 
if (typeof (ClickTaleAppendInHead) != "function")
{
                ClickTaleAppendInHead = function(element)
                {
                                var parent = document.getElementsByTagName('head').item(0) || document.documentElement;
                                parent.appendChild(element);
                }
}
 
if (typeof (ClickTaleXHTMLCompliantScriptTagCreate) != "function")
{
                ClickTaleXHTMLCompliantScriptTagCreate = function(code)
                {
                                var script = ClickTaleCreateDOMElement('script');
                                script.setAttribute("type", "text/javascript");
                                script.text = code;
                                return script;
                }
}
var scriptElement = ClickTaleCreateDOMElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = document.location.protocol=='https:'?
'https://clicktalecdn.sslcs.cdngc.net/wwwxx/ptc/xxxxxx-xxxx-xxxx-xxx-xxxxxx.js':
'http://cdn.clicktale.net/wwwxx/ptc/xxxxxx-xxxx-xxxx-xxx-xxxxxx.js';
document.body.appendChild(scriptElement);
})();
</script>

If you need it, there is also an XHTML-compliant version of the AJAX-handling XHR wrapper code. See this article.



External file version of the code

If you wish to insert the tracking code onto the pages by fetching the code from an external JavaScript file, just put the Balkan code as-is into the external JS file and reference it.