How Get Time Spent on Webpage? Help, wont solve! over 5 hours :( !!

Printable View

Show 40 post(s) from this thread on one page

12-19-2008, 05:18 PM
flashtrickster

How Get Time Spent on Webpage? Help, wont solve! over 5 hours :( !!

Hey everyone,

So I have a problem with javascript php and html integration... its a real pain in the a*s..

So first off I started to look for a way to save the amount of time a visitor spends on your webpage... Well, I found this tutorial after 20 minutes of looking: http://javascript.internet.com/time-...t-on-page.html

It was real nice, so I tried it. Worked like a charm, but then the hard part was to get its variables (that stored the total amount of time spent) to php, so I could record the data in my SQL Database...

But-- after an hour of trying to parse the php in js, and other way around and tried alot of crazy scripting things... , I realized you CAN'T send JS vars to PHP!!! So I was sooo confused, then I went to the html part of the tutorial. (You have to put a js script in the <head> and then put a onload and onunload interval statement in the <body>, following the tutorial)

So I thought, I'll change this js script to php... and it shouldve worked out fine, and I think it did. So I put the php version of tracking time spent in my index.htm (which can parse php). So then I tried calling functions in the <body onload = 'window.setInterval(<?php timeHere() ?>, 100)' onunload = <?php sayTime() ?>> I found out that if i put a test script it'll work...but the problem was, the onload statement. I tried calling the timeHere php function inside setInterval, but it just wouldnt work!

And I had no way of seeing that my time tracking php script worked, since "onunload" you go to a different page, and if i tried printing back data i wouldnt see it!

So I've been doing this crap for over 4-5 hours, and no luck.

So I am asking you, or someone, probably Musicman, or anyone else to help me create a way to record how much time a visitor spends time on a webpage of mine, and then pass the totalTimeSpent var to php.

Please Help!

Thanks
12-21-2008, 05:12 AM
Musicman

Hi,

Quote:

I realized you CAN'T send JS vars to PHP!!!

have you ever heard of AJAX? The basic idea seems to be some odd javascripts that talk to a server - and the next idea seems to be to use a framework (some 50 to 100k of script code) to make use of it.
Here is a little example without a framework - it is simple because I do not care for
a) browsers not supporting it, like older IE, or other reasons for data lost
b) results returned - I am leaving anyway

Code:

<script> function start() { starttime = (new Date()).getTime(); xmlobj = new XMLHttpRequest(); xmlobj.open('POST', 'timelog.php'); } function leave() { stoptime = (new Date()).getTime(); xmlobj.send('spent='+(stoptime-starttime)); } </script> <body onload=start() onunload=leave()> How long will an idiot stare at this page before leaving it? <br><a href=xyz.php>view something else</a>

Of course you need to trust things, since there is no way to print back the results. How about actually creating a timelog.php that would record the data (time spent, perhaps visitor's ip address, or a cookie) to either a text file or a mysql table?

Musicman
12-21-2008, 04:13 PM
flashtrickster

Okay im sorry, i dont quite understand that script. Is there an AJAX script that i could use to just send the "finalTime" js variable to a php script? Because I dont know how to use ajax, and dont understand it.

timelog.php? do you mean make a different way to track time spent on a page? I would love for a way to do that, ex. an easy tutorial that can track amount of a time a visitor spend on page and then send it to sql database.

Thanks
12-21-2008, 06:59 PM
Musicman

Hi,

well, that's all the script is about :)
onload gets current time, onunload gets current time again, and the difference is sent as a variable "spent"
The essence of AJAX is that funny xmlhttprequest - a way to send a request to a server and get a response without loading a web page (before, you could have done similar, with js submit()ting a form, but the form would have to target a frame or window that was not about to close.
Now, how would a timelog.php for a database look?

Code:

<? // usual connection stuff first, then $spent = $_POST['spent']; if((string)$spent) !== (string)(int)$spent) exit; // someone is trying to send invalid data $ip = $_SERVER['REMOTE_ADDR']; mysql_query("insert into timetable (spent, ip) values ($spent, '$ip')"); ?>

Musicman
12-21-2008, 07:33 PM
flashtrickster

Ohhh, thanks! Haha Musican your a genius, by the way i have a just a few more q's.

1. Basically i have a whole tracking script thing in my index.htm, which parses php. And you know that js code you gave me up there? Should I call 'index.htm' instead of 'timelog.php', because then i could recieve post variables on my index.htm webpage.

2.That js code, when i open it in a window, www.trixmasta.com/timePage.js, it shows the code itself. This is a noob question, but im in hurry so I asked this. And when I open that page, isnt it supposed to send vars to php which is supposed to write to my database? For some reason it didnt...

3. Last question, how would I make a framework for ajax?

Thanks!
12-21-2008, 11:26 PM
flashtrickster

Update: It still wont work :(

I have the js in my index.htm, inside my <head> tags, and i have the <body onload and unload> thing, but still wont work. Seems as if the js isnt calling the php correctly. I checked the path names all right...but still the php script doesnt run. I even opened it in the browser, and it worked correctly (if i removed the "if((string)$spent !== (string)(int)$spent) exit; // someone is trying to send invalid data" line)" , then the php script would only record empty rows in the table (since there is no time variable to recieve from js). So the problem is, js isnt sending the vars to php correctly.

Please help, thanks!
12-21-2008, 11:57 PM
flashtrickster

Update again:

Sorry for posting twice, but the actual problem is the time variable isnt getting defined. JS does call the php script correctly, the reason is because, i was using google chrome and either it has js turned off or doesnt work cause its beta. So i used IE, and it recorded empty rows in my table again--which is good because that means the js talks to php correctly, but the variable itself wasnt defined.

Now i tried playing around with getTime objects, but since im a js newbie, i didnt fix anything.

So now we know this small problem, i bet you could fix it in a sec haha.
12-22-2008, 04:13 AM
Musicman

Hi,

I was using this exact html page I posted above, and it definitely sent POST requests with a "spent" variable. I am using mozilla browser, but Date should be standard on all browsers.

Do you have your script online, to take a look?

Musicman
12-22-2008, 05:00 PM
flashtrickster

Still wont work :(

here's my php:

PHP Code:

<?php $spent = $_POST['spent']; mysql_connect("localhost", "**********", "*********") or die(mysql_error()); mysql_select_db("*************") or die(mysql_error()); $query = mysql_query("INSERT INTO counter (time_spent) values ('$spent')"); if($query){ print "yes query works"; } ?>

and the js on testtime.html:

PHP Code:

<script> function start() { starttime = (new Date()).getTime(); xmlobj = new XMLHttpRequest(); xmlobj.open('POST', 'timelog.php',true); } function leave() { stoptime = (new Date()).getTime(); xmlobj.send('spent='+(stoptime-starttime)); } </script> <body onload=start() onunload=leave()> How long will an idiot stare at this page before leaving it? <br><a href=xyz.php>view something else</a>

you can also view it at: http://www.trixmasta.com/testtime.html

Every time I unload that page, it only inputs empty rows in my database, the time varibles are getting defined, because instead of 'stoptime- starttime' i used an actual number, but still no result in db. So the problem must be the way the script sends it?
12-22-2008, 06:42 PM
Musicman

Hi,

something strange on the php / mysql part: the page definitely sends a "spent" value via post, and the php script says it worked

Musicman
12-22-2008, 07:43 PM
flashtrickster

So then whats the problem?

Because i checked too, php script works. But I dont think the js is sending the variable correctly, because in my database i get empty rows :(
12-22-2008, 08:26 PM
flashtrickster

Ugh, still cant solve it. Keep getting empty rows :(

Please help

Thanks
01-04-2009, 02:22 PM
flashtrickster

please help...the same problem is still occuring
01-05-2009, 02:48 AM
Musicman

Hi,

when I tested, your web page definitely sent a value to the php script. That's about all I can do.
Did you get any counts in the database? Just one or two from me?
What kind of browser are you using - I got oldish mozilla (the last one before it got renamed to seamonkey)

Musicman
01-05-2009, 05:41 PM
flashtrickster

Hi, hmm...well i downloaded wireshark to try and look for packets being sent, but i dont even know how to view the packets. I tried capturing, but no packets found. :( What do you do with it so you can see vars being passed and packets?

Okay, i remade the two webpages:
http://trixmasta.com/timetest.php

PHP Code:

<?php $spent = $_POST['spent']; mysql_connect("localhost", "*********", "******") or die(mysql_error()); mysql_select_db("*************") or die(mysql_error()); //if((string)$spent !== (string)(int)$spent) exit; // someone is trying to send invalid data $query = "INSERT INTO time_test (time_spent) values ('$spent')"; $result = mysql_query($query) or die(mysql_error()); if($result){ print "yes query works"; } ?>

http://trixmasta.com/testJs.html

PHP Code:

<script type="text/JavaScript"> function start() { starttime = (new Date()).getTime(); xmlobj = new XMLHttpRequest(); xmlobj.open('POST', 'timetest.php'); } function leave() { stoptime = (new Date()).getTime(); xmlobj.send('spent='+(stoptime-starttime)); } </script> <body onload=start() onunload=leave()> How long will an idiot stare at this page before leaving it? <br><a href=xyz.php>view something else</a>

I tried with 3 different browsers, Mozilla Firefox 3.0.5, IE7, and Google Chrome. All of them recorded EMPTY rows in my database, except google chrome which didnt record anything.

Here is a online table of the database,
http://www.trixmasta.com/test_time_table.php
you can see each empty row everytime you run the html page with the javascript. I dont know what more info i can give, but do you have an idea why it wont send the var? It should work...this problem is soo annoying!

Thanks, please help!
01-05-2009, 06:50 PM
MyFriendIsATaco

Can you paste here your database schema? It's POSTing the 'spent' variable correctly, and returning the "yes query works". So something is going on when you're inserting it to your database.

Also on a side note, you should put some quotes around your onload and onunload statements.

Code:

<body onload="start()" onunload="leave()">

That's probably why Chrome isn't recording anything.
01-05-2009, 07:19 PM
flashtrickster

Wait, just wondering...how do you know if its is posting correctly? Wireshark? if so can you explain how i can use it to monitor sending the vars and stuff?

Well I'm not sure if this is what you want, but i went in information_schema, and clicked print view:

Table Records Type Size Comments
CHARACTER_SETS in use
COLLATIONS in use
COLLATION_CHARACTER_SET_APPLICABILITY in use
COLUMNS in use
Creation: Jan 05, 2009 at 04:17 PM
Last update: Jan 05, 2009 at 04:17 PM
COLUMN_PRIVILEGES in use
KEY_COLUMN_USAGE in use
PROFILING in use
ROUTINES in use
Creation: Jan 05, 2009 at 04:17 PM
Last update: Jan 05, 2009 at 04:17 PM
SCHEMATA in use
SCHEMA_PRIVILEGES in use
STATISTICS in use
TABLES in use
TABLE_CONSTRAINTS in use
TABLE_PRIVILEGES in use
TRIGGERS in use
Creation: Jan 05, 2009 at 04:17 PM
Last update: Jan 05, 2009 at 04:17 PM
USER_PRIVILEGES in use
VIEWS in use
Creation: Jan 05, 2009 at 04:17 PM
Last update: Jan 05, 2009 at 04:17 PM
17 table(s) 0 -- 0 B

Oh by the way, chrome still wont work :( I guess thats cause of the AJAX?
01-05-2009, 07:35 PM
MyFriendIsATaco

That's not the information I need. I'm assuming you're using phpMyAdmin.

Just do an export of the time_test table. I want to see what all columns are in there, and what the types are.

Oh, and I use Firebug to see the HTTP requests. It's a plugin for Firefox.
01-05-2009, 07:46 PM
flashtrickster

Oh okay, i uploaded it here :) : http://trixmasta.com/time_test.sql

Cool, I'll check it out.

Hmm, thats the strangest thing, it says sends the var by posting and yes query comes back, but then it inserts empty rows in the table?
01-05-2009, 08:40 PM
MyFriendIsATaco

Change your PHP to this:

PHP Code:

<?php print_r($_POST); ?>

I would just like to see what is coming up.

Also, what version of PHP is on your server?

[edit]Nevermind, it's PHP 5.2.8[/edit]
01-05-2009, 08:44 PM
MyFriendIsATaco

Hmm, as a response now, it's: yes query works, Spent=

Spent= being empty. Are you echoing the $spent variable?

If so, try changing $spent = $_POST['spent'] to $spent = $HTTP_POST_VARS['spent']
01-05-2009, 08:46 PM
flashtrickster

PHP version is: 5.2.8
Also, I was trying different things with the php script, and i tried GET, just to see if it would insert correctly...and it did it shows up in the table. So the problem is not inserting, its recieving the vars like I've been saying this whole time. Hmm, because now i also added ",Spent= $spent" to the print "yes query works".

Okay just changed the script to:
<?php print_r($_POST); ?>
01-05-2009, 08:48 PM
MyFriendIsATaco

Yeah, for some reason $_POST is an empty array.

Try:

PHP Code:

<?php print_r($HTTP_POST_VARS); ?>
01-05-2009, 08:53 PM
flashtrickster

Okay did that... same thing is happening :(
01-05-2009, 09:02 PM
MyFriendIsATaco

Ok. After digging around, I wrote a quick little form to post a variable manually, and it worked just fine.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Form Test</title> </head> <body> <form action="http://trixmasta.com/timetest.php" method="post"> <p><input type="text" value="100" name="spent" /></p> <p><input type="submit" value="Continue →" /></p> </form> </body> </html>

So, your PHP script is fine. It has to be the Javascript sending the variables, which is weird, because it shows up in Firebug correctly, but apparently not.

I'm not a pro Javascript coder, so I'm not sure how to narrow down that issue. Anything that I do with Javascript is through jQuery, and jQuery has ajax functions built in to handle all that stuff.

So, the bottom line is, your PHP script is fine. The Javascript to send the variables is a bit loopy. I think for once Musicman may have pointed ya in the wrong direction. :/

As a final resort, revert your PHP code back, and change your Javascript functions to this:

PHP Code:

function start() { starttime = (new Date()).getTime(); } function leave() { stoptime = (new Date()).getTime(); var params = "spent="+(stoptime-starttime); xmlobj = new XMLHttpRequest(); xmlobj.open('POST', 'timetest.php', true); xmlobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlobj.setRequestHeader("Content-length", params.length); xmlobj.setRequestHeader("Connection", "close"); xmlobj.send(params); }
01-05-2009, 09:15 PM
flashtrickster

You're a genius! Haha, thats great :) Im so happy now... this annoying problem is fixed, but I'm just wondering how did this js differ than the one Musicman gave?

Haha musicman was probably busy, can't blame him he's helping around all the time.

Hmm, just doubled check. And for some reason when I press load response in firebug, it doesnt echo back the $spent var. And in the table http://www.trixmasta.com/test_time_table.php the time_spent is recorded :) but for some reason it adds an empty row...
01-05-2009, 09:26 PM
MyFriendIsATaco

That's not exactly how to use Firebug. It's a weird little app that takes a long time to get used to all the details.

I added some request headers. The Content-type and Content-length. Also, the third parameter in xmlobj.open('POST', 'timetest.php', true); was missing in your script. It was present in his. The true tells the script to make an asynchronous request. I don't know if that would break it, but it should be there.
01-05-2009, 09:28 PM
flashtrickster

Ohh...that makes sense, but could you explain why there is an extra row being added in the table everytime? I'm stumped.

But when i add the:
if((string)$spent !== (string)(int)$spent) exit; // someone is trying to send invalid data

it eliminates the empty row, but still why would an empty row be added?
01-05-2009, 09:40 PM
MyFriendIsATaco

That doesn't appear to be the case when I'm checking it out.

It'll probably insert an empty row if you just go to timespent.php in your browser.

To eliminate that, just put at the top of the script:

PHP Code:

if($_SERVER['REQUEST_METHOD'] != 'POST') exit;

That just means if the file wasn't POSTed to, it exists.
01-05-2009, 09:46 PM
flashtrickster

Ahhhhh wait I know why! It's cause i clicked "Load Response", haha that makes sense. :)

Oh by the way, i'm going to be putting this js code on each webpage that has a php tracking script. And in that tracking script, all the userdata is recorded at once. But I want the time_spent to be recorded within that row, but how can I get that done if you can only get time_spent when the page unloads?

Thanks for help and troubleshooting
01-05-2009, 09:48 PM
MyFriendIsATaco

That's where cookies and sessions come into play. It's a whole other ballpark.
01-05-2009, 09:58 PM
flashtrickster

Do you have a source/tutorial for me too look into and learn that stuff, or get an idea?

Thanks
01-05-2009, 10:03 PM
flashtrickster

Actually nevermind, i found one on tizag...
But would cookies and sessions really be the right solution? Or is there quick way.
01-05-2009, 10:11 PM
MyFriendIsATaco

The point is to tie a specific id string to a persons computer so you can track what they do. That id can either be stored in a cookie or in a session variable. The most common is probably a cookie.

That id would then relate to a row in your database somehow and you can do whatever you want with it.

But the real question here is... why aren't you just using an already tried and true statistics tool? Like Google Analytics?
01-05-2009, 10:16 PM
flashtrickster

Ohh, I was actually thinking something along the lines of that. Maybe tell timetest.php to insert the time_spent in the row with the same last ip address and page. But then that could possibly not work, if multiple windows are open or many people are online at once.

Haha, well I already have google analytics and clicky on my website :) But, google anlaytics lacks one feature-- recording ip addresses. And I need to have a way to differ each visitor from each other. Plus, I wanted to be able to create my own tracking script, of course with help from you guys when there is a script problem haha.
01-06-2009, 03:27 AM
MyFriendIsATaco

Different IPs don't necessarily mean different people.

But Google Analytics does record IP addresses, just not right out in the open. It's tracked in the form of "unique hits".

Unique visitors is exactly what you want.
01-06-2009, 09:13 AM
Musicman

Hi,

one of the - at least controversial - things about google analytics: in the end google knows much more about your visitors than you do

Musicman
01-06-2009, 07:34 PM
flashtrickster

thats true...but wait how would i get a unique visitor? by using cookies? Because thats what i'm doing :)

Hey musicman, i never knew that! Ha another reason I should make a custom tracking script, haha.

I am actually working on it..but i hope my theory works, correct me if i'm wrong:

1.Person visits www.trixmasta.com
2.index.htm runs a php script that gathers ip addresses, broswer, site referal, and assigns an id number (auto increment) to the row with the visitor info. Then by using mysql_insert id(), it gets that id number and creates a cookie. That cookie, has the id number, and is set to expire when the session has ended. THEN when the browser unloads, the js sends time spent to the php script, which stores that time spent in a variable. Then it reads computer for the cookie name created earlier, and reads the id number. It the queries "UPDATE table SET time_spent= '$timespent' WHERE id= '$id'". That will basically put the time spent var in the correct row with user data.

Is my idea correct, as in would it make sense to work? The only thing im confused about is the expiration date for the cookie, i made it to be when the session ends (or when the browser is closed). Because would opening multiple windows or other things like that, mess up the ids?

Thanks
01-06-2009, 09:03 PM
flashtrickster

Okay I just tested, and finished my idea above and it works great :)
The only problem is (there's always some issue) that Google Chrome still does not record the time_spent, probably due to AJAX? I have checked chrome, javascript is enabled... hmm i just dont know what would cause Chrome to not record the time spent variable.

Anyways thank you all for your help :)
01-07-2009, 12:57 AM
Musicman

Hi,

two things google does differently
- they try to set a cookie with 1 month lifetime, so unless someone has turned cookies off or runs a cookie cleaner, unique visitors is really what it means - regardless of people sharing an ip address, or using dynamic ip address.
- their "time spent on site" is derived from clicking links within the site that also have a google code applied to them

Isn't Chrome still beta? maybe the developer team has a solution or takes a bug report...

Musicman

Show 40 post(s) from this thread on one page

All times are GMT -4. The time now is 04:39 AM.