OLA Log 埋点集成示例

基于 ola-log-wrapper.js 的通用埋点解决方案

📊 自动初始化 设备指纹自动生成

🔐 灵活登录 支持匿名和真实用户

🎯 自定义事件 支持任意自定义事件

Device ID 初始化中...

🚀 快速开始

1. 引入脚本

<!-- OLA Log SDK -->
<script src="https://yoitoki.jp/renai/ola-log.1.0.2.umd.min.js"></script>

<!-- 设备指纹库（可选）-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fingerprint2.min.js"></script>

<!-- 埋点封装库 -->
<script src="https://yoitoki.jp/renai/ola-log-wrapper.js"></script>

2. 初始化

// 最小化配置
window.yoiReportWrapper({
  pageName: 'my_page'
});

// 完整配置
window.yoiReportWrapper({
  project: 'yoipapa',
  appId: 'your_app_id',
  serverUrl: 'https://your-server.com/sync_js',
  channel: 'web',
  pageName: 'my_page',
  pageIndex: 0,
  autoPageView: true,    // 自动上报页面浏览
  autoDeviceId: true,    // 自动生成设备ID
  debug: false,           // 调试日志
  superProperties: {
    custom_prop: 'value'
  }
});

📱 交互演示

页面浏览

// 基础页面浏览
window.yoiReport.pageView();

// 带自定义参数
window.yoiReport.pageView({
  refer_type: 'banner',
  campaign_id: 'summer_2024'
});

用户登录

登录状态

// 匿名登录（推荐，用设备ID）
window.yoiReport.loginAnonymously();

// 使用设备ID登录
window.yoiReport.loginWithDeviceId();

// 使用真实用户ID登录
window.yoiReport.login('user_12345');

// 登出
window.yoiReport.logout();

// 获取当前用户ID
window.yoiReport.getUserId();

// 检查登录状态
window.yoiReport.isUserLoggedIn();

按钮点击

// 基础按钮点击
window.yoiReport.buttonClick('submit_button');

// 带自定义参数
window.yoiReport.buttonClick('submit_button', {
  button_position: 'header',
  button_text: '立即购买'
});

自定义事件

// 简单自定义事件
window.yoiReport.track('video_play', {
  video_id: 'vid_001',
  duration: 30
});

// 复杂自定义事件
window.yoiReport.track('purchase_complete', {
  order_id: 'ord_12345',
  amount: 99.99,
  currency: 'CNY',
  items: [
    { sku: 'sku_001', name: '商品A', quantity: 1 },
    { sku: 'sku_002', name: '商品B', quantity: 2 }
  ]
});

属性设置

// 设置全局属性（所有事件都会带上）
window.yoiReport.setSuperProperties({
  vip_level: 'gold',
  ab_test: 'version_b'
});

// 设置用户属性
window.yoiReport.userSet({
  gender: 'female',
  age: 25,
  registration_date: '2024-01-01'
});

💡 最佳实践

推荐流程：

初始化时开启 autoDeviceId: true
页面加载后调用 loginAnonymously()
用户登录后调用 login('user_id')

用户去重说明：

埋点后台需要用户标识进行去重。即使是匿名用户，也建议调用 loginAnonymously() 使用设备ID作为标识，这样可以跨页面、跨会话追踪同一用户。

注意事项：

必须先引入 OLA Log SDK，再引入封装库
不登录也能上报事件，但后台无法准确去重
同一用户先匿名后登录，后台可能可以关联（取决于 SDK 实现）
开启 debug 模式可在控制台查看详细日志

配置选项完整列表

{
  project: 'yoipapa',              // 项目名称
  appId: 'xxx',                    // 应用ID
  serverUrl: 'https://...',        // 服务器地址
  taParams: { batch: true },       // 上报参数
  superProperties: {},             // 全局属性
  channel: 'web',                  // 渠道（优先使用此值）
  pageName: 'home',                // 页面名称（优先使用此值）
  pageIndex: 0,                    // 页面索引（优先使用此值）
  autoPageView: true,              // 自动上报页面浏览
  autoDeviceId: true,              // 自动初始化设备指纹
  debug: false                     // 调试日志
}

🔧 API 参考

核心方法

方法	说明	参数
`pageView()`	上报页面浏览	extraData? (object)
`login()`	用户登录	uid (string/number)
`loginAnonymously()`	匿名登录	无
`loginWithDeviceId()`	使用设备ID登录	callback? (function)
`logout()`	登出	无
`buttonClick()`	上报按钮点击	btnName (string), extraData? (object)
`track()`	上报自定义事件	eventName (string), properties? (object)
`setSuperProperties()`	设置全局属性	properties (object)
`userSet()`	设置用户属性	properties (object)
`getDeviceId()`	获取设备ID	无
`getUserId()`	获取用户ID	无
`isUserLoggedIn()`	检查登录状态	无