规范：数据埋点集成使用说明
1. 获取和引入 TrackLogData SDK
1.1. 异步方式 （推荐）
引入场景：通常情况下使用。
1.1.1. 本地手动指定sdk版本（vue SPA项目）
最新版本： //sa.a5.petrochina/stats/tld.globals.min.js 将下面代码放入</head>标签之前：
//vue项目引入方式:在public目录下的index.html中引入如下代码
<script type="text/javascript"> function domanURL(){var e=window.location.hostname;return e.indexOf('a5.petrochina')>0?'//sa.a5.petrochina':e.indexOf('a5test.petrochina')>0?'//sa.a5test.petrochina':null} var LTD_URL=domanURL(); (function(para){var p=para.sdk_url,n=para.name||'tld',token=para.token,w=window,d=document,s='script',x=null,y=null;if(typeof(w['TLD202108'])!=='undefined'){return false}w['TLD202108']=n;w[n]=w[n]||function(a){return function(){(w[n]._q=w[n]._q||[]).push([a,arguments])}};w[n]['__SV']=1.6;var ifs='track_pv track_spa time_event get_appStatus track track_pageview track_links track_forms register register_once alias unregister identify login logout signup name_tag set_config reset'.split(' ');for(var i=0;i<ifs.length;i++){w[n][ifs[i]]=w[n].call(null,ifs[i])}w[n]['_i']=[];if(!w[n]._t&<D_URL){x=d.createElement(s),y=d.getElementsByTagName(s)[0];x.async=1;x.src=p;x.setAttribute('charset','UTF-8');w[n].para=para;w[n]['_i'].push([token,para,n]);y.parentNode.insertBefore(x,y)}}) ({ sdk_url: LTD_URL+ "/stats/tld.globals.min.js", token:"项目名称", //填写项目简称 img:true, api_host: LTD_URL+"/api", //服务接口地址 code_type:1,// 1 权限编码， 2 .net菜单编码 persistence: "localStorage", //浏览器存储类型 localStorage,sessionStorage,Cookie 三种模式 is_single_page: true, // single_page_config: { mode: 'history', autotrack:false, track_replace_state: false }, cross_subdomain_cookie: true }); </script> |
实例：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <title><%= webpackConfig.name %></title> <script> /* 检查ie浏览器版本 */ ;(function() { var o = navigator.userAgent.match(/MSIE (\d+)/) o = o && o[1] // console.log('o', o) // ie9 以下 || o != null if (!!o && o < 10) { // 更新页面 var newUrl = location.protocol + '//' + location.host + '/ieupdate/index.html' location.href = newUrl } })() //注入所属环境 window.env="zb"; /*window.env*/ </script> </head> <body> <noscript> <strong >We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript"> function domanURL(){var e=window.location.hostname;return e.indexOf('a5.petrochina')>0?'//sa.a5.petrochina':e.indexOf('a5test.petrochina')>0?'//sa.a5test.petrochina':null} var LTD_URL=domanURL(); (function(para){var p=para.sdk_url,n=para.name||'tld',token=para.token,w=window,d=document,s='script',x=null,y=null;if(typeof(w['TLD202108'])!=='undefined'){return false}w['TLD202108']=n;w[n]=w[n]||function(a){return function(){(w[n]._q=w[n]._q||[]).push([a,arguments])}};w[n]['__SV']=1.6;var ifs='track_pv track_spa time_event get_appStatus track track_pageview track_links track_forms register register_once alias unregister identify login logout signup name_tag set_config reset'.split(' ');for(var i=0;i<ifs.length;i++){w[n][ifs[i]]=w[n].call(null,ifs[i])}w[n]['_i']=[];if(!w[n]._t&<D_URL){x=d.createElement(s),y=d.getElementsByTagName(s)[0];x.async=1;x.src=p;x.setAttribute('charset','UTF-8');w[n].para=para;w[n]['_i'].push([token,para,n]);y.parentNode.insertBefore(x,y)}}) ({ sdk_url: LTD_URL+ "/stats/tld.globals.min.js", token:"项目名称", //填写项目简称 img:true, api_host: LTD_URL+"/api", //服务接口地址 code_type:1,// 1 权限编码， 2 .net菜单编码 persistence: "localStorage", //浏览器存储类型 localStorage,sessionStorage,Cookie 三种模式 is_single_page: true, // single_page_config: { mode: 'history', autotrack:false, track_replace_state: false }, cross_subdomain_cookie: true }); </script> </body></html> |
在permission.js文件中使用验证权限touter.beforeEach 方法内调用
//to 将要跳转的路由对象// from 跳转前端的路由对象tld.track_spa(to, from) |
在 src/store/modules/user.js中添加 登录用户 window.tld.login(userId)和退出用户的方法
1.1.2. 本地手动指定sdk版本（.net项目 或者MVC项目）
最新版本： //sa.a5.petrochina/stats/tld.globals.min.js 将下面代码放入</head>标签之前：
<script>// 记录菜单点击次数 function domanURL() { var e = window.location.hostname; return e.indexOf('a5.petrochina') > 0 ? '//sa.a5.petrochina' : e.indexOf('a5test.petrochina') > 0 ? '//sa.a5test.petrochina' : '//sa.a5test.petrochina' } var LTD_URL = domanURL(); (function (para) { var p = para.sdk_url, n = para.name || 'tld', token = para.token, w = window, d = document, s = 'script', x = null, y = null; if (typeof (w['TLD202108']) !== 'undefined') { return false } w['TLD202108'] = n; w[n] = w[n] || function (a) { return function () { (w[n]._q = w[n]._q || []).push([a, arguments]) } }; w[n]['__SV'] = 1.6; var ifs = 'track_pv track_spa time_event get_appStatus track track_pageview track_links track_forms register register_once alias unregister identify login logout signup name_tag set_config reset'.split(' '); for (var i = 0; i < ifs.length; i++) { w[n][ifs[i]] = w[n].call(null, ifs[i]) } w[n]['_i'] = []; if (!w[n]._t && LTD_URL) { x = d.createElement(s), y = d.getElementsByTagName(s)[0]; x.async = 1; x.src = p; x.setAttribute('charset', 'UTF-8'); w[n].para = para; w[n]['_i'].push([token, para, n]); y.parentNode.insertBefore(x, y) } }) ({ sdk_url: LTD_URL + "/stats/tld.globals.min.js", token: "a5iframe", img: true, api_host: LTD_URL + "/api", code_type: 2, // 1 权限编码， 2 .net菜单编码 debug: true, persistence: "localStorage", cross_subdomain_cookie: true });</script> |
A5 ./Index.aspx引用脚本实例如下：
<head runat="server"> <meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=8;" /> <link href="AppThemes/css/index_style.css" rel="stylesheet" type="text/css" /> <title>采油与地面工程运行管理系统</title> <script type="text/javascript" src="AppCode/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript"> // 记录菜单点击次数 function domanURL() { var e = window.location.hostname; return e.indexOf('a5.petrochina') > 0 ? '//sa.a5.petrochina' : e.indexOf('a5test.petrochina') > 0 ? '//sa.a5test.petrochina' : '//sa.a5test.petrochina' } var LTD_URL = domanURL(); (function (para) { var p = para.sdk_url, n = para.name || 'tld', token = para.token, w = window, d = document, s = 'script', x = null, y = null; if (typeof (w['TLD202108']) !== 'undefined') { return false } w['TLD202108'] = n; w[n] = w[n] || function (a) { return function () { (w[n]._q = w[n]._q || []).push([a, arguments]) } }; w[n]['__SV'] = 1.6; var ifs = 'track_pv track_spa time_event get_appStatus track track_pageview track_links track_forms register register_once alias unregister identify login logout signup name_tag set_config reset'.split(' '); for (var i = 0; i < ifs.length; i++) { w[n][ifs[i]] = w[n].call(null, ifs[i]) } w[n]['_i'] = []; if (!w[n]._t && LTD_URL) { x = d.createElement(s), y = d.getElementsByTagName(s)[0]; x.async = 1; x.src = p; x.setAttribute('charset', 'UTF-8'); w[n].para = para; w[n]['_i'].push([token, para, n]); y.parentNode.insertBefore(x, y) } }) ({ sdk_url: LTD_URL + "/stats/tld.globals.min.js", token: "a5iframe", img: true, api_host: LTD_URL + "/api", code_type: 2, // 1 权限编码， 2 .net菜单编码 debug: true, persistence: "localStorage", cross_subdomain_cookie: true }); </script> <!-- 消息提醒弹出提醒框区域 --></head><body style="height: 100%; margin: 0" onload="document.getElementById('divTip').style.height='0px'"> <link href="AppThemes/Styles/telerik.css" rel="Stylesheet" type="text/css" /> <form id="form2" runat="server"> <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> var userid = '<%=UserId %>'; //console.log('当前登录用户id:' + userid); tld.login(userid); function OnNodeClick(sender, args) { var node = args.get_node(); var url = node.get_value(); if (url && url.length) { var showType = node._attributes.getAttribute("showtype"); var name = node.get_text(); var nodeid = node._attributes.getAttribute("nodeid"); tld.track_pv(nodeid); if (!new RegExp("^http[s]?://").test(url)) { //http:// 或 https:// 的全路径式链接 if (new RegExp("^~[/|\\\\]").test(url)) { // ~/ 或 ~\ 的路径样式 url = url.substring(2, url.length); } } var tag = node._attributes.getAttribute("tag"); $.ajax({ type: "POST", contentType: "application/json", url: "Index.aspx/SaveSearch", data: "{url:'" + url + "'}", dataType: 'json', success: function (data, textStatus) { if (data.d != null && data.d != "") { } }, error: function (s) { alert("操作失败！"); } }); if (showType == "2")//弹出 window.open(url, name, "", ""); else //内嵌 selTab(name, url); } else { if (node._element.children(0).childNodes[2].className == "rtPlus" || node._element.children(0).childNodes[2].className == "rtMinus") { node._element.children(0).childNodes[2].click(); } } } </script> </telerik:RadCodeBlock> <div id="ParentDivElement" style="height: 100%;"> <telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" VisibleDuringInit="false"> <telerik:RadPane ID="TopPane" runat="server" Height="86px"> <div class="Header"> <div id="logo"> </div> <div id="logout"> <input type="button" id="btn_logout" value="" alt="" onclick="tld.logout();window.location.href='Index.aspx?quit=1';" /> </div> </div> </telerik:RadPane> <telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" Width="100%" BorderWidth="0" CssClass="RadSplitter_Default"> <telerik:RadPane ID="LeftPane" runat="server" Width="210" Scrolling="none" BorderWidth="0" MinWidth="210" MaxWidth="400"> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Style="height: 100%;" ClientEvents-OnResponseEnd="OnResponseEnd"> <telerik:RadPanelBar ID="RadPanelBar1" runat="server" CssClass="RadPanelBar_Default1" Style="white-space: nowrap" ExpandMode="FullExpandedItem" OnItemClick="RadPanelBar_Click"> </telerik:RadPanelBar> </telerik:RadAjaxPanel> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" Height="100%" CollapseExpandPaneText="<%$Resources:Language,Public_Expand_Collapse %>"> </telerik:RadSplitBar> <telerik:RadPane ID="RightPane" runat="server" Height="100%" Width="100%" Scrolling="None"> <telerik:RadSplitter ID="RadSplitter3" runat="server" Height="100%" Width="100%" Orientation="Horizontal"> <telerik:RadPane runat="server" Height="35px" Scrolling="none" Width="100%" CssClass="rightPanelPadding"> <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" CssClass="RadTabStrip_Default1" ScrollChildren="true" ScrollButtonsPosition="Middle" Orientation="HorizontalTop"> </telerik:RadTabStrip> </telerik:RadPane> <telerik:RadPane runat="server" Height="100%" Scrolling="none" Width="100%"> <telerik:RadMultiPage ID="RadMultiPage1" runat="server" CssClass="multiPage" Height="100%" SelectedIndex="0" Width="100%"> </telerik:RadMultiPage> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> <telerik:RadPane runat="server" ID="fullContentPane" Scrolling="none" Height="100%" Width="100%"> </telerik:RadPane> </telerik:RadSplitter> </div> </form></body></html> |
在点击菜单方法中调用 tld.track_pv("菜单code")方法
事件方法
1.2. 如何标识用户
1.2.1. 在登录和注册成功后，调用tld.login(user_id) 来标识真实用户
JavaScript SDK 会自动生成一个 deviceUDID 并永久保存在浏览器中的 Cookie 中,作为匿名用户唯一标识。如果你已知了真实的用户 id ，你可以通过 tld.login(user_id)设置用户userId。
问题1，这行代码放在哪里？
必须放在所有事件前面。也就是在 sdk 载入代码后面，先使用 tld.login ，然后再调用事件跟踪等，这样后续的事件才会使用这新的userId。
问题2，在什么时候调用？
页面登录的时候，只要获取到用户是登录状态，就需要调用。或者 注册流程成功的时候。
1.2.2. 使用 tld.logout 切换到之前的匿名 id
tld.logout();取消当前登录的userId
@param {function} callback 可选。表示已经发送完数据之后的回调
问题1，这个在什么时候使用？
在你用过 tld.login 后，在一个浏览器有多个用户登录的时候，你想在用户退出后清除当前的userId
触发事件上报
sdk初始化后，用户点击Button按钮，调用API上报自定义事件
tld.track('ViewProduct'); |
track_pv(code)
有菜单的编码的时候使用该方法。code为菜单的编码通常应用于A5的.net菜单功能，注意配置文件code_type必须为2
tld.track_pv(''); |
track_spa(to, from)
单页面vue、react、Angular等框架的项目工程，其中菜单有权限编码的功能菜单，在router 跳转的时候调用该方法，初始配置文件code_type必须为1.
to:将要跳转的路由对象 from:跳转前端的路由对象
tld.track_spa(to, from); |
track_pageview(properties)
当有些时候需要手动触发PV时，调用该方法，其中参数是PV事件的自定义属性。
若选择手动触发PV，请关闭自动触发PV，否则PV事件将触发多次。
tld.track_pageview({ProductId: '22'}); |
参数说明
|
参数
|
默认值
|
含义
|
备注
| |
|---|---|---|---|---|
| sdk_url | 无 | tld.globals.min.js文件的地址。 | ||
| name | tld |
SDK 使用的一个默认的全局变量，如定义成 tld的话，后面可以使用 tld.track() 用来跟踪信息。为了防止变量名重复，你可以修改成其他名称比如 tlddata 等 。 |
||
| api_host | 无 | 数据接收地址。 | ||
|
code_type |
1 |
1 权限编码， 2 .net菜单编码 |
||
| autotrack | false | 是否初始化后自动触发埋点track方法 | ||
| img | true | 事件上报方式 模式为图片便签的形式发送防止跨域也可以通过get方式上传埋点 | ||
cross_subdomain_cookie |
true |
设置成 true 后，表示在根域下设置 cookie 。也就是如果你有 http://sa.a5.petrochina/ 和 http://www.a5.petrochina 两个域，且有一个用户在同一个浏览器都登录过这两个域的话，我们会认为这个用户是一个用户。如果设置成 false 的话，会认为是两个用户。 |
||
| persistence | 'localStorage' | 浏览器存储类型 localStorage,sessionStorage,Cookie 三种模式 | ||
| persistence_name | ‘’ | 存储的文件名称 | ||
| loaded | function () { }, |
当sdk初始化结束后，所有事件发送前，可配置该方法 如：
|
||
| debug | false | 设置 true 后会在网页控制台打 logger，会显示发送的数据,设置 false 表示不显示。 | ||
| use_client_time | false | 客户端系统时间的不准确，会导致发生这个事件的时间有误，所以这里默认为 false ，表示不使用客户端时间，使用服务端时间，如果设置为 true 表示使用客户端系统时间。如果你在属性中加入 {$time: new Date()} ，注意这里必须是 Date 类型，那么这条数据就会使用你在属性中传入的这个时间。 | ||
| session_interval_mins | 30 | 一次Session的超时时间，默认30分钟。 | ||
| truncateLength | 255 | 通用字符串最大长度，超过部分会被截取丢弃（由于超过 7000 的字符串会导致 url 超长发不出去，所以限制长度）。 | ||
| img | beacon | 表示使用 beacon 请求方式发数据，可选使用 'image' 图片 get 请求方式发数据。( 神策系统 1.10 版本以后 ) 支持使用 'ajax' 和 'beacon' 方式发送数据，这两种默认都是 post 方式， beacon 方式兼容性较差。 | ||
| is_single_page | false | 表示是否开启单页面自动采集 $pageview 功能，SDK 会在 url 改变之后自动采集web页面浏览事件 $pageview。 |
|
|
single_page_config |
{ mode: 'history', //两种模式 history 、hash |
表示不开启批量发送，设置为 true 表示开启批量采集。 |
字段详细说明以及属性如下:
|
字段名称
|
类型
|
说明
|
|---|---|---|
|
字段名称
|
类型
|
说明
|
| browser | string | 浏览器 |
| browserVersion | string | 浏览器版本 |
| currentDomain | string | 当前访问页面的域名 |
| currentUrl | string | 当前访问页面的url |
| title | string | 当前访问页面的标题 |
| urlPath | string | 当前访问页面的路径 |
| deviceId | string | 本地唯一标记(可理解为设备id) |
| deviceOs | string | 客户端操作系统 |
| deviceOsVersion | string | 客户端操作系统版本 |
| devicePlatform | string | 客户端平台（桌面、安卓、ios） |
| eventId | string | 上报事件的id |
| dataType | string | 事件类型（具体请看 src/config 中的 SYSTEM_EVENT_OBJECT） |
| language | string | 本地客户端语言 |
| pageOpenScene | string | 网页打开场景（浏览器、APP） |
| persistedTime | string | 用户首次访问网站时间戳 |
| referrer | string | 上一页url（来源页url） |
| referringDomain | string | 上一页域名（来源页域名） |
| screenHeight | string | 本地客户端屏幕高度（像素） |
| screenWidth | string | 本地客户端屏幕宽度（像素） |
| sdkType | string | 引入的sdk类型(网页：js) |
| sdkVersion | string | 引入的sdk版本 |
| sessionUuid | string | 当前会话的id |
| time | string | 当前上报事件用户触发的时间戳 |
| appKey | string | 据凭证（通过它来归类数据） |
| productId | string | 据凭证（通过它来归类数据） |
| code | string | 上报的菜单编码 |
| codeType | int | 上报菜单类型 1、权限id 2、菜单id |
deviceUdid
