SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Logging Page Position of Visitors. Is it possible?

    Hi,

    Is there a proven method/demo that shows how to log (track) the position of a scroll/mouse on a page, so one can determine how far down a salesletter a user goes, before they leave?

    I can pass data upon the exit, and even send it to a db every second if need be. I just need to learn how to GRAB such a value in the first place.

    How would one do this?

    Thank you

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always retrieve the documents body scrollTop position, but that won't be accurate, since that will depends on the users resolution.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pepe you have a great idea. Altho these things are usually difficult to get really cross-browser.

    I threw together a little demo of the idea. Watch the status bar as you scroll. It may not be very cross-browser - I threw it together very quickly and I did not use my library.

    Code:
    window.onload = function()
    {
      window.onscroll = winOnScroll;
    }
    function winOnScroll()
    {
      var st = document.documentElement.scrollTop;
      var sh = document.documentElement.scrollHeight;
      var ch = document.documentElement.clientHeight;
      if (window.opera) ch = document.body.clientHeight;
      var per = 100 * st / (sh - ch);
      window.status = st + ' / (' + sh + ' - ' + ch + ') = ' + per + '%';
    }

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reason why this wouldn't be useful is that if you maxime your window you might get something like scrollTop = 300 for the "But I must explain" headline. But if you then make the window smaller you will get a completely different number for that headline.


  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's true - that's why all that matters is the percentage. I would not record the user's current pixel position - I would record where they are as a percentage of the total page height. Try my demo, it doesn't matter what size the window is - if you scroll all the way down you will get "100%".

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, now I see you have percentage as well. Though I can get different percentages for the same headline. Just make the width of the window smaller and you will see.

  7. #7
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it works in IE.

    Quick Q. How do I use javascript to take that position and save the position as a variable? I figure I'd use onunload
    to hit 'track.php' (image pixel type tracking)...such as image.php?time=$varvalue

    Problem is, I don't know how, in javascript, to turn that scroll value into $varvalue

    Thanks. And I will gladly send a donation

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    To pass info from Javascript to PHP you need to use Ajax. Any Ajax tutorial should give you the basics of what you are after. Probably best to pass it at regular intervals while they are on the page as there isn't much time for onunload scripts to do anything before the next page starts loading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool idea, just a minor aesthetics thing. I think that

    Code:
    var per = 100 * st / (sh - ch);
    be

    Code:
    var per = Math.round(100 * st / (sh - ch));
    if only to save space in the database by storing the percents as integers rather than floating point numbers?

    Dave

  10. #10
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thing is ,I am new to javascript. how do I strip that info from the function and even make a var?

    OR even have it used as a querystring to
    track.php?scrollvar=$value

    How do I turn that value into even a javascript variable to use outside of the function?

    Thanks

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Ah, now I see you have percentage as well. Though I can get different percentages for the same headline. Just make the width of the window smaller and you will see.
    Yes you are right. But I think a percentage does provide an answer to the OP's question:
    Quote Originally Posted by jbh
    so one can determine how far down a salesletter a user goes
    This will allow you to make reports like: "x number of people read y&#37; of our salesletter".

    dwees, thanks - great suggestion.

    jbh, I hope this helps get you going. Also, please note the point that Pepejeria is making. If you want to record absolute positions then my suggestion will not work.
    Code:
    var percentViewed = 0;
    window.onunload = function()
    {
      //var trackUrl = "track.php?pv=" + percentViewed;
      alert("You have viewed " + percentViewed + "% of this page.");
    }
    window.onscroll = function()
    {
      var st = document.documentElement.scrollTop;
      var sh = document.documentElement.scrollHeight;
      var ch = document.documentElement.clientHeight;
      if (window.opera) ch = document.body.clientHeight;
      var per = 100 * Math.round(st / (sh - ch));
      if (per > percentViewed) {
        percentViewed = per;
      }
      //window.status = st + ' / (' + sh + ' - ' + ch + ') = ' + percentViewed + '%';
    }

  12. #12
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey mike,

    If I wish to send this info to track.php, I just call trackUrl?
    Such as (after removing the //) document.writeline.var or just write out the image.php with the querystring and var?
    I will remove the alert, but I see how it helps in the demo.

    I just want to make sure. Even something as 'use this variable, dummy' is foreign to this php guy, in javascript

    But I'll test this out. And I really want to thank you for helping me, very slowly, learn this concept.

    It's very helpful and greatly appreciated. Same to all of you.

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how you want to do it. felgall mentioned using Ajax. You mentioned the image technique. I guess you could do something like this:
    Code:
    var percentViewed = 0, trackerImg = new Image();
    window.onunload = function()
    {
      trackerImg.src = "track.php?pv=" + percentViewed;
      //alert("You have viewed " + percentViewed + "&#37; of this page.");
    }
    window.onscroll = function()
    {
      var st = document.documentElement.scrollTop;
      var sh = document.documentElement.scrollHeight;
      var ch = document.documentElement.clientHeight;
      if (window.opera) ch = document.body.clientHeight;
      var per = 100 * Math.round(st / (sh - ch));
      if (per > percentViewed) {
        percentViewed = per;
      }
      //window.status = st + ' / (' + sh + ' - ' + ch + ') = ' + percentViewed + '%';
    }

  14. #14
    SitePoint Guru
    Join Date
    Mar 2002
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah ,that should work. I just wasn't familiar enough with javascript to know if I had to call the function first, or if the syntax of just pointing to track.php, through javascript, was enough

    That is what I'll try

    I take it, in javascript, one has to use this method because there is no way to place markers that can be tracked, correct? Or is Ajax built in such a way that it is now possible? What's funny is I can use onunload and a unique function to 'push/refresh' every x seconds, silently, but I could not figure this part out.

    I have a lot to learn. But I thank you for your time.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •