0

so I want to track image(banner) impressions for each image. for example if one image is in header it should track the impression when the page is loaded but if the image is in footer it should only track it when user scrolls down to footer.

I can do the 1x1 pixel image to track it with php,but I think I need javascript as well,

in summary I want to track the image impression ONLY when the image is seen by user (not when page is loaded).

Any ideas ?

note: I've already searched and the questions only answer how to track impression on page load which is not what I'm looking for.

Danny
  • 181
  • 1
  • 3
  • 8
  • This is too broad of a question... – MDrollette Jul 03 '12 at 04:18
  • There is some interesting stuff about true visibility in this question: http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript – Samuel Jul 03 '12 at 04:29
  • thanks samuel,the answer by tubias seems good However I can't define an event for it (don't know for what)?! and I cant put a timer to check every 1 second either (that would be stupid). – Danny Jul 03 '12 at 05:06

4 Answers4

3

When the page loads, use javascript to:

  • Determine the location of the image with respect to the whole page
  • Detect the size of the user's browser window
  • If the image is in the viewport, run an ajax call to the tracking script
  • Add an onscroll event that detects if the image has been moved into the viewport... if so, run the ajax tracking script.

That should about do it. Just make sure that the javascript function that you use to call the tracking script can only be run once (set a global has_been_tracked variable to false, and have the script switch it to true when the tracking function runs)

Ben D
  • 14,321
  • 3
  • 45
  • 59
  • how about if I use lazyloading for images ? the image is loaded only if it's been seen,and I can track the impression when image has been requested ?! – Danny Jul 03 '12 at 05:03
  • Lazy-loading is an interesting approach. Are you using a framework (jquery, yui?). My major concern here would be the affect of browser caching on your loader... if the user had already loaded the image on another page, the script will lazy-load the image from cache when it is triggered and might skip your logging (assuming you're doing server-side logging in this case). However, I'm guessing the lazy-load script is basically doing what I describe above and rather than logging, it switches the `src` property of the "lazy-image" (1px x 1px image), so it could probably be easily adapted. – Ben D Jul 03 '12 at 05:34
  • Alternately, you could add a random string to the `alt_src`, which would avoid the cache issue. (So rather than ``, you'd have the `alt_src`, which would avoid the cache issue. (So rather than ``). You could generate this random string using php, or you could modify the lazyload script to automatically append a random string to the `alt_src` before switching the image. Also, keep in mind that the lazy loader will lag if the image is sizable. – Ben D Jul 03 '12 at 05:39
0

I do understand your question. However, this is a VERY complex problem! To simplify, you should approach this with the following mindset: "How many impressions on the header image" (pure impressions tracked in PHP) + "How many user scrolled down do view an ad" (only tracked with javascript).

I've upvoted Ben, because he is 100% right on the following: to calculate the scrolled ad as being "seen" you will have to calculate screen dimensions + scroll value - image position, to see if the ad is being tracked. If you do not include "impressions" on the header you are crazy, because people like ME are running no script and will not register the original pageview, or the scroll.

The most efficient means of tracking is by "impressions" and/or "conversions" because they do not rely on the users OS, browser, and browsing habits to determine profitability. A combined effort of basic PHP and intermediate JS are required.

James L.
  • 4,032
  • 1
  • 15
  • 15
  • well I'm trying this for an ad management script,so if user doesn't have javascript it wont show it in first place. besides I think more than 98% people have javascript enabled. – Danny Jul 03 '12 at 05:01
  • Ok, then please change the title from "IMPRESSIONS TRACKING" to "JAVASCRIPT TRACKING". – James L. Jul 03 '12 at 05:03
0

  • you can see demo function tracking call impression

  • you detect axis scrolltop + screen window height > position top element Banner you send impression.

<body>
<div style="clear:both; height:1000px;"></div>
<div id="banner" style="clear:both; height:200px; background:#f00;">Test show</div>
<script language="javascript">
var windowPrototype={
    wdHeight:function(){
        var myHeight;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myHeight = window.innerHeight;
        } else if( document.documentElement && (  document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myHeight = document.documentElement.clientHeight;
        } else if( document.body && (  document.body.clientHeight ) ) {
            //IE 4 compatible
            myHeight = document.body.clientHeight;
        }
        return myHeight;
    },
    wdWidth:function(){ 
        var myWidth;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myWidth = window.innerWidth;

        } else if( document.documentElement && ( document.documentElement.clientWidth  ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;

        } else if( document.body && ( document.body.clientWidth  ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;

        }
        return myWidth;
    }
}   
function getScrollTop(){
      var ScrollTop = document.body.scrollTop;
       if (ScrollTop == 0)        
         {
             if (window.pageYOffset)
                 ScrollTop = window.pageYOffset;
             else
                 ScrollTop = (document.body.parentElement) ?     document.body.parentElement.scrollTop : 0;
         }
    return ScrollTop;
}
function getElementTop(Elem) {
    if(document.getElementById) {   
        var elem = document.getElementById(Elem);
    } else if (document.all) {
        var elem = document.all[Elem];
    }
    if(elem!=null){
        yPos = elem.offsetTop;
        tempEl = elem.offsetParent;
        while (tempEl != null) {
            yPos += tempEl.offsetTop;
            tempEl = tempEl.offsetParent;
        }
        return yPos;
    }
    else{
        return 0;
    }
}
function tracking(){                        
    var scrolltop=getScrollTop();
    var advZoneTop=getElementTop('banner');
    if((scrolltop+windowPrototype.wdHeight())>advZoneTop){
            //send code tracking.
        alert('send tracking code');
        if(document.images){
            var img=new Image();
            img.src='http://logging.com/trackingbanner.jpg';
        }
    }else{
        setTimeout('tracking()',100);
    }
}
tracking();
//you can on scroll 
/*
window.onscroll = function () {  
  // called when the window is scrolled.  

        var scrolltop=getScrollTop();
        var advZoneTop=getElementTop('banner');
        if((scrolltop+windowPrototype.wdHeight())>advZoneTop){
                //send code tracking.
            alert('send tracking code');
            if(document.images){
                var img=new Image();
                img.src='http://logging.com/trackingbanner.jpg';
            }
        }
}  */
</script>
</body>
</html>
ndhanhse
  • 154
  • 1
  • 4
  • 1
    this is using setTimeout to check every 0.1 second,I'm not sure but I don't think this is smart and may cause cpu/ram usage increment,but I could be wrong,need others to confirm. – Danny Jul 03 '12 at 05:10
0

http://patik.com/blog/within-viewport-javascript-and-jquery-plugin/

The link above is to a script which will trigger an event when an element (particular image on your case) is entirely within the viewport.

On the footer image being in full view you could chose to track these events in Google Analytics or AJAX to call a PHP script should you have your own custom tracking count.

Sumobaby
  • 1