Client-based Javascript Hyperlink Counter: Counts User Clicks Realtime

joseph2038 · Jun 2, 2003

Hello,

I hope someone can help me with some coding. I've been searching for a script that will allow me to count user clicks on hyperlinks.

I'm doing a research study on interface design. I would like a script that counts the number of clicks that users take to navigate a menu design. I want this number to show ON SCREEN not to record on some server database. The script does not have to "record" the number of clicks just SHOW them realtime as the user is interacting with the site.

The webpage has two frames (top and bottom). The bottom frame has a timer and hopefully a click (hyperlink) counter. The main frame has the navigation interface. As the user navigates <a href tags the clicks are counted.

I searched the web and couldn't find such a script. I'm not familiar enough with JavaScript to write it myself.

Any leads???

Thanks

robi2 · Jun 2, 2003

I would suggest you save the data through your frames using cookies, there are lots of functions for cookies on the web.

Then add an OnClick tag to your <a hrefs and use it to run a function that adds 1 to the write cookies which i suggest you name as a link.

Basicly you need to just create all of the cookies for your links on the start of the page and set them to 0, then whenever a user click a link add 1 to the appropriet cookie.

I think there is another way you can do it, not with cookies, and just save the data on some variables, and then do the same and increase their value by one on each click on a link, and then write it out to the client using the innerHTML property of a div or whatever tag you want.

Hope i helped...

HumbleSeeker · Jun 2, 2003

Here are three files I've just created which might do what you want. Explaination at the bottom

index.html
----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<frameset rows="*,80" frameborder="NO" border="0" framespacing="0">
<frame src="mainWindow.html" name="mainFrame">
<frame src="counter.html" name="counter" scrolling="NO" noresize>
</frameset>
<noframes><body>

</body></noframes>
</html>
--------------------------

mainWindow.html
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function anotherClick()
{
parent.counter.addAnotherClick()
}
</script>
</head>

<body>
<a href="

http://www.bbc.co.uk"

onClick="anotherClick()" target="_blank">

http://www.bbc.co.uk</a><BR>

<a href="

http://news.bbc.co.uk"

onClick="anotherClick()" target="_blank">news.bbc.co.uk</a><BR>
<a href="

http://www.tek-tips.com"

onClick="anotherClick()" target="_blank">

http://www.tek-tips.com</a><BR>

</body>
</html>
--------------------------

counter.html
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var counterVariable = 0

function addAnotherClick()
{
counterVariable = counterVariable + 1
document.counterForm.counter.value = counterVariable
}

function onLoadSet()
{
document.counterForm.counter.value = 0
}

</script>
</head>

<body onLoad="onLoadSet()">
<form action="" method="get" name="counterForm">
<input name="counter" type="text" value="" size="3" maxlength="3" >
</form>
</body>
</html>
--------------------------

Right this is a simple little thing. In the bottom frame you will notice that there is a form text input, this is were the counting number will be displayed. Further up in counter.html are two functions. The first function to be called is onLoadSet() in the onload command, this sets the value of the text box to 0.

The top most function is the function that will add one to the counter value when your link in the mainWindow.html is clicked. The function is called from the mainWindow.html by the onClick="anotherClick()" embedded in to the link. The anotherClick() function simply calls the function in the counter.html.

Sounds complicated but it isn't if I have confused try the code, thats the best thing.

Humble Seeker
The longest journey begins with the smallest step.

jemminger · Jun 2, 2003

as if you didn't have enough examples already, here is mine...create these three files, then open linkFrameset.html and click away:

save as linkFrameset.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>link counter</title>
<frameset rows="75%,*">
<frame name="topFrame" src="linkPage.html"/>
<frame name="botFrame" src="linkCounter.html"/>
</frameset>
</head>
</html>

save as linkPage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
</head>

<body>
<br/><a href="#">link</a>
<br/><a href="#">link</a>
<br/><a href="#">link</a>
</body>
</html>

save as linkCounter.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var secs = 0;
function timer() {
document.getElementById("secs&quot

.innerHTML = secs++;
}
function writeLinks() {
var l = parent.topFrame.document.links;
var s = "";
for (var x = 0; x < l.length; x++) {
s += 'Link ' + x + ': <span id="link_'+x+'"></span><br/>';
}
document.getElementById("links&quot

.innerHTML = s;
}
function attachListeners() {
var l = parent.topFrame.document.links;
for (var x = 0; x < l.length; x++) {
l[x].onclick = handleClick;
l[x].clicks = 0;
l[x].id = "link_" + x;
}
}
function handleClick() {
document.getElementById(this.id).innerHTML = ++this.clicks;
}
window.onload = function() {
window.setInterval("timer();", 1000);
writeLinks();
attachListeners();
}
</script>

<style type="text/css">
body {
font:menu;
}
</style>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
</head>

<body>
Seconds Elapsed: <span id="secs"></span>
<p/>Clicks:
<br/>
<div id="links"></div>
</body>
</html>

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff

http://www.jeffemminger.com

joseph2038 · Jun 3, 2003

Hello Jeff and HumbleSeeker,

Thanks for the scripting.

I was able to combine some other code and HumbleSeeker's code to get it working properly. It works fairly well now. Jeff's code was pretty neat too. Very simple and clean.

Thanks for your help:

*******************

If interested here is the code for the counter.html page. In includes client-side realtime hyperlink counter and timer (there is some table formatting here to; sorry for the clutter):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Footer Frame: Timer / Click Counter</title>

<script language="JavaScript">

<!-- Begin Timer
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() {
var myTime = new Date();
var timeNow = myTime.getTime();
var timeDiff = timeNow - clockStart;
this.diffSecs = timeDiff/1000;
return(this.diffSecs);
}
function getSecs() {
var mySecs = initStopwatch();
var mySecs1 = ""+mySecs;
mySecs1= mySecs1.substring(0,mySecs1.indexOf(".&quot

) + " s";
document.forms[0].timespent.value = mySecs1
window.setTimeout('getSecs()',1000);
}
// End Timer-->



</script>
<base target="main">
</head>

<body bgcolor="#C1E0FF" onLoad="window.setTimeout('getSecs()',1);onLoadSet()">
<div align="left">

<FORM action="" method="get" name="counterForm">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%"><b><font face="Arial" color="#FFFFFF" size="3">clicks<br>
</font></b>
<input name="counter" type="text" value="" size="5" maxlength="3" >

</td>
<td width="33%"></td>
<td width="34%">

<p align="right"> <b><font face="Arial" color="#FFFFFF" size="3">secs<br>
</font></b><input size=3 name=timespent style="font-size: 10pt; font-family: Arial"></p>

</td>
</tr>
</table>
</form>

</div>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Client-based Javascript Hyperlink Counter: Counts User Clicks Realtime

joseph2038

Instructor

robi2

Programmer

HumbleSeeker

Programmer

jemminger

Programmer

joseph2038

Instructor

Similar threads

Part and Inventory Search

Sponsor