Solved

Record page Hits to Spry Tabbed Panels

Posted on 2007-11-20
5
427 Views
Last Modified: 2013-12-13
Since redeveloping a site with Spry Tabbed Panels to replace separate pages, the record of page views has dropped by two-thirds since the page is referenced by $_SERVER["SCRIPT_NAME"]. Is there a way, Javascript or PHP, to record when a Panel tab is hit?
0
Comment
Question by:air4casts
  • 3
  • 2
5 Comments
 
LVL 4

Expert Comment

by:simonkin
ID: 20318832
Hi,

If you post your script I may be able to post a solution which uses AJAX (triggered by a javascript onClick event on the tab) to update your database with the page views.
0
 

Author Comment

by:air4casts
ID: 20329057
Thank you for your reply; a stripped down page is attached.
 <?php 

$site="int_tab";

$page=$_SERVER["SCRIPT_NAME"];  

$ip = getenv('REMOTE_ADDR');

$datein=date('Y-m-d H:i:s');

$daydate=date ('Y-m-d');

$referer=getenv('HTTP_REFERER');

$browser=getenv('HTTP_USER_AGENT');
 
 

require_once('Connections/conn_333mysql.php');

mysql_select_db($database_conn_333mysql, $conn_333mysql);

   $sql_login = "INSERT INTO hitcounter (site, page,ipad,date,referer,browser, daydate) VALUES(\"$site\",\"$page\",\"$ip\",\"$datein\",\"$referer\",\"$browser\",\"$daydate\")";
 

 mysql_query($sql_login,$conn_333mysql) or die(mysql_error());
 

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

</head>
 

<body>

<table width="600" border="0">

  <tr>

    <td><div id="TabbedPanels1" class="TabbedPanels">

      <ul class="TabbedPanelsTabGroup">

        <li class="TabbedPanelsTab" tabindex="0">First</li>

        <li class="TabbedPanelsTab" tabindex="0">Second</li>

        <li class="TabbedPanelsTab" tabindex="0">Third</li>

        <li class="TabbedPanelsTab" tabindex="0">Fourth</li>

      </ul>

      <div class="TabbedPanelsContentGroup">

        <div class="TabbedPanelsContent">Content 1</div>

        <div class="TabbedPanelsContent">Content 2</div>

        <div class="TabbedPanelsContent">Content 3</div>

        <div class="TabbedPanelsContent">Content 4</div>

      </div>

    </div></td>

  </tr>
 

</table>

<script type="text/javascript">

<!--

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

//-->

</script>

</body>

</html>

Open in new window

0
 
LVL 4

Accepted Solution

by:
simonkin earned 500 total points
ID: 20329474
Hi,

First of all, this is an AJAX script which uses both PHP and Javascript.

I've added a javascript function "recordVisit(id)" to the top of the page. You should save this as a seperate javascript file and call it from there.

I've also modified the tabs to wrap each tab name in a span which allows us to attach a javascript onclick function.

Example...

li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('First');">First</span></li>

Just replace the "First" in "recordVisit('First')" with the actual name of the tab that you want to log a visit for.

There is also an extra php script attached which the AJAX sends the parameters off to. This script actually updates the database and returns a status message to AJAX. If you like you can rename / store this to what you like, although if you do, make sure that all paths are correct.

Basically if you upload this script and the php script as is, you will see results.

The first file in the code snippet below is your file with the AJAX attached. The bottom file is the php file which you should save as "recordVisit.php" in the same directory as the page.

I've tried to explain this as best as I can, hope I didn't confuse you!
<?php 

$site="int_tab";

$page=$_SERVER["SCRIPT_NAME"];  

$ip = getenv('REMOTE_ADDR');

$datein=date('Y-m-d H:i:s');

$daydate=date ('Y-m-d');

$referer=getenv('HTTP_REFERER');

$browser=getenv('HTTP_USER_AGENT');

 

 

/*require_once('Connections/conn_333mysql.php');

mysql_select_db($database_conn_333mysql, $conn_333mysql);

   $sql_login = "INSERT INTO hitcounter (site, page,ipad,date,referer,browser, daydate) VALUES(\"$site\",\"$page\",\"$ip\",\"$datein\",\"$referer\",\"$browser\",\"$daydate\")";

 

 mysql_query($sql_login,$conn_333mysql) or die(mysql_error());*/

 

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

<script type="text/javascript">

// You should save this javascript function as a file and call it as above, if you do make sure the path to recordVisit.php is set properly relative to the script.

function recordVisit(id){	

	var ajaxRequest;  // The variable that makes Ajax possible!

	

	try{

		// Opera 8.0+, Firefox, Safari

		ajaxRequest = new XMLHttpRequest();

	} catch (e){

		// Internet Explorer Browsers

		try{

			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {

			try{

				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

			} catch (e){

				// Something went wrong

				alert("Your browser broke!");

				return false;

			}

		}

	}

	// Create a function that will receive data sent from the server

	ajaxRequest.onreadystatechange = function(){

		if(ajaxRequest.readyState == 4){

			// Comment out the following line if you don't want to see the javascript alert

			alert(ajaxRequest.responseText);

		}

	}

	

	// Which tab are we recording?

	var page = document.getElementById(id).innerHTML;

	

	// Hack to make sure we can re-use the AJAX request on the page

	var dynamic = "&dynamic=" + Math.floor(Math.random()*99999999999999999);

	var queryString = "?page=" + page;

	

	// Send the AJAX request off to the php loggin page...

	ajaxRequest.open("GET", "recordVisit.php" + queryString + dynamic, true);

	ajaxRequest.send(null); 

}

</script>

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<table width="600" border="0">

  <tr>

    <td><div id="TabbedPanels1" class="TabbedPanels">

      <ul class="TabbedPanelsTabGroup">

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('First');">First</span></li>

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('Second');">Second</span></li>

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('Third');">Third</span></li>

        <li class="TabbedPanelsTab" tabindex="0"><span id="First" onclick="recordVisit('Fourth');">Fourth</span></li>

      </ul>

      <div class="TabbedPanelsContentGroup">

        <div class="TabbedPanelsContent">Content 1</div>

        <div class="TabbedPanelsContent">Content 2</div>

        <div class="TabbedPanelsContent">Content 3</div>

        <div class="TabbedPanelsContent">Content 4</div>

      </div>

    </div></td>

  </tr>

 

</table>

<script type="text/javascript">

<!--

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

//-->

</script>

</body>

</html>
 
 

.....

.....
 
 

<?php
 

	// Define the variables

	$site="int_tab";

	$page=$_GET["page"];;  

	$ip = getenv('REMOTE_ADDR');

	$datein=date('Y-m-d H:i:s');

	$daydate=date ('Y-m-d');

	$referer=getenv('HTTP_REFERER');

	$browser=getenv('HTTP_USER_AGENT');
 

	// Load the database connection routine

	require_once('Connections/conn_333mysql.php');

	

	// Perform the query

	mysql_select_db($database_conn_333mysql, $conn_333mysql);

	$sql_login = "INSERT INTO hitcounter (site, page,ipad,date,referer,browser, daydate) VALUES(\"$site\",\"$page\",\"$ip\",\"$datein\",\"$referer\",\"$browser\",\"$daydate\")";

 

 	mysql_query($sql_login,$conn_333mysql) or die(mysql_error());
 

	// This is just for testing purposes, you can remove the following if you like.

	// It gives the content for the javascript alert box

	$return = "Page = $page \r\n";

	$return .= "IP = $ip \r\n";

	$return .= "Date In = $datein \r\n";

	$return .= "Day Date = $daydate \r\n";

	$return .= "Referrer = $referer \r\n";

	$return .= "Browser = $browser \r\n";
 

	// This is the result of the AJAX request

	echo $return;
 

?>

Open in new window

0
 

Author Comment

by:air4casts
ID: 20330339
Quite brilliant! Thanks very much
0
 
LVL 4

Expert Comment

by:simonkin
ID: 20334499
Hi,

Glad to have helped.

Now where are my points?!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

939 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now