一些平鋪直敘技術相關文: Piwik 開源的網站追蹤平台介紹

2016年5月3日星期二

Piwik 開源的網站追蹤平台介紹

Piwik

如標題，piwik 是一個可以讓你架在公司內部的網站追蹤的平台，如果你有不想讓別的 web tracking (如 Google Analytics) 取得到你網站資料的困擾，也許 piwik 是一個選擇。

* piwik 裝起來的樣子，可以看 Demo
* piwik 的介紹影片

那你需要會什麼呢?

piwik 他其實除了可以自己下載下來安裝之外，你也可以選擇 Cloud-hosted Piwik 這種方案，他有 30 天的試用期，另一個選擇是從 google cloud platform 付費&安裝。但是我只是要看看有什麼功能，只能自己架 XD

你需要...

1. 一台 server，它是 PHP + MySQL base，待會下方會有安裝簡介。
2. 看官方文件，熟悉操作方式。

首先請到 download 頁面下載 http://piwik.org/download/。

下載後請先解壓縮，並放到你的 server 下某個 folder 去，主要是要可以看到 index.php 的畫面。

以我自己來說是直接用 php -S 的方式去起 server :P

/Downloads/piwik/piwik $ php -S localhost:8888

server 啟動後直接 access 你起的那個 port 或是 url，(像我是在本機的 8888 port)。

接著你會看到一個 Welcome 的 Page，他會一步一步帶領你安裝 piwik，同時會帶你檢查你的 php 的設定是不是符合要求:

按下 Next。

第二步是 System Check，然後我發現我必須要把 php.ini 的 always_populate_raw_post_data=-1 設定為 -1。

頁面往下看你會發現他會提醒你這段文字:

To prevent some critical issue, you must set the following in your php.ini file:
always_populate_raw_post_data=-1
After making this change,
restart your web server.

至於你的 php.ini 在哪裡我無法幫你，這跟你當初如何裝 php 有關係。

把 php.ini 的 always_populate_raw_post_data=-1 uncomment(移除前面的分號)，然後儲存，修改後記得重啟 server，然後重新回到 system check 那個畫面重新整理。

看到都是綠燈之後就繼續 Next >>

這一的是資料庫的設定，首先你要自己開好一個 database，比方說我開好一個 db 叫做 piwik_ppp (我測試過沒有預先開好也 ok)。所以就把資料填進去，包含你的 mysql 連線資訊，帳號密碼等等，P.S 因為我本來就沒有設定 mysql 帳號密碼，所以我才沒有填哦。

設定 piwik 登入的超級帳號:

先設定一組想要追蹤的 website:

接下來你會拿到一組跟 ga 一樣的 tracking code，用來放置在你網站的 html 裡:

恭喜頁面就可以直接跳過了，按下 contiune...。

登入你剛剛註冊的帳號:

如果要追蹤 localhost 的網站，請到 http://[YOUR_DOAMIN]/index.php?module=SitesManager，

點 View Tracking code，勾選 Track visitors across all subdomains of reactnative，重新複製下方的 JavaScript Tracking Code，貼到網站的 html 裡面。

如果 tracking code 有埋成功的話，進來的畫面就 dashboard:

特色

* 可以追蹤好幾個自己的 site。

* 可新增其他管理帳號。

* 可設定 email report, 多久寄一次等等。

* 事件追蹤。

* 有套件跟樣板可以套。

Market Place

可以安裝所需要的 plugin 以及 theme，若要安裝 theme, 按下 install 之後要等一下，然後裝完會 redirect 到下個頁面，記得要按下 activate...

裝起來還蠻帥的!

按鈕事件追蹤小練習

所有幾乎想做 tracking 的都想知道，我的按鈕被按了幾次...之類的這種 tracking，當然 piwik 也有摟! 官方文件可以看: http://piwik.org/docs/event-tracking/ 以及 http://developer.piwik.org/guides/tracking-javascript-guide#manually-trigger-events

Track 簡單來說有很多種，下面舉例是針對按鈕事件作追蹤:

簡單的公式如下：

trackEvent(category, action, [name], [value])

category 是分類，你自己定義
action 是動作，你自己定義
name 你把它當作標籤，也是你自己定義，定不定義都行

// 範例
_paq.push(['trackEvent', '按鈕', '下載教學文件', 'react native 文件']);

假如我畫面有兩個按鈕想做 tracking

<a href="#" onclick="javascript:_paq.push(['trackEvent', '按鈕', '下載教學文件']);">下載 PHP 教學文件</a>

<a href="#" onclick="javascript:_paq.push(['trackEvent', '按鈕', '下載ROR']);">下載 ROR 教學文件</a>

從後台看到 tracking event 的結果，選擇左邊 menu 的 Action -> Events，就可以看到列表，要記得日期要選到今天哦! (預設會看到昨天...，這可以調整，在個人化設定的地方)