Tracking code

From ClickTale Wiki
Jump to: navigation, search

Contents

When to use the ClickTale tracking code

Implementing ClickTale on your site can be as easy as copying and pasting a few lines of HTML into your web page. The ClickTale tracking code shown here is used for all standard HTML webpages, both HTTP and HTTPS, and is generated automatically in your ClickTale account. Below we will explain how to generate your code as well as the standard ClickTale implementation.

For non-standard, session-based or dynamic pages, please use the relevant plugin or integration module.
If you know of a plugin or integration module that is not mentioned there, please request it.

How to generate the ClickTale tracking code

The first step of implementation is to generate your tracking code.

1. After logging into your account, you will be taken to the Projects Page:
  • If you just opened your account or want to create a new project - click on the button or link in the left sidebar that reads "Create project".
  • To regenerate the tracking code for an already created project - click on the "Get tracking code" button and skip to step 3.
2. On the next page, give your Project a name and click "Create"
3. Enter your site's traffic details to generate your recording ratio (a rough estimate is fine).
  • If you entered your traffic details, ClickTale will choose the appropriate recording ratio for you (you can edit this in the "Your Recording Ratio" section of the page).
  • If you chose "Don't know" for the traffic details, you will need to enter your own recording ratio in the "Your Recording Ratio" section of the page.
4. Next, choose whether you want to record secure pages (ssl/https) or not.
5. Click the "Next" button to view your code.

Once your tracking code is generated, you will need to paste the top and bottom codes into your source code or integration module. Below are examples of the standard code and placement.

Example Code

Top Code

The top code is basically 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 Code

The bottom code loads the ClickTale script. It is recommended to place it after your site content (so that the script loading does not affect content loading) and before the closing body tag.

Example bottom code and placement(http): 

[site content]
 
<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
<script type="text/javascript">
if(document.location.protocol!='https:')
document.write(unescape("%3Cscript src='http://s.clicktale.net/WRb.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
if(typeof ClickTale=='function') ClickTale(project id,recording ratio %,"partition #");
</script>
<!-- ClickTale end of Bottom part -->
 
</BODY>
</HTML>

Note: "WRb.js" references the initial ClickTale code and will increment with each new release, currently it is WRc3.js, it should match to the code generated in your Account, support may occasionally request that you change this to facilitate new features.

Example HTTPS enabled code: 

[site content]
 
<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
<script type='text/javascript'>
document.write(unescape("%3Cscript%20src='"+
 (document.location.protocol=='https:'?
  'https://clicktale.pantherssl.com/':
  'http://s.clicktale.net/')+
 "WRc3.js'%20type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var ClickTaleSSL=1;
if(typeof ClickTale=='function') ClickTale(ProjectID,RecordingRatio,"PartitionID");
</script>
<!-- ClickTale end of Bottom part -->
 
 
</BODY>
</HTML>

Inserting ClickTale Script As External JavaScript File

You can place a ClickTale tracking code as an external file, keeping a single copy of the code.

When Should I use This Technique?

If you have a website with many pages that you want to record, and if you don't already have a way to inject the tracking code into every page automatically (e.g. a master page, a template, or you're using an integration module, which also injects the code automatically).

Benefits

Using an external file has the advantage of flexibility: While you need to repeat steps 6 and 7 for every page you want to record, to make a change in the tracking code (for instance alter the recording ratio, or switch to https/SSL compliant code), you only need to change the top/bottom files once.

Implementation - HTTP

  1. Generate a tracking code for the project you want to use to record your website.
  2. Create two separate JavaScript files named "top.js" and "bottom.js" and put them in the root of your website.
  3. Put the following code in "top.js" : 
    var WRInitTime=(new Date()).getTime();
  4. Put the following code in "bottom.js": 
    // Integration function. Add custom code here
function ClickTale_WhenAvailableCallback() {
	ClickTale([project id],[ratio],[partition]);
}
 
function ClickTale_GetRecorderFileUrl() {
	return "http://s.clicktale.net/WRb.js";
}
 
window.CallClickTaleWhenAvailable = function() {
	// on first call, remove the function from the window
	window.CallClickTaleWhenAvailable = undefined;
 
	var loopCount = 0,
		// set to maximum number of tries running clicktale on page
		loopMax = 200;
 
	function CheckForClickTale() {
		if(typeof ClickTale == "function") {
			if(typeof ClickTale_WhenAvailableCallback != "function") return;
			ClickTale_WhenAvailableCallback();
		} else if(loopCount < loopMax) {
			loopCount++;
			setTimeout(arguments.callee, 100);
		}
	}
 
	// the first call
	CheckForClickTale();
};
// minified version of window.CallClickTaleWhenAvailable
// window.CallClickTaleWhenAvailable=function(){window.CallClickTaleWhenAvailable=undefined;var a=0,b=200;function c(){if(typeof ClickTale=="function"){if(typeof ClickTale_WhenAvailableCallback!="function"){return}ClickTale_WhenAvailableCallback()}else{if(a<b){a++;setTimeout(arguments.callee,100)}}}c()};
 
document.write('<div id="ClickTaleDiv" style="display: none;"></div>');
document.write('<script src="' + ClickTale_GetRecorderFileUrl() + '" type="text/javascript"></script>');
document.write('<script type="text/javascript">');
document.write('window.CallClickTaleWhenAvailable();');
document.write('</script>');
  5. Change the [project id],[ratio] and [partition] to the values found on the tracking code you generated in step 1.
    Please note: You can modify and change the code in bottom.js file to fit your needs (for instance you might want to include calls to API commands), but if you do so make sure you don't insert single quote (') characters inside document.write commands.
  6. Go to the web-page you want to put ClickTale code in and add the following code after the <body> tag: 
    <script type="text/javascript" src="top.js"> </script>
    top.js can be replaced with the correct full/relative path for the top.js file.
  7. Put the following line just before the </body> tag: 
    <script type="text/javascript" src="bottom.js"> </script>

Implementation - HTTPS

Please note that this option will work for both https and http pages. Use of this option is only needed if you have https pages in your site. Please check that your plan allows https support. The free plan cannot record https pages.

Perform steps 1-3 from previous section.

Instead of step 4 place in "ClickTale_bottom.js": 

// Integration function. Add custom code here
function ClickTale_WhenAvailableCallback() {
	ClickTale([project id],[ratio],[partition]);
}
 
function ClickTale_GetRecorderFileUrl() {
	return "https://clicktale.pantherssl.com/WRb.js";
}
 
window.CallClickTaleWhenAvailable = function() {
	// on first call, remove the function from the window
	window.CallClickTaleWhenAvailable = undefined;
 
	var loopCount = 0,
		// set to maximum number of tries running clicktale on page
		loopMax = 200;
 
	function CheckForClickTale() {
		if(typeof ClickTale == "function") {
			if(typeof ClickTale_WhenAvailableCallback != "function") return;
			ClickTale_WhenAvailableCallback();
		} else if(loopCount < loopMax) {
			loopCount++;
			setTimeout(arguments.callee, 100);
		}
	}
 
	// the first call
	CheckForClickTale();
};
// minified version of window.CallClickTaleWhenAvailable
// window.CallClickTaleWhenAvailable=function(){window.CallClickTaleWhenAvailable=undefined;var a=0,b=200;function c(){if(typeof ClickTale=="function"){if(typeof ClickTale_WhenAvailableCallback!="function"){return}ClickTale_WhenAvailableCallback()}else{if(a<b){a++;setTimeout(arguments.callee,100)}}}c()};
 
document.write('<div id="ClickTaleDiv" style="display: none;"></div>');
document.write('<script src="' + ClickTale_GetRecorderFileUrl() + '" type="text/javascript"></script>');
document.write('<script type="text/javascript">');
document.write('var ClickTaleSSL=1;');
document.write('window.CallClickTaleWhenAvailable();');
document.write('</script>');

Perform steps 5-7 from previous section.

Additional notes

  • You can exclude certain pages from being recorded by not including the ClickTale code in the page’s HTML.
  • ClickTale does not display or record passwords by default.
  • ClickTale censors keystrokes in forms that weren’t submitted.
  • You can change your page’s recording quota by generating a new tracking code, or manually changing the ClickTale code on your site as explained here.
  • You should block fields in your forms that have personal or sensitive information, such as credit card numbers. To learn how to hide specific fields from ClickTale, click here.
  • PHP control script: The ClickTale control script is a PHP script intended to help you filter the visitors you want to record. The script will allow you to control exactly who you want to record. You can download it and view instructions here.
  • You need to disclose your use of ClickTale in your privacy policy. View terms here.
Retrieved from "http://wiki.clicktale.com/index.php?title=Tracking_code&oldid=2395"
Personal tools