7

google-analytics-node

图片描述

图片描述

1.注册谷歌分析

注:以下操作基本需要翻墙,请自备梯子。
登录你的谷歌账户,注册谷歌分析
图片描述
然后设置自己的账户基本信息
图片描述
获取跟踪Id,同意协议。

2.给网站加上谷歌分析代码

登陆后便有全站跟踪代码,复制带有跟踪Id的代码到你的项目里。
使用入门
 给您的网站安装跟踪代码
 示例
安装跟踪代码后,你就可以发布你的网站了,在这个管理后台你就可以查看您的网站访问数据了。
本篇完 :)

等等,我只是开个玩笑,以上只是基本操作,完成上述操作,才能继续下面的步骤,让你本地的服务能获取谷歌分析的数据。

3.查看谷歌api

如果你想在自己的网站里展示这些数据,每次只用自己本地登录后台查看,该怎么实现呢?
戳这里
谷歌提供了api接口,供你自由配置指标来查询你的网站访问数据,并且提供了各种客户端库的查询支持。

4.api调用demo

本篇使用的后台技术是NodeJs,使用的是express框架+redis技术实现。
项目目录结构,项目代码放在github上,适当修改配置,安装依赖,就可以应用于自己的网站了。

├── README.md
├── app
│   ├── config
│   │   ├── index.js  //配置文件
│   │   └── key.json  //查询api的jwt验证key
│   ├── controllers
│   │   └── google.analytics.js  //获取数据的api
│   ├── middleware
│   │   └── redis.middleware.js  //使用redis作中间存储
│   ├── routes
│   │   ├── google.js //路由文件
│   │   └── index.js
│   └── utils
│       └── index.js //小工具
├── app.js
├── index.js  
├── package-lock.json
└── package.json

这个项目里,使用了官方的nodejs api的npm包 googleapis
使用redis的部分是为了缓存access_token和部分数据,目前把部分接口的数据先缓存23小时(不想去频繁请求接口)。

5.配置您的个人项目

项目里需要配置的地方,第一个是数据视图id,这个在创建账户的时候就生成了,在账户管理的数据视图里可以看到,点击数据视图设置,就可以获取数据视图id

  viewId: 'ga:你的数据视图id'

第一步:设置key

打开谷歌api控制台,先创建一个项目,然后点击启用API,搜索google analytics,启用Google Analytics Reporting API,再启用Analytics API

图片描述

第二步:创建凭据

然后创建凭据,点击 凭据-->创建凭据-->选择服务账号密钥-->选择新的服务账号,并设置角色,输入名称,点击创建,保存您的密钥文件。
将这个key复制到项目的app/config目录下并修改名称为 key.json

第三步:为这个账户添加访问数据的权限

打开注册谷歌分析的数据控制台(注册的时候可以查看数据的那个),点击管理-->媒体资源-->用户管理-->添加新用户,输入api控制台的 凭据-->列表又上角管理服务账号,复制这个服务账号id,粘贴到电子邮箱地址栏,并设置权限(可只设置读取和分析的权限)。这个控制台也可以设置过滤规则和白名单之类的,如有需要,可以研究研究。
到这一步,大功告成。去你的网站上点点吧,如果在谷歌分析的数据控制台能看到数据,可以启动我的项目文件,调用api接口,就可以获取json数据。

ps:
在这个api参考里,你可以自由设置你想要的数据,修改demo的接口就好。

项目路由文件注释

router.get('/userChart',...);//用户浏览数据
router.get('/cityChart', ...);//用户国家地区分布
router.get('/deviceChart',...);//用户设备分布
router.get('/pageViewData', ...);//单页面访问统计
router.get('/pageTimeData',...);//24小时访问数统计
router.get('/pageAreaData',..);//地区统计
//可以自由设置更多数据

use

git clone git@github.com:zangse/google-analytics-node.git
cd google-analytics-node
//更换key和viewId和端口号(xxx)
npm install
node index.js
//在浏览器访问  
http:localhost:xxx/api/google/userChart

6.本地测试和线上部署

目前由于墙的原因,google服务无法访问,我本地数据,是使用了工具为node进程开了代理。(mac端Proxifier)
线上部署也同样需要解决墙的问题,最好是把这个小项目托管到可以访问google服务的服务器上。

至于文章开头的图表,来自于接口返回的数据,经过前端处理后使用echart展示的结果。
如有疑问,可以在项目里提issues。如有遗漏或错误的地方,欢迎指正。
欢迎访问我的个人开发笔记github


臧瑟
401 声望9 粉丝

不务正业的程序猿。


« 上一篇
js生成pdf初探