Register  |  Login
Not what you were looking for?
 

If you just need information on Live Chat or Website  Tracking solutions, go to:

WhosOn Logo

Click here for a free trial    Download Free Trial Image

 

If you need advanced e-mail processing or auto-responders, look at:

Email2Db Logo

 
  Print    
     
WhosOn
 
Start Chat Click To Chat Now

This is a demonstration of the WhosOn DNN Module working in a DotNetNuke Page. The HTML displayed in this module is completely customisable.

Welcome visitor from United States

Number of operators waiting to take support chats: 3

 
  Print    
     
How To ... Track Form Fill
 

WhosOn can track the data that is filled into forms in real time. We do this by passing a parameter along to the gateway containing the information.

Download the WhosOn Form Tracker file from the Files section of this Portal.

Upload this to the root of your site, and insert this code into the bottom of any page (just before the </body> tag) you wish to track fields from (note the WhosOn tracking code must already be on the page).

<script language="Javascript" src="/whoson_formtracker.js"></script>

Note that this will overwrite any existing onblur events in your code, so don't use it if you need to use onblur for something else.

There is configurable option in the javascript:

var sWOFormPrefix = ""; // the prefix of forms as they are updated. Use this to preserve a correct view count on pages with forums.



Use the Prefix to change the saved page name in WhosOn. By default, filling in the form on test.htm which has a field with a name property of "Company" you will see in WhosOn:

test.htm?Company=thiscompany
and after the next event
test.htm?Email=
test@test.com

by default, the pagecount for test.htm will now show as 3.

In order to keep the original page count to the normal values, fill in the prefix - say if you specified

var sWOFormPrefix = "FormFill/";



Then in whoson you would get:

FormFill/test.htm?Company=thiscompany


So now you have the information in the pages portion of the database, and you can perform queries on the query strings of each visitor if you wish.

 
  Print    
     
How It Works
 

Here we will discuss how this is done. See the code below that we use to send the form info to WhosOn.

function WO_add_blurs()

This function adds the onblur event to each input field on the form. The blur event is similar to the OnValidate event, and is called when a user moves focus from the input field.

WO_add_blurs loops through all the INPUT elements, and if they are radio, text, or check boxes then it adds a function to be called when each blurs

After this it loops through all the select elements (list boxes & text boxes) and does the same.

function WO_blurred(e)

This is the function that is called after the blur event occurs. It takes the event parameter e, which is passed automatically by the blur event, and gets the element from the DOM.

From this element, it uses the WO_which_element function to get the correct element name.

If the element is a valid element, and the value is not an empty string, then it calls wo_send_data with the name and the value that is set.

function WO_send_data(name, value)

This function uses the data from the main WhosOn javascript file to send the information to the WhosOn database.

 
 
  Print    
     
The Code
 
var sWOFormPrefix = ""; // the prefix of forms as they are updated. Use this to preserve a correct view count on pages with forums.

function WO_add_blurs()
{
	var x=document.getElementsByTagName("input");
	for (idx = 0; idx < x.length; idx++)
	{
		if (x[idx].type.indexOf("text") > -1 || x[idx].type.indexOf("checkbox") > -1 || x[idx].type.indexOf("radio") > -1)
		{		
			x[idx].onblur = WO_blurred;
		}
	}
	var x=document.getElementsByTagName("select");
	for (idx = 0; idx < x.length; idx++)
	{		
		x[idx].onblur = WO_blurred;	
	}
}
function WO_blurred(e)
{
	var item_name;
	item_name = WO_which_element(e);
	var x=document.getElementsByName(item_name);
	if (x.length > 0)
	{
		if (x[0].value.length > 0)
		{
			WO_send_data(escape(item_name), escape(x[0].value));
		}
	}
}

function WO_which_element(e)
{
	var target;
	if (!e) var e = window.event;
	if (e.target)
	{
	 target = e.target
	}
	else if (e.srcElement)
	{
	 target = e.srcElement
	}	
	if (target.nodeType == 3) // defeat Safari bug
	{
	   target = target.parentNode
	}
	var tname;
	tname=target.name;
	return tname;
}
function WO_send_data(field, value)
{
	var iWO=new Image(1,1);
	var newPage = sWOPage;
	if(newPage.indexOf("%3F") == -1 && newPage.indexOf("%3F") == -1)
	{
		newPage = newPage+"?"+field+"="+value;
	}
	else
	{
		newPage = newPage+"&"+field+"="+value;
	}
	if (sWOFormPrefix.length > 0)
	{
		var i = newPage.lastIndexOf("/");
		if (i >= 0)
		{
			newPage = newPage.substring(0, i + 1) + sWOFormPrefix + newPage.substring(i+1);
		}
		else
		{
			newPage = sWOFormPrefix + newPage;
		}
	}
	sWOUrl=sWOProtocol+"//"+sWOGateway+"/stat.gif?u="+sWOSession+"&d="+sWODomain;
	sWOUrl+="&p='"+newPage+"'&r='"+escape(document.referrer)+"'";
	iWO.src=sWOUrl;
	return;	
}
WO_add_blurs();
 
  Print    
     
Text/HTML
 
Hover here, then click toolbar to edit content
 
  Print