目前很多網頁技術為了節省空間以及效能上的考量，會大量使用 Ajax 方式在同一個頁面撈取資料，頁籤尤其是最常使用的例子，Google 流量分析是絕大多數網站用來統計流量的工具，如何做到 Ajax 撈取資料時也可以同時列入 Pageview 呢，方式如下。
我們以 jQuery 的 Tabs 為例：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<link media="all" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#tabs').tabs({
select: function(ev, ui) {
window.location.hash = ui.tab.hash;
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview', window.location.href]);
}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#content1">content 1</a></li>
<li><a href="content2.html" title="content2">content 2</a></li>
<li><a href="#content3">content 3</a></li>
</ul>
<div id="content1">content 1</div>
<div id="content3">content 3</div>
</div>
</body>
</html>
原理很簡單，當選取了 tabs 之後，再次觸發 GA 的 track 功能，我先將 anchor 還原回去 url，再將 url 變數塞進 trackPageview 的變數裡面，你或許不想將 anchor 放置於超連結頁面，但這也代表你每點選一次就要自己指定網址一次，所以讓他自己去抓取是最方便的，當然，已經加上 anchor 了照理說應該也不用塞網址進變數，但我怕會有 lag 情況，這樣可以買雙保險。
沒有留言:
張貼留言