1. 介绍

Coraool WebSDK集成了埋点系统 & API调用系统。

2. 对接流程

整体流程说明：

• STEP1：开发者接入Coraool WEBSDK，调用自定义埋点上报
  • 1. 初始化
  • 2. 设置登录态
  • 3. 自定义埋点
• STEP2：调用 API 获取数据，获取数据。

3.使用说明

3.1 script 引入方案

<script src="coraool-web-sdk-2.5.0.js"></script>

// 或
npm install @coraoolsg/coraool-web-sdk

  3.2 调用示例

1. 步骤一：初始化

window.CORA_SDK.initialize({
    AppId: "appId", // 目前传测试值，后续在coraool申请
    AppKey: "appKey",
    AppSec: "appSec",
    abTest: true // true 去请求abTest接⼝，false不请求
})

2. 步骤二：设置登录态

设置登录态（登录，登出时调用）

window.CORA_SDK.setUserId({
    userId: "userId", // 用户Id，登录时传真实的userId，登出时传空""
    afId: "afId", // 额外信息 - 例如afId
});  

3. 步骤三：API调用示例

  3.1 Invoke 方法调用

// 调用
const res = window.CORA_SDK.invoke({
  apiName: "open.coraool.bingoplus.home.game.ranking", // 获取Ranking列表的时候 固定传该值
  apiVersion: "1.0.0", // 目前只支持 1.0.0
});

3.2 Track埋点

window.CORA_SDK.track("eventName", {
    eventType: "CLICK", // CLICK 点击 EXPOSE曝光 PAGE页面 CUSTOM自定义（不填为自定义）
    "customClickKey1": "customClickValue1", // 自定义key: value
    "customClickKey2": "customClickValue2", // 自定义key: value
});

3.3 AB Test

1. getBucket

此方法用于获取实验对应的实验桶

window.CORA_SDK.abTest.getBucket("xxx_layer").then((res) => {
    console.log(res) // { bucket:"xxx"}
})

2. getBucketObject

此方法用于获取实验对应的实验桶（更全的数据）

window.CORA_SDK.abTest.getBucketObject("xxx_layer").then((res) => {
    console.log(res)
})
/*
  res:{
        "name": "xxx_layer01",
        "version": "11"
        "bucket": "base",
        "bucketVersion": "11",
     }
*/

4. API说明

4.1 initialize

    SDK初始化，入参说明：

  示例：

window.CORA_SDK.initialize({
    AppId: "appId", // 目前传测试值，后续在coraool申请
    AppKey: "appKey",
    AppSec: "appSec",
    abTest: true // true 去请求abTest接⼝，false不请求
})

4.2 setUserId

    设置userId 、afId，入参说明：

示例：

window.CORA_SDK.setUserId({    userId: "112332123_ef_123", // 用户的userId
    afId: "2112332123_ef_1231_afId_3123", // 额外信息 - 用户的afId
}); 

4.3 Invoke

调用api

window.CORA_SDK.invoke({
    apiName: "open.coraool.bingoplus.home.game.ranking",
    apiVersion: "1.0.0",
    params: {} // 无 params 可不写此行
})

  入参说明：

 出参说明：

{
    version: "75a7ff8403ccb7f4b26028ba7c5a6fac", // 版本号
    ranking: [{
       gameId: "CrazyTime0000002", // 游戏Id
       gameTop: "top1 Slot", // 游戏排行
       gameType: 17, // 游戏类型
       likeCnt: 2001, // 收藏数
       platformId: "108", // 游戏厅Id
       tags: ['MostPlayed',...], // 推荐标签
       },
       {...}
    ],
    track: { // 埋点数据 (AF上报数据，与本次track不冲突)
       expLayer: 'NEWUSER', // 实验参数,用于埋点上报  
       expBucket: '74',  // 实验参数,用于埋点上报 
       expAlg: 'ggr', // 实验参数,用于埋点上报
       expExtra: null // 实验参数,用于埋点上报
    }
}

  出参说明：

4.4 Track

自定义埋点

自定义埋点的应用场景非常广泛，需要灵活运用，避免数据多报，误报。

window.CORA_SDK.track("eventName", {
    pageName: "homePage", // 页面名称
    eventType: "PAGE", // CLICK 点击 EXPOSE曝光 PAGE页面 CUSTOM自定义（不填为自定义）
    customClickKey1: "customClickValue1",
    customClickKey2: "customClickValue2",
    customClickKey3: "customClickValue3",
});

4.5 Tracker

1. 新增 window.CORA_SDK.tracker.page 页面事件
2. 新增 window.CORA_SDK.tracker.click 点击事件
3. 新增 window.CORA_SDK.tracker.expose 曝光事件
4. 新增 window.CORA_SDK.tracker.custom 自定义事件

3.0版本后，会取代 4.4 Track

// 以page页面事件为例，调用示例
window.CORA_SDK.tracker.page("eventName", {
    customKey1: "customValue1",
    customKey2: "customValue2",
});

4.6 trackPageStart

进入页面埋点，若埋点方式为手动模式，可自行开始埋点。

// 方法:
// window.CORA_SDK.trackPageStart(eventName: string, eventValue: Object)

// good case
export default {
    // 以vue2.6为例，在生命周期beforeCreate执行最佳
    beforeCreate() {
        window.CORA_SDK.trackPageStart(eventName: string, eventValueParams: Object)
    }
}

参数说明：

4.7 trackPageEnd

离开页面埋点，离开页面的埋点（和 trackPageStart 配合使用，参数一致）

// 方法：
window.CORA_SDK.trackPageEnd(eventName: string, eventValueParams: Object)

// good case
export default {
    // 以vue2.6为例，在生命周期beforeDestory执行最佳
    beforeDestory() {
        window.CORA_SDK.trackPageEnd(eventName: string, eventValueParams: Object)
    }
}

4.8 setCustomDeviceId

支持自定义设备ID

// 方法：
// 在window.CORA_SDK.initialize之后执行
window.CORA_SDK.setCustomDeviceId("xxid");

4.9 setPageCollectionMode

设置埋点模式，支持两种埋点模式：手动、自动。

// 方法：
// 在window.CORA_SDK.initialize之后执行
window.CORA_SDK.setPageCollectionMode("AUTO");

参数说明：

自动模式：默认开启，自动上报页面埋点。

手动模式：手动开启，关闭页面自动上报。

4.10 updatePageProperties

更新埋点参数

添加埋点参数后所有页面都会生效

若要清空新增的属性，只需再调用一次方法，传入空对象{}

window.CORA_SDK.updatePageProperties({
   "key1": value1,
   "key2": value2,
   "key3": value3,
   ...
});

4.11 updatePageName

更新页面名称

// 在window.CORA_SDK.initialize之后执行
window.CORA_SDK.updatePageName(pageName:string)

// good case
export default {
    // 以vue2.6为例，在生命周期beforeCreate执行最佳
    beforeCreate() {
        window.CORA_SDK.updatePageName('PAGEHOME') // 'PAGEHOME'此处是页面名
    }
}

示例：

window.CORA_SDK.updatePageName("homePage");

4.12 setPlatform

设置设备系统，使用说明：

// 举例：小程序端打开外部链接，跳转落地页后调用此方法
// 在window.CORA_SDK.initialize之后执行
window.CORA_SDK.setPlatform("MiniApp")

4.13 getGtpInfo

获取gtp的值

// 方法示例：
cont gtp = window.CORA_SDK.getGtpInfo('a.b.c.d') // 传入gtp数值
console.log(gtp) // 输出结果 '123.home.Feeds.0'

4.14 GTX

1. GTX 自动化埋点简介
   • GTX埋点用于页面流量的追踪和分析，可以解决如下关键业务问题：
     • 统计指定页面的PV、UV等基础指标；
     • 追踪页面流量的来源和去向，分析用户路径的流量漏斗；
     • 基于流量和转化评估，告知业务方，每个页面以及页面内坑位的流量效率；
   • 名词解释：
     • Global Tracking Position（GTP）：全局位置跟踪模型，用于追踪位置以及不同位置之间流量的流转；
     • Global Tracking Content（GTC）：全局内容跟踪模型，用于跟踪投放内容以及引导转化效率；
     • Global Tracking X （GTX）：指代 GTP、GTC 构成的解决方案；
2. GTP 埋点
   • GTP参数定义：a.b.c.d = ${appId}.${pageId}.${module}.${point}，GTP需要严格按照如下规范进行构造和使用，UI层通过结构化的数据构造这4层结构（建议用这种方式），也可以通过手动的方式构造。
   • 【重要】a标签页面跳转<a href="/页面名?gtp=a.b.c.d"></a> ，使用代码跳转url需要加上 &gtp=a.b.c.d。

<!-- 
    data-gtp-b="页面编号" 
    data-gtp-c="楼层/模块编号"
    data-gtp-d="楼层/模块内的细分的子模块编号" 
-->
<body>
    <div data-gtp-b="home">
        <!-- 楼层 or 模块 -->
        <div data-gtp-c="topbar">
            <div class="xx">
                <div data-gtp-d="1xx">d一号位</div>
                <div data-gtp-d="2xx">d二号位</div>
            </div>
        </div>
        <div class="xx"></div>
        
        <!-- 楼层 or 模块 -->
        <div data-gtp-c="banner">
            <div class="xx">
                <div data-gtp-d="1xx">d一号位</div>
                <div data-gtp-d="2xx">d二号位</div>
            </div>
        </div>
        <div class="xx"></div>
    </div>
</body>

GTX 埋点其他用法

代码示例

<div data-gtp-b="home">
    <div data-gtp-c="topbar">
        <div data-gtp-d="1xx" data-gtp-ext='{"itemId":123}'>
            正常曝光，点击埋点
        </div>
        
        <div data-gtp-d="2xx" data-gtp-multiclick="true">  
           支持多次点击
        </div>
    
        <div data-gtp-d="3xx" data-gtp-skip="true">
            这一块的均不曝光
        </div>

    </div>
</div>

3. GTC 埋点

• GTC参数定义：a.b.c.d = ${sysId}.${algoId}.${algoVer}.${audienceId}，GTC也包含4层结构，在不同层级上的定义

代码示例

通过url传参带入，如: https://www.coraool.com?gtc=a.b.c.d SDK自动补获

4.15 获取 AB Test 实验参数

1. getBucket

此方法用于获取实验对应的实验桶

入参说明：

请求代码示例：

window.CORA_SDK.abTest.getBucket("xxx_layer").then((res) => {
    console.log(res) // { bucket:"xxx"}
})

出参说明:

示例：

{
    bucket:"xxx"
}

2. getBucketObject

此方法用于获取实验对应的实验桶（更全的数据）

入参说明:

请求代码示例：

window.CORA_SDK.abTest.getBucketObject("xxx_layer").then((res) => {
    console.log(res)
})

出参说明:

示例：

{
    "name": "xxx_layer01",
    "version": "11"
    "bucket": "base",
    "bucketVersion": "11",
}

4.16 getDeviceId

获取设备ID

window.CORA_SDK.getDeviceId()
// 输出结果 设备ID 'xfdaslfjllf1212312xx'

4.17 getAppId

获取AppId

window.CORA_SDK.getAppId()
// 输出结果 APPID '12345'

5. 信息采集表