Solved

Record page Hits to Spry Tabbed Panels

Posted on 2007-11-20
5
430 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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP Installer 5 28
Display images from mysql blob type (Not working) 9 31
PHP Syntax Error 4 27
How to resize a div in html 3 16
This article discusses four methods for overlaying images in a container on a web page
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

825 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