Question

所以我想跟踪每张图片的图片（横幅）展示次数。例如，如果一个图像在标题中，它应该在页面加载时跟踪印象，但如果图像在页脚中，它应该只在用户向下滚动到页脚时跟踪它。

我可以用1x1像素图像跟踪它，但我觉得我也需要javascript，

总结我想要仅在用户看到图像时跟踪图像印象（而不是在加载页面时）。

有什么想法吗？

注意：我已经搜索过，问题只回答了如何跟踪页面加载时的展示次数，这不是我想要的。

Answer 1

加载页面时，请使用javascript：

确定图像相对于整个页面的位置
检测用户浏览器窗口的大小
如果图像位于视口中，请对跟踪脚本运行ajax调用
添加onscroll事件，检测图像是否已移入视口...如果是，请运行ajax跟踪脚本。

应该这样做。只需确保用于调用跟踪脚本的javascript函数只能运行一次（将全局has_been_tracked变量设置为false，并在跟踪函数运行时让脚本将其切换为true）

Answer 2

我明白你的问题。但是，这是一个非常复杂的问题！为简化起见，您应该采用以下思维方式：“标题图片上的展示次数”（在PHP中跟踪的纯展示次数）+“向下滚动多少用户查看广告”（仅使用javascript跟踪）。

我赞成Ben，因为他在以下方面100％正确：要将滚动的广告计算为“看到”，您必须计算屏幕尺寸+滚动值 - 图像位置，以查看广告是否正在跟踪。如果你没有在标题中包含“印象”，那你就疯了，因为像ME这样的人没有运行脚本而且不会注册原始的综合浏览量或滚动。

最有效的跟踪方式是“展示次数”和/或“转化次数”，因为它们不依赖于用户操作系统，浏览器和浏览习惯来确定盈利能力。需要基本PHP和中级JS的共同努力。

Answer 3

您可以看到演示功能跟踪通话印象
检测轴滚动顶部+屏幕窗口高度＆gt; position top element你发送印象的横幅。

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

Answer 4

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

上面的链接是一个脚本，当一个元素（你的案例中的特定图像）完全在视口中时，它将触发一个事件。

如果页脚图像处于完整视图，您可以选择在Google Analytics或AJAX中跟踪这些事件，以便在您拥有自己的自定义跟踪计数时调用PHP脚本。

使用javascript和php进行图像展示跟踪

4 个答案: