前言

因此前面几章,大家的网址已经最中央的功能,接下去便是一连开始展览别的的效用,那期①起来落到实处二个该网址流量分析的工具,总括出这一个网址天天用户相关数据,不仅要满意了小编们对流量总括数字的为主供给,并且用更简单的图片展现格局,让大家看清地得到页面热度、点击率音讯等等。有了那几个想法之后,那怎么落到实处吗,跟着作者一步步来呢。

先是,要求思虑怎么才能取得用户访问网址时的连带数据吧?大家没须要本人去记录那一个音讯,如今已经有过多少深度思熟虑的消除方案,提供捕获那几个新闻的免费接口,大家只用去访问这一个接口就足以了。

在很多的方案中,有二款如今是比较盛行的,分别是google
analytics和百度总结。怎么说呢,google的确实是行业的大拿,不仅很干练,而且有详细的技能文档,数据搜集进程很顺遂,可是数量显现须求fanqiang(原因你们知道),这块是硬伤,一个绽放的网址无法必要用户都要fanqiang吧,也是出于那些缘故,让自家忍痛吐弃了google
analytics。那唯有三个增选了:百度总计。想比较而言,百度总括的相关技能文书档案不忍多说,都以泪,作者在坑中摸爬滚打很久,才弄精晓怎么调用和访问。

方案定下来,因为大家要访问百度总括的绽开API,现在会时常调用到外网的各类API,为了磨刀不费砍柴工,大家开发3个API的生搬硬套工具,用来调节。

前言

透过后面几章,大家的网址已经最基本的效应,接下去便是继续实行别的的意义,这期一起来贯彻二个该网址流量分析的工具,总括出那些网址每一日用户相关数据,不仅要满意了大家对流量总括数字的中坚要求,并且用更简便易行的图样彰显格局,让咱们看清地收获页面热度、点击率消息等等。有了这些想法之后,这怎么落到实处呢,跟着作者一步步来吗。

第壹,供给思量怎么才能博得用户访问网址时的相干数据吧?大家没供给自个儿去记录那几个音信,近来早就有广大早熟的化解方案,提供捕获这一个音讯的免费接口,大家只用去访问这一个接口就足以了。

在广大的方案中,有②款近日是比较盛行的,分别是google
analytics和百度计算。怎么说呢,google的实在是行业的大腕,不仅很成熟,而且有详尽的技艺术文化书档案,数据收集进度很顺遂,不过多少表现须求fanqiang(原因你们知道),那块是硬伤,二个开花的网址没办法须要用户都要fanqiang吧,也是出于那些原因,让自身忍痛放任了google
analytics。那只有3个精选了:百度计算。想比较而言,百度总计的连锁技术文档不忍多说,都以泪,作者在坑中摸爬滚打很久,才弄领会怎么调用和走访。

方案定下来,因为大家要拜访百度计算的盛开API,未来会平时调用到外网的各样API,为了磨刀不费砍柴工,我们开发多少个API的效仿工具,用来调节。

public static async Task<HttpResponseMessage>
PostHttpstringrequest(string requesturl,string jsonstr)
{
var myClient = new HttpClient();
var myRequest = new HttpRequestMessage(HttpMethod.Post, requesturl);
// HttpContent content = new StringContent(@”{ “”url””:
“””);
HttpContent content = new StringContent(jsonstr);
content.Headers.ContentType = new
MediaTypeHeaderValue(“application/json”);
// Send a request asynchronously continue when complete 
myRequest.Content = content;
//myRequest.Version = Version.Parse(“1.1”);

API模拟工具

  • 独自给API模拟工具增添1个菜单项,菜单管理–>新增菜单,扩张一个根节点菜单下的3个子菜单:“工具箱”。以往一些常用的开发工具菜单,就放置该目录,然后在“工具箱”菜单下,再新建三个子菜单:“API模拟”。
  • 那C#中怎么调用远程API方法吗,一般用HttpClient能够访问,那里大家多少再装进一下,分为Get请求(传递url参数)和Post请求(传递url和content参数):

    1 public static class HttpClientExtensions
    2 {
    3 ///

    4 /// Get请求API
    5 ///

    6 /// 7 /// 8 /// 9 /// 10 ///
    11 public static async Task HttpGetAsync(this HttpClient client, string url)
    1二 {
    一三 //初阶化内容
    14 var responseMessage = await client.GetAsync(url);
    一五 if (responseMessage.IsSuccessStatusCode)
    1六 {
    1柒 return await responseMessage.Content.ReadAsStringAsync();
    18 }
    1九 else
    20 {
    2一 return $”访问API地址:{url}出错,错误代码:{responseMessage.StatusCode},错误原因:{responseMessage.Reason粉渤沙滩se}”;
    2二 }
    贰三 }
    二四
    二伍
    26 ///

    27 /// Post请求API
    28 ///

    29 /// 30 /// 31 /// 32 /// 33 ///
    34 public static async Task HttpPostAsync(this HttpClient client, string url, string jsonValue)
    35 {
    3陆 //初叶化内容
    三七 var content = new StringContent(jsonValue, Encoding.UTF八, “application/json”);
    3八
    3玖 var responseMessage = await client.PostAsync(url, content);
    40 if (responseMessage.IsSuccessStatusCode)
    四一 {
    4二 return await responseMessage.Content.ReadAsStringAsync();
    四三 }
    4肆 else
    四伍 {
    四陆 return $”访问API地址:{url}出错,参数:{jsonValue},错误代码:{responseMessage.StatusCode}
             ,错误原因:{responseMessage.ReasonPhrase}”;
    四7 }
    4八 }

  • 参照上一章的始末中,大家将Api的有关计划,比如url地址,url请求类型,参数等等,都安排到json文件中,并定义相应的数据结构MyRequest。后续注重注入IOptions<MyRequest>
    myRequest即可访问。

  • Areas/Tools/Controllers创设对应的控制器ApiSimulatorController
  1. InvokApi方法:依照读取的Api请求类型,想远程API服务商发送请求并传递参数,重临json格式给UI端;
  2. Index方法:依据用户在下拉框中精选的Api,切换突显Api相关音讯;

    1 [Area(“Tools”)]
    2 public class ApiSimulatorController : AppController
    3 {
    4 private readonly MyRequest _myRequest;
    5
    6 public ApiSimulatorController(IOptions myRequest)
    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 Task InvokApi(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))
    5叁 {
    5四 ViewBag.SendContent = request.Url;
    55 ViewBag.ReturnResult = (await hc.HttpPostAsync(request.Url, request.ApiDatas)).ToJsonString();
    5陆 }
    伍柒 else
    5捌 {
    5九 ModelState.AddModelError(string.Empty, “请输入Json格式请求参数”);
    60 }
    陆一 }
    6贰 else
    六三 {
    6四 ModelState.AddModelError(string.Empty, “请求情势非法”);
    陆五 }
    6陆
    67 UpdateDropDownList(request.ApiCode);
    68 return View(“Index”, request);
    6九 }
    70
    71 ///

    72 /// 初始化下拉选择框
    73 ///

    74 private void UpdateDropDownList(string selectedApiCode = null)
    75 {
    76 List listApiName = 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的布署,我们来测试一下:

图片 1

API模拟工具

  • 独立给API模拟工具扩大一个菜单项,菜单管理–>新增菜单,扩充一个根节点菜单下的2个子菜单:“工具箱”。未来1些常用的开发工具菜单,就放置该目录,然后在“工具箱”菜单下,再新建2个子菜单:“API模拟”。
  • 那C#中怎么调用远程API方法吗,1般用HttpClient能够访问,那里咱们多少再封装一下,分为Get请求(传递url参数)和Post请求(传递url和content参数):

    1 public static class HttpClientExtensions
    2 {
    3 ///

    4 /// Get请求API
    5 ///

    6 /// 7 /// 8 /// 9 /// 10 ///
    11 public static async Task HttpGetAsync(this HttpClient client, string url)
    1二 {
    一3 //开端化内容
    14 var responseMessage = await client.GetAsync(url);
    15 if (responseMessage.IsSuccessStatusCode)
    1六 {
    1柒 return await responseMessage.Content.ReadAsStringAsync();
    1八 }
    1玖 else
    20 {
    二一 return $”访问API地址:{url}出错,错误代码:{responseMessage.StatusCode},错误原因:{responseMessage.ReasonPapakōlea海滩se}”;
    22 }
    23 }
    贰4
    25
    二陆 ///

    27 /// Post请求API
    28 ///

    29 /// 30 /// 31 /// 32 /// 33 ///
    34 public static async Task HttpPostAsync(this HttpClient client, string url, string jsonValue)
    3伍 {
    3陆 //初叶化内容
    三7 var content = new StringContent(jsonValue, Encoding.UTF捌, “application/json”);
    3八
    3九 var responseMessage = await client.PostAsync(url, content);
    40 if (responseMessage.IsSuccessStatusCode)
    四1 {
    42 return await responseMessage.Content.ReadAsStringAsync();
    43 }
    4四 else
    四伍 {
    4六 return $”访问API地址:{url}出错,参数:{jsonValue},错误代码:{responseMessage.StatusCode}
             ,错误原因:{responseMessage.Reason热水海滩se}”;
    肆七 }
    4八 }

  • 参照上壹章的内容中,大家将Api的连带配置,比如url地址,url请求类型,参数等等,都配备到json文件中,并定义相应的数据结构MyRequest。后续注重注入IOptions<MyRequest>
    myRequest即可访问。

  • Areas/Tools/Controllers创制对应的控制器ApiSimulatorController
  1. InvokApi方法:依据读取的Api请求类型,想远程API服务商发送请求并传递参数,再次来到json格式给UI端;
  2. Index方法:依据用户在下拉框中精选的Api,切换突显Api相关音信;

    1 [Area(“Tools”)]
    2 public class ApiSimulatorController : AppController
    3 {
    4 private readonly MyRequest _myRequest;
    5
    6 public ApiSimulatorController(IOptions myRequest)
    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 Task InvokApi(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))
    五3 {
    5四 ViewBag.SendContent = request.Url;
    5五 ViewBag.ReturnResult = (await hc.HttpPostAsync(request.Url, request.ApiDatas)).ToJsonString();
    56 }
    57 else
    58 {
    5九 ModelState.AddModelError(string.Empty, “请输入Json格式请求参数”);
    60 }
    陆一 }
    62 else
    6三 {
    6四 ModelState.AddModelError(string.Empty, “请求格局违法”);
    陆5 }
    6陆
    陆七 UpdateDropDownList(request.ApiCode);
    6捌 return View(“Index”, request);
    6玖 }
    70
    7一 ///

    72 /// 初始化下拉选择框
    73 ///

    74 private void UpdateDropDownList(string selectedApiCode = null)
    75 {
    76 List listApiName = 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的配置,我们来测试一下:

图片 1

//HttpContent content=
//myRequest.Content=
//// This property represents the client preference for the HTTP
protocol version.
//// The default value for UWP apps is 2.0.
//Debug.WriteLine(myRequest.Version.ToString());
var response = await myClient.SendAsync(myRequest);
return response;
//string streamcontent = await response.Content.ReadAsStringAsync();
//return streamcontent;
}
}

流量分析工具

有了地点API模拟工具,今后得以很便利的调节和测试大家百度计算接口了。百度总括是怎么获取这么些网址用户访问的相关音讯的吧?原理其实一点也不细略,百度本着你的挂号服务提供一段js代码,在那之中含有标识你在百度总括的id。你在网页中添加那段代码后,每当用户访问该网站时,会下载那段js脚本,加载完毕和离开页面包车型大巴时候,都会发送三遍呼吁和传递参数,百度总括服务核心之所以捕获到那么些新闻,维护在服务器中。调用百度总括API传递您的id,会依照id再次回到您的网址对应分析数据。

关于流量总结原理,有趣味详见揭穿百度总结和GoogleAnalytics的劳作规律

流量分析工具

有了地方API模拟工具,今后能够很便利的调节和测试大家百度总计接口了。百度总结是怎么获取这个网站用户访问的相关新闻的吗?原理其实非常粗略,百度本着你的挂号服务提供一段js代码,个中含有标识你在百度总结的id。你在网页中添加那段代码后,每当用户访问该网址时,会下载那段js脚本,加载实现和离开页面包车型客车时候,都会发送2遍呼吁和传递参数,百度总结服务宗旨之所以捕获到那个新闻,维护在服务器中。调用百度计算API传递您的id,会依据id重返您的网址对应分析数据。

关于流量总结原理,有趣味详见揭秘百度总计和谷歌(Google)Analytics的办事原理

挂号百度总计

了然了规律,那首先第三步我们报了名百度总计用户。注册成功后,我们找到
代码管理–>代码获取,将百度总结帮您自动生成好的js脚本复制过来,粘贴到site.js文件中。由于_layout母版页引用了site.js文件,那样的话,网站域名下全数的用户访问,都会被总结。

图片 3

设置完百度总计的代码,公布网站先后,能够用百度总括中代码检查,看看本人统计代码有未有被科学的安装,假如设置成功,估算20秒钟后,就足以在百度计算中查看网址的访问情况了。当然,你也足以增加八个域名的网址。

 图片 4

登记百度总结

知道了规律,那首先第二步大家报了名百度计算用户。注册成功后,大家找到
代码管理–>代码获取,将百度总计帮你自动生成好的js脚本复制过来,粘贴到site.js文件中。由于_layout母版页引用了site.js文件,那样的话,网址域名下持有的用户访问,都会被总括。

图片 3

安装完百度计算的代码,宣布网址先后,能够用百度计算中代码检查,看看自身总计代码有没有被科学的装置,假诺设置成功,估量20分钟后,就能够在百度总括中查看网址的访问情状了。当然,你也得以加上多个域名的网址。

 图片 4

报名Tongji API数据导出

 今后大家很有利的在百度计算中查阅各样总计数据了,比如流量分析、来源解析、访问分析、转化分析等等,接下去须要取得这个数量,来移植到大家相依为命的网址中来。百度提供了Tongji
API,大家得以调用API来询问自身网址的分析数据,从而尤其组织扩展的辨析视图了。

要访问Tongji API,须求提供多个token值,这几个须求开始展览申请,在
百度总计–>管理–>其余装置–>数据导出服务
中,请求开通,开通后百度总计会提须求你3个token字符串,未来用这些token就足以访问Tongji
API。Tongji
API具体的哀告格式表达详见:百度总括开发平台

譬如说我们必要请求站点列表,使用API模拟工具,请求类型POST,url地址:

1 {
2     "header": {
3         "account_type": 1,
4         "password": "<密码>",
5         "token": "<token>",
6         "username": "<用户名>"
7     },
8     "body": {}
9 }

输入百度计算的用户名和密码及走访使用的token,即可平常访问大家的登记的拥有站点,那里我们能够得到站点的site_id(也得以通过百度计算页面查看),后边请求该站点的辨析数据会用到。

报名Tongji API数据导出

 今后我们很有利的在百度计算中查看各个总计数据了,比如流量分析、来源解析、访问分析、转化分析等等,接下去须求取得那一个数量,来移植到大家团结互助的网址中来。百度提供了Tongji
API,大家得以调用API来询问本人网址的辨析数据,从而尤其协会增加的解析视图了。

要访问Tongji API,须要提供三个token值,那么些供给开始展览申请,在
百度总括–>管理–>其余装置–>数据导出服务
中,请求开通,开通后百度计算会提要求你二个token字符串,未来用那个token就足以访问Tongji
API。Tongji
API具体的呼吁格式表达详见:百度计算开发平台

比如说大家需求请求站点列表,使用API模拟工具,请求类型POST,url地址:

1 {
2     "header": {
3         "account_type": 1,
4         "password": "<密码>",
5         "token": "<token>",
6         "username": "<用户名>"
7     },
8     "body": {}
9 }

输入百度总结的用户名和密码及走访使用的token,即可平日访问大家的挂号的富有站点,那里大家能够得到站点的site_id(也能够经过百度总括页面查看),后面请求该站点的剖析数据会用到。

地方分布数据获得

百度计算提供的数据类型很多,我们选拔个中贰个来考察下效果。比如大家须要取得访问网址用户的地区消息,分化省区的用户访问情状。

  • 行使API模拟工具调节和测试:请求类型POST,url地址:

    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 }

地段分布数据获得

百度总计提供的数据类型很多,我们选取个中一个来考试下效果。比如我们须要取得访问网址用户的地区音信,区别省份的用户访问情形。

  • 应用API模拟工具调节和测试:请求类型POST,url地址:

    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,照旧那些好用的,具体运用办法,推荐访问官网:

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);

区域分析彰显

有了区域分析的多寡,接下去怀念要怎么显得。

  • 大家规划各类省份的访问量,能够透过地图展现,根据实际访问量的多少,通过颜色的深浅表现;
  • 报表的格局,具体呈现分裂省区的访问量和占比;
  • 柱状图的款型,展现近日柒天的访问量趋势;

地图彰显,选拔jvectormap插件,它是矢量地图,且有协调的API,如故尤其好用的,具体使用办法,推荐访问官网:

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);

小结

用地图突显区域分析功能至此就早已大致实现,大家抬高图表数据的来得,那样内容更丰裕些,最终,大家看下效果:

图片 7

小结

用地图展现区域分析作用至此就早已大致实现,大家抬高图表数据的突显,那样内容更丰裕些,最终,大家看下效果:

图片 7

相关文章