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/,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值