Question

最近，我遇到了在单页网站上跟踪用户的问题＆＃34;使用Google Analytics。我想分享我的解决方案。请参阅下面的答案。

Answer 1

最近，我遇到了在单页网站上跟踪用户的问题＆＃34;使用Google Analytics。我想分享我的解决方案。

-----页面布局-----

1a. Header with logo and menu (links scroll page down to selected chapter)
2a. Section with big paralax bakground
2b. Chapter header <section><h2>Title 1</h2></section>
2c. Chapter's content <div>content</div>
3a. Section with big paralax bakground
3b. Chapter header <section><h2>Title 2</h2></section>
3c. Chapter's content <div>content</div>
...
Na. Section with big paralax bakground
Nb. Chapter header <section><h2>Title N</h2></section>
Nc. Chapter's content <div>content</div>

-----要求-----

算法必须检测页面向下滚动的时间，以便用户可以看到所选章节。
算法必须检测到用户实际上花了一些时间来熟悉章节的内容。必须向Google Analytics报告此事实。
当他只是滚动浏览时，算法无法报告用户阅读章节。

----算法-----

等待页面加载
创建一个章节列表及其相对于网站顶部边框的位置。
当用户可以看到所需的章节时，必须在一段时间后重新检查此条件，以证明用户实际上花了一些时间阅读内容。
如果满足上述条件，则向Google Analytics报告此事实。

----示例代码-----

<script type="text/javascript">

var scrollstat = []

// Preparing array of chapters and positions
$(document).ready(function() {
    $("section").each(function() {
        var ts = {};
        ts["offset"] = $(this).offset();
        str = $("h2", this).html();
        ts["name"] = "SECTION-"+str.replace(" ","-")+"/";
        ts["checked"] = false;
        ts["timer"] = false;
        scrollstat.push(ts);
     });
});

//Checking that user is still on the same chapter
function doublecheck(ii) {
    scrollpos = $(window).scrollTop();
    max = scrollpos + 300;
    min = scrollpos;
    if (scrollstat[ii].checked == false && scrollstat[ii].offset.top > min
    && scrollstat[ii].offset.top < max) {
        _gaq.push(['_trackPageview', (location.pathname + location.search
        + scrollstat[ii].name)]);
        scrollstat[ii].checked = true;
    }
    console.log(scrollstat[ii].offset.top+','+min+','+max);
    scrollstat[ii].timer = false;
}


//Separate function for setting timer to count 3s
//If user don't scroll to other chapter within this time
//event is reported to GA

function settimer(ii) {
    scrollstat[ii].timer = true; 
    setTimeout(function() {doublecheck(ii);},3000);  
}

//Handling scrolling event
$(window).scroll(function() {
    scrollpos = $(window).scrollTop();
    max = scrollpos + 300;
    min = scrollpos;
    for (index = 0; index < scrollstat.length; ++index) {
        if (scrollstat[index].checked == false &&
        scrollstat[index].timer == false &&
        scrollstat[index].offset.top > min &&
        scrollstat[index].offset.top < max) {
              settimer(index);
        }
    }
});

</script>

MAX和MIN变量是通过实验估算的。在我的情况下，我假设章节标题必须滚动到屏幕的顶部。

作为上述脚本的结果，每个章节都作为单独的页面访问报告给GA，地址如下：＆＃34; / SECTION-chapter-title /＆＃34;

使用Google Analytics跟踪单页网站上的用户

1 个答案: