为手机网站添加Google Analytics(PHP版本)

之前WPtouch下CSS加载异常的问题,后来去看看自己的Google Analytics,没几个移动访问记录,仅有的几个还是Nokia的

这就奇怪了,我自己都用Android和iPod touch访问,怎么会没记录

后来仔细看了移动页面的源码,压根没有Google Analytics的JS代码,也就是说由于Android和iOS的设备都访问了这个没有统计代码的页面,而Nokia的还是访问Web原始页面,所以有统计代码

那就折腾下呗,其实最简单的方法就是把Google Analytics的那段JS添加到Header里

不过在Google Analytics选择代码时,有个为手机网站添加代码,由于部分设备不支持JS,而提高了PHP版本

不过坑爹的就在这里,Google提供的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
< ?php
// Copyright 2009 Google Inc. All Rights Reserved.
$GA_ACCOUNT = "MO-xxxxx-x";
$GA_PIXEL = "/ga.php";

function googleAnalyticsGetImageUrl() {
global $GA_ACCOUNT, $GA_PIXEL;
$url = "";
$url .= $GA_PIXEL . "?";
$url .= "utmac=" . $GA_ACCOUNT;
$url .= "&utmn=" . rand(0, 0x7fffffff);
$referer = $_SERVER["HTTP_REFERER"];
$query = $_SERVER["QUERY_STRING"];
$path = $_SERVER["REQUEST_URI"];
if (empty($referer)) {
$referer = "-";
}
$url .= "&utmr=" . urlencode($referer);
if (!empty($path)) {
$url .= "&utmp=" . urlencode($path);
}
$url .= "&guid=ON";
return str_replace("&", "&amp;", $url);
}
?>
```<!--more-->
<del datetime="2011-08-04T14:07:32+00:00">当时看着这代码里有个ga.php就在想这东西拿来的,那代码生成页也没半点提示,不过先不管,先把代码加上</del>

好吧,我自己眼瞎了没看到。。。。今天重新进去看,看到了。。。。

因为我用WPtouch来生成的手机页面,因此要把这段代码插入header前,就要到/wp-content/plugins/wptouch/themes/core目录下

编辑core-header.php,把上面代码插入到最前面

然后再把下面这段代码插入到/wp-content/plugins/wptouch/themes/default/footer.php中,放到body最后即可
```php
< ?php
$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
echo '![]()';
?>

搞定后打开页面,会看到页脚有个图片占位符,不过在Google Analytics却看不到任何效果

后来搜了下,看到原来的代码里还有两行注释,现在被Google省略了,真TM坑爹

1
2
// Google Analytics Mobile tracking code
// You need to download ga.php from the Google Analytics website for this to work

打开下面地址,在页面最下面下载Website的压缩包,然后把解压后php文件夹下的ga.php上传到你网站根目录
http://code.google.com/intl/zh-CN/mobile/analytics/download.html
搞定后,通过FireFox的User Agent Switch弄了个iPhone的UA访问,看了源代码,最后的地区有个插入图片的链接,不过这链接肯定有问题

1
<img src="?utmac=&amp;utmn=450470265&amp;utmr=http%3A%2F%2Fxfeng.me%2Fautoptimize-cause-wptouch-load-css-abnormal%2F&amp;utmp=%2Fwordpress-use-autoptimize-yui-compress-css-js%2F&amp;guid=ON" />

这链接我咋想都想不通这样能让Google统计到,仔细看了下代码,一共下面几个参数

1
utmac	Google Analytics account ID
utmn	Random ID to prevent the browser from caching the returned image
utmp	Relative path of the page to be tracked
utmr	Complete referral URL

不过这里GA_ACCOUNT和GA_PIXEL这两个变量的值就没传过去,导致链接里丢了信息

虽然不知具体问题在哪,不过我就鲁莽点,直接把值写死好了,把header前的那段代码改为如下样子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< ?php
// Copyright 2009 Google Inc. All Rights Reserved.
$GA_ACCOUNT = "MO-xxxxx-x";
$GA_PIXEL = "/ga.php";

function googleAnalyticsGetImageUrl() {
global $GA_ACCOUNT, $GA_PIXEL;
$url = "";
$url .= "http://xxx.com/ga.php?";
$url .= "utmac=MO-xxxxxx-x";
$url .= "&utmn=" . rand(0, 0x7fffffff);
$referer = $_SERVER["HTTP_REFERER"];
$query = $_SERVER["QUERY_STRING"];
$path = $_SERVER["REQUEST_URI"];
if (empty($referer)) {
$referer = "-";
}
$url .= "&utmr=" . urlencode($referer);
if (!empty($path)) {
$url .= "&utmp=" . urlencode($path);
}
$url .= "&guid=ON";
return str_replace("&", "&amp;", $url);
}
?>

其实就只是把GA_PIXEL和GA_ACCOUNT的赋值去掉了,直接写死罢了

然后重新打开页面查看源码,变成如下代码

1
<img src="http://xxx.com/ga.php?utmac=MO-xxxxx-x&amp;utmn=450470265&amp;utmr=http%3A%2F%2Fxfeng.me%2Fautoptimize-cause-wptouch-load-css-abnormal%2F&amp;utmp=%2Fwordpress-use-autoptimize-yui-compress-css-js%2F&amp;guid=ON" />

我只能说Google真够坑爹的,你在选择为手机网站添加代码时,多个注释,或者多个链接到Google Analytics for Mobile Doc会死啊。。。

另外还有Perl、ASP.NET、Jsp版本,都需要下载对应的ga文件

如果你不想折腾,或者你可以忽略类似UCWeb这类不支持JS的浏览器,还是用原始的JS插入Header吧,省时省力

最后补充点,由于WPtouch支持的设备较少,不过可以自定义UA,你可以选择一些常见的只能手机UA添加,用逗号分隔就好

1
2
3
4
5
6
7
8
9
10
11
<folder description="Mobile">
<useragent description="Android 2.1 - Nexus One - Safari 530.17" useragent="Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="iOS 4_3 - iPhone - Safari 533.17.9" useragent="Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8F190" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Maemo - Fennec 2.0.1 (arm)" useragent="Mozilla/5.0 (Maemo; Linux armv7l; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 Fennec/2.0.1" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Windows Phone OS 7.0 - Asus Galaxy - IEMobile 7.0" useragent="Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0) Asus;Galaxy6" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Windows CE - ZuneHD 4.3 - IEMobile 6.12" useragent="Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 6.12; Microsoft ZuneHD 4.3)" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
</folder>
<folder description="Browsers">
<useragent description="Opera 10.61 Mini 5.1 (J2ME/MIDP)" useragent="Opera/10.61 (J2ME/MIDP; Opera Mini/5.1.21219/19.999; en-US; rv:1.9.3a5) WebKit/534.5 Presto/2.6.30" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
<useragent description="Opera 10.00 Mobi - SymbOS" useragent="Opera/9.80 (S60; SymbOS; Opera Mobi/499; U; ru) Presto/2.4.18 Version/10.00" appcodename="" appname="" appversion="" platform="" vendor="" vendorsub=""/>
</folder>

你只需在WPtouch的Custom User Agent里填入设备名字或者浏览器名字,例如我填写的

1
Windows Phone OS, Maemo, Windows CE, SymbianOS, Symbian, iPad, Opera Mini, Opera Mobi

根据你的需求自己添加吧

声明: 除非注明,小峰网络遨游记文章均为原创,转载请以链接形式标明本文地址

本博客原创文字只代表本人某一时间内的观点或结论,与本人所在公司没有任何关系。

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

第三方若用于商业用途的转载,须取得本人授权。

本文作者:

本文地址:http://xfeng.me/mobile-website-google-analytics-php/

你可能还对下面文章感兴趣: