前言
由在此以前面几章,我们的网址已经最中央的效果,接下去正是三番四遍开始展览其余的功效,这期一同来兑现二个该网址流量深入分析的工具,计算出那个网址天天用户相关数据,不止要满意了小编们对流量总括数字的骨干须求,况且用更不难的图片展现形式,让我们看清地获得页面热度、点击率音讯等等。有了这几个主见之后,那怎么落到实处吗,跟着作者一步步来吧。
先是,须要思念怎么才干获得用户访谈网址时的相干数据吧?大家没须要本人去记录那几个音讯,近年来早就有多数老奸巨滑的消除方案,提供捕获那几个新闻的无需付费接口,大家只用去访谈那一个接口就足以了。
在无数的方案中,有2款近些日子是相比较流行的,分别是google
analytics和百度总结。怎么说呢,google的着实是行业的大腕,不止很干练,而且有详细的技术文档,数据收罗进度很顺畅,但是数量显现须要fanqiang(原因你们知道),那块是硬伤,八个盛放的网址没有办法供给用户都要fanqiang吧,也是由于这么些缘故,让自家忍痛遗弃了google
analytics。那独有三个增选了:百度总结。想相比来说,百度总结的连带本事文档不忍多说,都以泪,俺在坑中摸爬滚打比较久,才弄精通怎么调用和做客。
方案定下来,因为咱们要拜会百度总计的开放API,今后会平时调用到外网的各样API,为了磨刀不费砍柴工,大家付出三个API的模拟工具,用来调治。
API模拟工具
- 独自给API模拟工具增添二个菜单项,菜单管理–>新扩充菜单,增添贰个根节点菜单下的一个子菜单:“工具箱”。未来一些常用的开垦工具菜单,就停放该目录,然后在“工具箱”菜单下,再新建叁个子菜单:“API模拟”。
-
那C#中怎么调用远程API方法吗,一般用HttpClient能够访问,这里大家有一点点再装进一下,分为Get乞求(传递url参数)和Post央浼(传递url和content参数):
1 public static class HttpClientExtensions
2 {
3 ///4 /// Get请求API
5 ///6 /// 7 /// 8 /// 爱博体育app,
9 /// 10 ///
11 public static async TaskHttpGetAsync(this HttpClient client, string url)
12 {
13 //开首化内容
14 var responseMessage = await client.GetAsync(url);
15 if (responseMessage.IsSuccessStatusCode)
16 {
17 return await responseMessage.Content.ReadAsStringAsync();
18 }
19 else
20 {
21 return $”访谈API地址:{url}出错,错误代码:{responseMessage.StatusCode},错误原因:{responseMessage.ReasonPapakōlea沙滩se}”;
22 }
23 }
24
25
26 ///27 /// Post请求API
28 ///29 /// 30 /// 31 /// 32 /// 33 ///
34 public static async TaskHttpPostAsync(this HttpClient client, string url, string jsonValue)
35 {
36 //初始化内容
37 var content = new StringContent(jsonValue, Encoding.UTF8, “application/json”);
38
39 var responseMessage = await client.PostAsync(url, content);
40 if (responseMessage.IsSuccessStatusCode)
41 {
42 return await responseMessage.Content.ReadAsStringAsync();
43 }
44 else
45 {
46 return $”访问API地址:{url}出错,参数:{jsonValue},错误代码:{responseMessage.StatusCode}
,错误原因:{responseMessage.Reason莫纳克亚沙滩se}”;
47 }
48 } -
参谋上一章的剧情中,我们将Api的连锁安插,比方url地址,url须求类型,参数等等,都安插到json文件中,并定义相应的数据结构MyRequest。后续依赖注入IOptions<MyRequest>
myRequest就可以访问。 - Areas/Tools/Controllers创设对应的调节器ApiSimulatorController
- InvokApi方法:根据读取的Api必要类型,想远程API服务商发送央求并传递参数,再次回到json格式给UI端;
-
Index方法:依照用户在下拉框中甄选的Api,切换呈现Api相关新闻;
1 [Area(“Tools”)]
2 public class ApiSimulatorController : AppController
3 {
4 private readonly MyRequest _myRequest;
5
6 public ApiSimulatorController(IOptionsmyRequest)
7 {
8 _myRequest = myRequest.Value;
9 }
10
11 ///12 /// API模拟主页
13 ///14 /// 15 ///
16 public IActionResult Index(string selectedApiCode = null)
17 {
18 UpdateDropDownList(selectedApiCode);
19 if (selectedApiCode == null)
20 {
21 return View(“Index”, new ApiRequest());
22
23 }
24 var selectedApi = _myRequest.ApiRequests.FirstOrDefault(s => s.ApiCode == selectedApiCode);
25 if (selectedApi != null && selectedApi.Methord == “POST”)
26 selectedApi.ApiDatas = selectedApi.ApiDatas.ToJsonString();
27 return View(“Index”, selectedApi);
28 }
29
30 ///31 /// 调用API
32 ///33 /// 34 ///
35 public async TaskInvokApi(ApiRequest request)
36 {
37 var hc = new HttpClient();
38
39 if (request.Methord == “GET”)
40 {
41 var getUrl = request.Url + “?”;
42 foreach (var para in request.ApiParas)
43 {
44 getUrl += “&” + para.ParaName + “=” + para.ParaValue;
45 }
46
47 ViewBag.SendContent = getUrl;
48 ViewBag.ReturnResult = (await hc.HttpGetAsync(getUrl)).ToJsonString();
49 }
50 else if (request.Methord == “POST”)
51 {
52 if (!string.IsNullOrEmpty(request.ApiDatas))
53 {
54 ViewBag.SendContent = request.Url;
55 ViewBag.ReturnResult = (await hc.HttpPostAsync(request.Url, request.ApiDatas)).ToJsonString();
56 }
57 else
58 {
59 ModelState.AddModelError(string.Empty, “请输入Json格式央求参数”);
60 }
61 }
62 else
63 {
64 ModelState.AddModelError(string.Empty, “乞请形式违法”);
65 }
66
67 UpdateDropDownList(request.ApiCode);
68 return View(“Index”, request);
69 }
70
71 ///72 /// 初始化下拉选择框
73 ///74 private void UpdateDropDownList(string selectedApiCode = null)
75 {
76 ListlistApiName = new List ();
77 foreach (var request in _myRequest.ApiRequests.Select(s => new { s.ApiName, s.ApiCode }))
78 {
79 listApiName.Add(new SelectListItem
80 {
81 Value = request.ApiCode,
82 Text = request.ApiName,
83 Selected = request.ApiCode == selectedApiCode
84 });
85 }
86 ViewBag.ApiCodes = listApiName;
87 }
88 }
Areas/Tools/Views创造对应的视图Index
1 <div class="form-group">
2 <label asp-for="ApiCode">API名称:</label>
3 <select asp-for="ApiCode" class="form-control input-sm select2" asp-items="ViewBag.ApiCodes">
4 <option value="">-- 请选择 --</option>
5 </select>
6 </div>
7 <div class="form-group">
8 <label asp-for="Url">API地址:</label>
9 <input asp-for="Url" class="form-control input-sm" readonly>
10 </div>
11 <div class="form-group">
12 <label asp-for="Methord">请求方式:</label>
13 <input asp-for="Methord" class="form-control input-sm" readonly>
14 </div>
15 <div class="form-group">
16 <label for="params" class="">请求参数:</label>
17 @if (Model.Methord == "GET")
18 {
19 <div style="overflow-x:auto;">
20 <table class="table table-bordered table-striped table-condensed" id="params">
21 <thead>
22 <tr>
23 <td>参数名</td>
24 <td>类型</td>
25 <td>是否必填</td>
26 <td>说明</td>
27 <td>值</td>
28 </tr>
29 </thead>
30 <tbody>
31 @for (var i = 0; i < Model.ApiParas.Count(); i++)
32 {
33 <tr>
34 <td>
35 @Model.ApiParas[i].ParaName
36 @Html.TextBoxFor(a => a.ApiParas[i].ParaName,
37 new { @class = "form-control input-sm", type = "hidden" })
38 </td>
39 <td>
40 @Model.ApiParas[i].ParaType
41 @Html.TextBoxFor(a => a.ApiParas[i].ParaType,
42 new { @class = "form-control input-sm", type = "hidden" })
43 </td>
44 <td>
45 @(Model.ApiParas[i].Required ? "是" : "否")
46 @Html.TextBoxFor(a => a.ApiParas[i].Required,
47 new { @class = "form-control input-sm", type = "hidden" })
48 </td>
49 <td>
50 @Model.ApiParas[i].Description
51 @Html.TextBoxFor(a => a.ApiParas[i].Description,
52 new { @class = "form-control input-sm", type = "hidden" })
53 </td>
54 <td>
55 @Html.TextBoxFor(a => a.ApiParas[i].ParaValue,
56 new { @class = "form-control input-sm" })
57 </td>
58 </tr>
59 }
60 </tbody>
61 </table>
62 </div>}
63 else if ((Model.Methord == "POST"))
64 {
65 @Html.TextAreaFor(m => m.ApiDatas,
66 new { @class = "form-control", rows = "8", placeholder = "输入Json格式 ..." })
67 }
68 </div>
69 <button type="submit" class="btn btn-success"><i class="fa fa-send-o margin-r-5"></i>发送请求</button>
json文件中加进“手提式有线电话机号码归属地”、“百度总计”相关API的布置,我们来测试一下:
流量深入分析工具
有了地点API模拟工具,将来得以很有利的调治将养大家百度总括接口了。百度总结是怎么获取那个网址用户访问的连带音讯的吧?原理其实非常粗大略,百度本着你的登记服务提供一段js代码,在那之中包含标记你在百度总结的id。你在网页中增添这段代码后,每当用户访谈该网址时,会下载这段js脚本,加载实现和距离页面包车型客车时候,都会发送一遍呼吁和传递参数,百度总结服务大旨之所以捕获到这几个消息,维护在服务器中。调用百度计算API传递你的id,会依据id再次回到您的网址对应深入分析数据。
关于流量总结原理,风野趣详见揭露百度总结和谷歌Analytics的专业原理
挂号百度计算
领会了规律,那首先第一步大家报了名百度总结用户。注册成功后,大家找到
代码管理–>代码获取,将百度总括帮您自动生成好的js脚本复制过来,粘贴到site.js文件中。由于_layout母版页引用了site.js文件,那样的话,网址域名下持有的用户访谈,都会被总结。
设置完百度总括的代码,公布网址先后,能够用百度总计中代码检查,看看本身总括代码有未有被科学的安装,如若设置成功,估摸20分钟后,就足以在百度总结中查看网址的拜望景况了。当然,你也能够增进征三号个域名的网址。
申请Tongji API数据导出
以往我们很方便的在百度总结中查看种种总计数据了,比方流量解析、来源分析、访谈解析、转化剖析等等,接下去须要获得这个数量,来移植到我们和好的网址中来。百度提供了Tongji
API,大家得以调用API来询问本身网址的深入分析数据,从而越发协会增添的辨析视图了。
要拜望Tongji API,须求提供一个token值,那几个须求开通申请,在
百度总括–>管理–>别的设置–>数据导出服务
中,伏乞开通,开通后百度总括会提供给你二个token字符串,未来用那么些token就足以访谈Tongji
API。Tongji
API具体的央浼格式表达详见:百度总结开拓平台
比方大家需求央浼站点列表,使用API模拟工具,央求类型POST,url地址:https://api.baidu.com/json/tongji/v1/ReportService/getSiteList,这里注意请求的data参数格式应该如下:
1 {
2 "header": {
3 "account_type": 1,
4 "password": "<密码>",
5 "token": "<token>",
6 "username": "<用户名>"
7 },
8 "body": {}
9 }
输入百度总括的用户名和密码及拜会使用的token,就能够平常访谈大家的挂号的有所站点,这里大家得以得到站点的site_id(也能够通过百度计算页面查看),后边诉求该站点的辨析数据会用到。
地面分布数据获得
百度计算提供的数据类型非常多,大家选用在那之中叁个来试验下效果。比方大家要求获得访问网址用户的所在新闻,区别省区的用户访问景况。
-
使用API模拟工具调节和测验:诉求类型POST,url地址:https://api.baidu.com/json/tongji/v1/ReportService/getData,请求的data参数格式如下:
1 {
2 “header”: {
3 “account_type”: 1,
4 “password”: “<密码>“,
5 “token”: ““,
6 “username”: “<用户名>”
7 },
8 “body”: {
9 “site_id”: <站点id>,
10 “method”: “visit/district/a”,
11 “start_date”: “30daysago”,
12 “end_date”: “today”,
13 “metrics”: “pv_count,pv_ratio,visit_count,visitor_count,new_visitor_count,new_visitor_ratio,
ip_count,bounce_ratio,avg_visit_time,avg_visit_pages,trans_count,trans_ratio”,
14 “order”: “pv_count,desc”,
15 “max_results”: 0
16 }
17 }
能够见见,平常再次来到依据分化省区区域的网址总括数据。
落到实处调节器逻辑:依据上边提供的json格式,配置到json文件中,并定义MyRequest对象,映射我们有着的API央求,MyRequest贮存的是有着API央浼的布署音讯,通过API必要的id,加载差异的API配置音信。Areas/Tools/Controllers创设对应的调控器SiteAnalyticsController,主要达成GetVisitDistrictAnalytics方法,用来依据时限,获取相应的区域深入分析json数据:
1 [Area("Tools")]
2 public class SiteAnalyticsController : AppController
3 {
4 private readonly IList<ApiRequest> _requests;
5
6 public SiteAnalyticsController(IOptions<MyRequest> myRequest)
7 {
8 _requests = myRequest.Value.ApiRequests;
9 }
10
11 public IActionResult Index()
12 {
13 return View();
14 }
15
16 /// <summary>
17 /// 获取百度访客区域统计数据
18 /// </summary>
19 /// <returns></returns>
20 public async Task<JsonResult> GetVisitDistrictAnalytics(string startDate, string endDate)
21 {
22 var hc = new HttpClient();
23 var request = _requests.FirstOrDefault(s => s.ApiCode == "BaiduGetVisitDistrict");
24 var data = request.ApiDatas.Replace("30daysago", startDate).Replace("today", endDate);
25 return Json(await hc.HttpPostAsync(request.Url, data));
26 }
27
28 /// <summary>
29 /// 获取百度趋势分析数据
30 /// </summary>
31 /// <returns></returns>
32 public async Task<JsonResult> GetTrendAnalytics(string startDate, string endDate)
33 {
34 var hc = new HttpClient();
35 var request = _requests.FirstOrDefault(s => s.ApiCode == "BaiduGetTrend");
36 var data = request.ApiDatas.Replace("30daysago", startDate).Replace("today", endDate);
37 return Json(await hc.HttpPostAsync(request.Url, data));
38 }
39 }
区域深入分析展现
有了区域分析的数码,接下去思量要怎么显得。
- 大家规划各样省份的访谈量,能够透过地图表现,遵照实际访谈量的有个别,通过颜色的浓度展现;
- 报表的款式,具体展现分歧省份的访谈量和占比;
- 柱状图的情势,展现方今7天的访问量趋势;
地图表现,选用jvectormap插件,它是矢量地图,且有自身的API,依然十一分好用的,具体应用方式,推荐访谈官方网址:http://jvectormap.com/
Areas/Tools/Views创立视图Index:
1 <!-- 分布地图 -->
2 <div class="col-md-6 col-sm-6">
3 <div class="box-body">
4 <div id="map-markers" class="text-center" style="height: 420px;">
5 <div>浏览量地域分布</div>
6 </div>
7 </div>
8 </div>
9 <!-- 分布表格 -->
10 <div class="col-md-4 col-sm-4" style="height: 440px; overflow: auto;">
11 <table class="table table-bordered" id="districtTable">
12 <tbody>
13 <tr>
14 <th style="width: 10px">#</th>
15 <th>省份</th>
16 <th>浏览量(PV)</th>
17 <th>占比</th>
18 </tr>
19 </tbody>
20 </table>
21 </div>
22 <!-- 近一周统计 -->
23 <div class="col-md-2 col-sm-2">
24 <div class="pad box-pane-right bg-green" style="min-height: 280px">
25 <div class="description-block margin-bottom" id="trend_pv_count">
26 <div class="sparkbar pad" data-color="#fff"></div>
27 <h5 class="description-header"></h5>
28 浏览量(PV)
29 </div>
30 <div class="description-block margin-bottom" id="trend_visitor_count">
31 <div class="sparkbar pad" data-color="#fff"></div>
32 <h5 class="description-header"></h5>
33 访客数(UV)
34 </div>
35 <div class="description-block" id="trend_ip_count">
36 <div class="sparkbar pad" data-color="#fff"></div>
37 <h5 class="description-header"></h5>
38 IP数
39 </div>
40 <div class="description-block" id="trend_avg_visit_time">
41 <div class="sparkbar pad" data-color="#fff"></div>
42 <h5 class="description-header"></h5>
43 平均访问时长
44 </div>
45 </div>
46 </div>
SiteAnalytics.js中,定义jvectormap展现样式,动态获取区域深入分析数据后, 设置数据集mapObject.series.regions[0].setValues(visitorsData);
1 var options = {
2 map: 'cn_mill',
3 backgroundColor: 'transparent',
4 regionStyle: {
5 initial : {
6 fill : 'rgba(210, 214, 222, 1)',
7 'fill-opacity' : 1,
8 stroke : 'none',
9 'stroke-width' : 0,
10 'stroke-opacity': 1
11 },
12 hover : {
13 'fill-opacity': 0.7,
14 cursor : 'pointer'
15 },
16 selected : {
17 fill: 'yellow'
18 },
19 selectedHover: {}
20 },
21 series: {
22 markers: [{
23 attribute: 'fill',
24 scale: ['#C8EEFF', '#0071A4'],
25 normalizeFunction: 'polynomial',
26 values: [408, 512, 550, 781],
27 legend: {
28 vertical: true
29 }
30 }],
31 regions: [
32 {
33 scale: ['#ebf4f9', '#92c1dc'],
34 normalizeFunction: 'polynomial'
35 }
36 ]
37 },
38 onRegionLabelShow: function (e, el, code) {
39 var html = '';
40 html += '<div style="width:120px;">';
41 html += '<div style="border-bottom:1px solid;padding-bottom:5px;">' + el.html() + '</div>';
42 html += '<div style="margin-top:5px;"><i class="fa fa-circle text-success margin-r-5"></i>浏览量(PV)';
43 if (typeof visitorsData[code] != 'undefined') {
44 html += visitorsData[code];
45 } else {
46 html += 0;
47 }
48 html += '</div>';
49 html += '<div style="margin-top:5px;"><i class="fa fa-circle text-primary margin-r-5"></i>占比';
50 if (typeof pecentData[code] != 'undefined') {
51 html += pecentData[code];
52 } else {
53 html += 0;
54 }
55 html += ' %</div>';
56 el.html(html);
57 }
58 }
59
60 $('#map-markers').vectorMap(options);
小结
用地图突显区域解析作用至此就已经大致完结,我们增添图表数据的显得,那样内容更增加些,最终,大家看下效果: