piwik统计单页面

Piwik是一个PHP和MySQL的开放源代码的Web统计软件. 它给你一些关于你的网站的实用统计报告，比如网页浏览人数, 访问最多的页面, 搜索引擎关键词等等。

单页应用是指在浏览器中运行的应用，它们在使用期间不会重新加载页面，单页应用可以做到一举两得：桌面应用的即时性和网站的可移植性和可访问性。

下面我们就使用piwik来统计单页面：

首先配置所需环境及工具

1.在archlinux中安装piwik：

yaourt -S piwik

2.安装apache和数据库mariadb以及php：

yaourt -S apache
yaourt -S mariadb
yaourt -S php php-apache

通过yaourt -Ss 名称 查看安装与否：

安装完成之后，
1.根据 Apache HTTP Server中的配置步骤进行配置相关信息，打开 配置信息详细步骤
2.创建Apache配置文件：/etc/httpd/conf/extra/piwik.conf
内容为：

Alias /phpmyadmin "/usr/share/webapps/piwik"
<Directory "/usr/share/webapps/piwik">
    DirectoryIndex index.php
    AllowOverride All
    Options FollowSymlinks
    Require all granted
</Directory>

然后在/etc/httpd/conf/httpd.conf中加入以下代码：

Include conf/extra/piwik.conf

修改完之后，启动httpd服务和数据库

sudo systemctl restart httpd
sudo systemctl restart mariadb.service

网址栏输入网址：本地IP/piwik / 就可以使用啦

然后可以通过如下路径中获取你的piwik跟踪代码：
Settings -> Websites -> View Tracking Code
为了跟踪你的网站数据，需要将如下的Piwik跟踪代码添加至每个网页上，以下是以单页面为例：

<script type="text/javascript">
    (function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);
      var _paq = _paq || []
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      // _paq.push(['trackEvent', 'el-menu-item', 'Click'])

      (function() {
        //安装Piwik软件的网站服务器具备其URL地址，如下两行指定了其URL地址：
        var u="//192.168.12.117/piwik/";
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        //在你的Piwik账户中创建的每一个网站都有一个唯一的siteID，如下代码指定了其siteID =6  
        _paq.push(['setSiteId', '6']);
          var g = document.createElement('script')
          var s = document.getElementsByTagName('script')[0]
          g.type = 'text/javascript'
          g.async = true
          g.defer = true
          g.src = u + 'piwik.js'
          s.parentNode.insertBefore(g, s)

  window.onpopstate = history.onpushstate = function(event) {
        console.log("popholdurl-------")
        //追踪一个新页面
        _paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)])
        _paq.push(['setDocumentTitle', document.domain + "/" + document.title])
        //以下一行代码将一次浏览传输到Piwik：
        _paq.push(['trackPageView'])
  }

      })()
    </script>

备注：
代码中用到window.history 即对象包含浏览器的历史。

HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。

简单来说：假设当前页面为renfei.org/，那么执行下面的 JavaScript 语句：

window.history.pushState(null, null, "/profile/");

之后，地址栏的地址就会变成renfei.org/profile/，但同时浏览器不会刷新页面，甚至不会检测目标页面是否存在。