教你给网站添加个性化信息统计

本方法适用于一切网站博客,超级简单,不限制于Wordpress ,typecho 等等。

当然这个软件自己本地部署的话是免费的,没有任何限制,用它官网的是有免费期限的。见下载说明 https://matomo.org/download/

以下以官网示例,当然你可以下一个自己部署,操作是一样的。

demo 演示(我的没开跨域请求,所以可能没数据):

教你给网站添加个性化信息统计-即刻学术
教你给网站添加个性化信息统计-即刻学术

教你给网站添加个性化信息统计

第一步:添加访客统计

为什么不用百度统计,友盟? 因为没提供获取数据的api接口,所以这里换用更好用的 motomo。

首先用到的工具是 matomo 一个国外很火的信息统计分析站。

官方地址 :https://matomo.org/

打开官网先去注册个账户,点右上角 try it for free,会让你填写网址和邮箱,填完之后,邮箱会收到你的账号密码,和一个专用域名网址。(Connect to your Matomo at:xxxx 这里是你的专用网址)

教你给网站添加个性化信息统计-即刻学术

登陆之后,点击右上角设置,language 语言可以改成中文,记得点save 保存。页面刷新一下语言就切换了。

教你给网站添加个性化信息统计-即刻学术

然后继续在设置界面:个人->安全。 去把默认的密码修改了,不然原来随机的不好记。

顺便在安全页下面有个验证令牌,去生成一个,后面要用,只生成一次,要自己保管好。

教你给网站添加个性化信息统计-即刻学术

接下来可以去主页的报表面板看下怎么集成。

教你给网站添加个性化信息统计-即刻学术

说明比较详细了,接下来分别介绍wordpress和其他网站的集成。

wordpress 集成

  1. WP-Matomo 插件 ,第二个 红色带Integration字样
  2. 在左侧菜单中,单击“设置”>“WP-Piwik”。出现 WP-Matomo 设置页面
  3. 首页分别填入你的专属 url,和前面生成的token,保存,正常的话就显示连接成功了
  4. 成功之后,点击启用跟踪,选择默认跟踪,可以进行一些个性化设置后保存
  5. 在仪表盘->wp-piwik 就可以看到访客数据
  6. wp 用户可以在插件设置的显示统计页打开短代码,这样就能在页面或者文章插入短代码来使用统计信息了。

其他网站集成(如 typecho等等。。)

在刚刚那个集成页面点击 追踪代码 ,给出你的专用代码,把这个代码复制到你的网站</head> 标签前面,方法不细说了,不懂可以留言。

教你给网站添加个性化信息统计-即刻学术

添加好之后,访问一下你自己的站,在回来,页面数据就刷新了,说明接入成功。

教你给网站添加个性化信息统计-即刻学术

那么第一步,访客统计就完成了,在官方网站可以看到详细的统计信息。

第二步:添加展示页面

首先解决跨域问题:https://matomo.org/faq/how-to/faq_18694/

你可以去系统面板设置-》通用设置-》跨域资源共享(CROS)白名单域名,不然api无法访问。

或者在 config.ini.php 配置文件添加:

[General]
cors_domains[] = *

我们想在我们的网站上展示,可以这样做。

去你的网站根目录随便新建一个 xxx.html 文件,然后去https://github.com/gogobody/matomo_visitors/blob/main/index.html

复制所有内容粘贴进去。然后访问你的域名/xxx.html 就可以看到输出内容了。当然,显示的是我的网站内容。

预览demo :https://www.ijkxs.com/visitors.html 或者 https://gogobody.github.io/matomo_visitors/

接下来说一下,怎么显示你的内容。

找到 html 的 这一段代码,只需要修改 analyticsAPI 里面的内容。

<script type="text/javascript">
    var analyticsAPI = {
        id: '1',
        url: 'https://ijkxs.matomo.cloud/',
        token: '226e5483810410996dfd46493ca02bb5xxxxxxxx'
    };
    var _paq = _paq || [];
    _paq.push(["setDomains", ["*"]]);
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function () {
        var u = analyticsAPI.url;
        _paq.push(['setTrackerUrl', u + 'matomo.php']);
        _paq.push(['setSiteId', analyticsAPI.id]);
    })();
</script>

id 就是,比如你跟踪了多个网址,然后在网址面板可以看得到你的网址id号,只有一个的话那就是 1 了,跟踪其他的网址,就看对应的id号就好了。

教你给网站添加个性化信息统计-即刻学术

url 就是上一步分配的专属url

token 就是第一步生成的验证令牌。

如果需要更改统计开始日期,请修改:

<div id="established_at" content="2020-10-01T00:00+08:00" style="display: none"></div>

就把这个 content 里面的时间改成你的就行了。

到这就结束了。

附言(可选):

页面嵌入网页:

wp 可以直接插入自定义html

<iframe src="https://gogobody.github.io/matomo_visitors/" width="100%" height="2000" scrolling="yes" class="iframe-class" frameborder="0"></iframe>

typecho如果是markdown编辑:

!!!
<iframe src="https://gogobody.github.io/matomo_visitors/" width="100%" height="2000" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
!!!

给TA买糖
共{{data.count}}人
人已赞赏
建站教程

Wordpress 冷门但实用的插件

2021-5-30 13:11:52

技术活

Windows预览体验计划 页面空白无内容的解决办法

2021-6-30 15:07:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索