日志服务接入方式之JS篇

本文涉及的产品
对象存储 OSS,OSS 加速器 50 GB 1个月
简介: 本篇主要介绍使用JS SDK收集浏览器端的数据,附件是我们提供的JS库,使用它可以非常方便的收集浏览器端的信息,比如用户操作系统类型、浏览器类型和版本、屏幕分辩率等。除此以外,JS SDK还支持收集用户自定义的数据,比如在事件响应中收集特定的信息。

本篇主要介绍使用JS SDK收集浏览器端的数据,附件是我们提供的JS库,使用它可以非常方便的收集浏览器端的信息,比如用户操作系统类型、浏览器类型和版本、屏幕分辩率等。除此以外,JS SDK还支持收集用户自定义的数据,比如在事件响应中收集特定的信息。
JS SDK提供了一种非常灵活的前端页面代码埋点方式,您可以使用JS SDK将您关心的任何数据写入日志服务,后续可以在日志服务中消费这些数据,比如导入ODPS、OSS,也可以使用Client Library进行自定义消费,下面将介绍下JS SDK的使用方法。

使用方法

step 1: 开通logstore的web tracking功能

目前控制台暂不支持设置logstore支持tracking,如果要使用该功能,请先使用java sdk或者提工单给我们,工单里面列出需要开通的project、logstore。

使用java sdk请先引入maven地址:

<dependency>
  <groupId>com.aliyun.openservices</groupId>
  <artifactId>aliyun-log</artifactId>
  <version>0.6.3</version>
</dependency>
import com.aliyun.openservices.log.Client;
import com.aliyun.openservices.log.common.LogStore;
import com.aliyun.openservices.log.exception.LogException;
public class WebTracking {
    static private String accessId = "your accesskey id";
    static private String accessKey = "your accesskey";
    static private String project = "your project";
    static private String host = "log service data address";
    static private String logStore = "your logstore";
    static private Client client = new Client(host, accessId, accessKey);
    public static void main(String[] args) {
        try {
            //在已经创建的logstore上开通tracking功能
            LogStore logSt = client.GetLogStore(project, logStore).GetLogStore();
            client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), true));
            //关闭tracking功能
            //client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), false));
            //新建支持tracking功能的logstore
            //client.UpdateLogStore(project, new LogStore(logStore, 1, 1, true));
        }
        catch (LogException e){
            e.printStackTrace();
        }
    }
}

step 2: 将loghub-static-tracking.js复制到web目录,在页面中引入如下脚本。

<script type="text/javascript" src="loghub-static-tracking.js"></script>

step 3:构造tracker对象,并替换其中的<endpoint>、<project>、<logstore>,构造方法中最后一个参数是可选参数,用于从cookie中获取session id,不填写则使用默认值'JSESSION'。

var logger = new window.Tracker('<endpoint>','<project>','<logstore>','<session key name>');

举例如下:

var logger = new window.Tracker('cn-hangzhou-staging-intranet.sls.aliyuncs.com','ali-test-tracking','test');

step 4:收集数据,例子如下:

//填写日志key/value字段
logger.push('key1','value1');
logger.push('key2','value2');
//调用系统提供的收集函数
window.Agent(logger);
//发送日志数据
logger.logger();

window.Agent函数会收集如下字段:

字段 说明 例子
_ua_ 浏览器类型以及版本 Chrome: 50.0.2661.102
_os_ 操作系统类型 Win7
_scr_ 屏幕分辨率 1920*1080
_title_ 页面标题 Aliyun
_ref_ 来源地址
_url_ 页面地址 http://10.101.166.127/tracking.html
_can_ cookie信息 userId=828; userName=hulk
_sid_ session id
相关实践学习
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
目录
相关文章
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
JavaScript Serverless Linux
函数计算产品使用问题之遇到Node.js环境下的请求日志没有正常输出时,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
237 0
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的公司员工工作日志办公系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的公司员工工作日志办公系统附带文章和源代码部署视频讲解等
209 0
|
JavaScript 前端开发
autox.js如何打印日志?
autox.js如何打印日志?
|
资源调度 监控
[Nestjs] 使用log4js-node实现日志生成
安装依赖:使用 npm 或 yarn 安装 log4js。
824 0
|
缓存 监控 JavaScript
日志服务(SLS) 的桌面端 Node.js SDK 封装
日志服务(SLS) 的桌面端 Node.js SDK 封装
16638 7
|
Web App开发 JavaScript 测试技术
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
453 0
|
NoSQL JavaScript 前端开发
【Node.js实战】一文带你开发博客项目之Koa2重构(实现session、开发路由、联调、日志)
【Node.js实战】一文带你开发博客项目之Koa2重构(实现session、开发路由、联调、日志)
520 0
|
JavaScript NoSQL 中间件
【Node.js实战】一文带你开发博客项目之Express重构(博客的增删查改、morgan写日志)
【Node.js实战】一文带你开发博客项目之Express重构(博客的增删查改、morgan写日志)
552 0

相关产品

  • 日志服务