• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 447
  • Last Modified:

Record page Hits to Spry Tabbed Panels

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
air4casts
Asked:
air4casts
  • 3
  • 2
1 Solution
 
simonkinCommented:
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
 
air4castsAuthor Commented:
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
 
simonkinCommented:
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
 
air4castsAuthor Commented:
Quite brilliant! Thanks very much
0
 
simonkinCommented:
Hi,

Glad to have helped.

Now where are my points?!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now