image impression tracking using javascript and php
Question
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.
4 answers
solution1
2 2012-07-03 04:27:49
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
onscrollevent 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)
solution2
0 2012-07-03 04:43:02
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.
solution3
0 ACCPTED 2012-07-03 04:53:29
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>
solution4
0 2012-07-24 12:27:21
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.