Fatal编程技术网
  • php/
  • 基于javascript和php的图像印象跟踪

基于javascript和php的图像印象跟踪

php javascript image

基于javascript和php的图像印象跟踪,php,javascript,image,Php,Javascript,Image,所以我想跟踪每个图像的图像（横幅）印象。 例如，如果一个图像在页眉中，则在加载页面时，它应该跟踪印象，但如果图像在页脚中，则仅当用户向下滚动到页脚时，它才应该跟踪印象 <body> <div style="clear:both; height:1000px;"></div> <div id="banner" style="clear:both; height:200px; background:#f00;">Test show</div>

所以我想跟踪每个图像的图像（横幅）印象。 例如，如果一个图像在页眉中，则在加载页面时，它应该跟踪印象，但如果图像在页脚中，则仅当用户向下滚动到页脚时，它才应该跟踪印象

<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>
我可以用php制作1x1像素的图像来跟踪它，但我想我也需要javascript

<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>
总之，我只想在用户看到图像时（而不是页面加载时）跟踪图像印象

<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>
有什么想法吗

<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>
注意：我已经搜索过了，这些问题只回答了如何跟踪页面加载的印象，这不是我想要的。

当页面加载时，使用javascript：

<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>
  • 确定图像相对于整个页面的位置
  • 检测用户浏览器窗口的大小
  • 如果图像在视口中，请对跟踪脚本运行ajax调用
  • 添加一个
    onscroll
    事件，用于检测图像是否已移动到视口中。。。如果是这样，请运行ajax跟踪脚本
那就差不多了。只需确保用于调用跟踪脚本的javascript函数只能运行一次（将全局
已跟踪
变量设置为false，并在跟踪函数运行时让脚本将其切换为true）
当页面加载时，使用javascript：


<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>



    

  • 确定图像相对于整个页面的位置
    • 

  • 检测用户浏览器窗口的大小
    • 

  • 如果图像在视口中，请对跟踪脚本运行ajax调用
    • 

  • 添加一个
    onscroll
    事件，用于检测图像是否已移动到视口中。。。如果是这样，请运行ajax跟踪脚本
    • 



那就差不多了。只需确保用于调用跟踪脚本的javascript函数只能运行一次（将全局
已跟踪
变量设置为false，并在跟踪函数运行时让脚本将其切换为true）
我确实理解您的问题。然而，这是一个非常复杂的问题！为了简化，您应该用以下心态来处理这个问题：“标题图像上有多少印象”（用PHP跟踪的纯印象）+“有多少用户向下滚动查看广告”（仅用javascript跟踪）


<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>


我给Ben投了更高的票，因为他在以下方面100%正确：要计算被“看到”的滚动广告，你必须计算屏幕尺寸+滚动值-图像位置，以查看广告是否被跟踪。如果你没有在标题中包含“印象”，你就疯了，因为像我这样的人没有运行脚本，也不会注册原始页面视图或滚动条


<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>



最有效的跟踪手段是“印象”和/或“转换”，因为它们不依赖用户操作系统、浏览器和浏览习惯来确定盈利能力。需要基本PHP和中间JS的共同努力。
我理解你的问题。然而，这是一个非常复杂的问题！为了简化，您应该用以下心态来处理这个问题：“标题图像上有多少印象”（用PHP跟踪的纯印象）+“有多少用户向下滚动查看广告”（仅用javascript跟踪）


<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>


我给Ben投了更高的票，因为他在以下方面100%正确：要计算被“看到”的滚动广告，你必须计算屏幕尺寸+滚动值-图像位置，以查看广告是否被跟踪。如果你没有在标题中包含“印象”，你就疯了，因为像我这样的人没有运行脚本，也不会注册原始页面视图或滚动条


<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>


最有效的跟踪手段是“印象”和/或“转换”，因为它们不依赖用户操作系统、浏览器和浏览习惯来确定盈利能力。需要基本PHP和中间JS的共同努力。
    

    <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>

    

  • 您可以看到跟踪调用的演示函数
    • 

    <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>

    

  • 您检测到轴滚动顶部+屏幕窗口高度>位置顶部元素横幅您发送的印象
    • 

    <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>

    






<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>




测试显示
var窗口原型={
wdHeight:function（）{
var-myHeight；
if（typeof（window.innerWidth）=“number”）{
//非IE
myHeight=window.innerHeight；
}else if（document.documentElement&&（document.documentElement.clientHeight））{
//IE 6+处于“标准兼容模式”
myHeight=document.documentElement.clientHeight；
}else if（document.body&（document.body.clientHeight））{
//IE4兼容
myHeight=document.body.clientHeight；
}
返回我的高度；
},
wdWidth:函数（）{
var-myWidth；
if（typeof（window.innerWidth）=“number”）{
//非IE
myWidth=window.innerWidth；
}else if（document.documentElement&&（document.documentElement.clientWidth））{
//IE 6+处于“标准兼容模式”
myWidth=document.documentElement.clientWidth；
}else if（document.body&（document.body.clientWidth））{
//IE4兼容
myWidth=document.body.clientWidth；
}
返回myWidth；
}
}   
函数getScrollTop（）{
var ScrollTop=document.body.ScrollTop；
如果（ScrollTop==0）
{
if（window.pageYOffset）
ScrollTop=window.pageYOffset；
其他的
ScrollTop=（document.body.parentElement）？document.body.parentElement.ScrollTop:0；
}
返回滚动顶部；
}
函数getElementTop（Elem）{
if（document.getElementById）{
var elem=document.getElementById（elem）；
}else if（document.all）{
var elem=文件。所有[elem]；
}
if（elem！=null）{
yPos=元素偏移；
tempEl=elem.offsetParent；
而