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引用脚本实例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<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
标签：集成,string,para,track,规范,url,tld,var,埋点 From： https://www.cnblogs.com/fqs123456/p/16623303.html