Current Path:Home » Documents » API Docs » The text

Coraool WebSDK Development Guide

1. Introduction

Coraool WebSDK integrates the tracking system & API calling system.

2. Docking process

Overall process description:

  • STEP1: Developers access Coraool WEBSDK and call custom buried points to report
    • 1. Initialization
    • 2. Set login status
    • 3. Customized buried points
  • STEP2: Call API to obtain data and obtain data.

3. Instructions for use

3.1 scriptIntroduction plan

<script src="https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.2.6.js"></script>
VersionDateRelease NotesSDK
20240716Version 2.2.6 Updates:
1. Added getDeviceId, the method for obtaining the device ID. For details, see 4.16
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.2.6.js
20240712Updates in version 2.2.5:
1. Improve system stability
2. Add three methods for obtaining experimental data by AB, see Section 4.15 for details
window.CORA_SDK.abTest.getAbtest() is used to get the experiment name
Window. CORA_SDK. AbTest. GetAbtestObject () is used to obtain subjects
Window. CORA_SDK. AbTest. GetAbtestListAll () is used to obtain all AB experiment data
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.2.5.js
20240628Version 2.2.0 Updates:
1. Add AB capabilities. For details, see Section 4.15
window.CORA_SDK.abTest.getBucket() is used to get the experiment name
Window. CORA_SDK. AbTest. GetBucketObject () is used to obtain the experiment data
2. Added window. cora_SDk.trackers.page events. For details, see Section 4.5
3. Added Window.cora_SDk.trackers.click event, see Section 4.5
4. Add the Window.cora_SDk.trackers.expose event. For details, see Section 4.5
5. Add Window.cora_SDk.trackers.custom custom events. For details, see Section 4.5
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.2.0.js
202405241.GTP fully buried point
2.Improve system stability
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.1.2.js
202404241. Improve system stabilityhttps://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.1.0.js

  3.2 Call example

1. Step 1: Initialization

window.CORA_SDK.initialize({
    AppId: "appId", // 目前传测试值,后续在coraool申请
    AppKey: "appKey",
    AppSec: "appSec",
})

2. Step 2: Set login status

Set login status ( login, called when logging out)

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

3. Step 3: API call example

  1. Invoke method call

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

2. Track buried points

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

3. A/B 实验参数

异步获取 A/B Test 的实验参数

// @param {String[]} layerNameArray 实验层
const expr = await window.CORA_SDK.getABTestParams(["layer1","layer2"])

入参说明:

字段名类型是否必须解释
layerNameArraystring[]Y实验层
字段名类型是否必须解释
Array
layerstring分层名称
exprstring实验名称
argsstring实验参数
exprTrackingstring实验埋点参数
[
    {
        "args": "",
        "expr": "base",
        "exprTracking": "layer1.2|base.2",
        "layer": "layer1"
    },
    {
        "args": "",
        "expr": "base",
        "exprTracking": "layer2.1|base.1",
        "layer": "layer2"
    }
]

4. API description

4.1 initialize

    SDK initialization, parameter description:

Field nametypeIs it necessaryexplainillustrate
AppIdstringyesAppId of SDK initialization parameterIt is allocated when the business party accesses the SDK. It is allocated independently by different ends and is globally unique.
AppKeystringyesunique application identifierAllocated when the business party accesses the SDK, one for each end
AppSecstringyesEncrypted string for data exchangeAllocated when the business party accesses the SDK, one for each end

  Example:

window.CORA_SDK.initialize({
    AppId: "appId", // 目前传测试值,后续在coraool申请
    AppKey: "appKey",
    AppSec: "appSec",
})

4.2 setUserId

    Set userId, afId, parameter description:

Field nametypeIs it necessaryexplain
userIdstringyesThe userId of the user. If not logged in, pass an empty string.
afIdstringyesThe user’s afId. If the afId cannot be obtained, an empty string is passed.

Example:

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

4.3 Invoke

call api

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

  Input instructions:

Field nametypeIs it necessaryexplain
apiNamestringyesExample of api name: Get Ranking list data: apiName: “open.coraool.bingoplus.home.game.ranking”
apiVersionstringnoIf not uploaded, the default version is 1.0.0

 Parameter description:

{
    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 // 实验参数,用于埋点上报
    }
}

  Parameter description:

Field nametypeexplain
ObjectResults returned by ranking list
versionstringversion number
rankingArraySort data
gameIdstringGameId
platformIdstringGame arcadeId
gameTopstring | nullGame ranking
gameTypenumbergame type
likeCntnumber|nullNumber of collections
tagsstring[] | nullRecommend Signature,
trackBuried data
expLayerstringExperimental parameters, used to bury and report
the user’s new and old user ID NEWUSER (new user) / OLDUSER (old user) / BASE (if neither userId nor device ID is passed, BASE will be returned)
expBucketstringExperimental parameters, used for buried point reporting
fstringExperimental parameters, used for buried point reporting
expExtrastring | nullExtended parameters for hidden point reporting

4.4 Track

Custom buried points

The application scenarios of custom buried points are very wide, and they need to be used flexibly to avoid overreporting and false positives of data.

window.CORA_SDK.track("eventName", {
    pageName: "homePage", // 页面名称
    eventType: "PAGE", // CLICK 点击 EXPOSE曝光 PAGE页面 CUSTOM自定义(不填为自定义)
    customClickKey1: "customClickValue1",
    customClickKey2: "customClickValue2",
    customClickKey3: "customClickValue3",
});
Field nametypeIs it necessaryexplain
eventNamestringyesEvent name (fill in the specification)
eventValueParamsObjectnoevent object
Field nametypeIs it necessaryexplain
pageNamestringyesPage name
eventTypestringnoCLICK click, EXPOSE exposure, PAGE page, CUSTOM custom event unfilled/empty custom event
customxxxstringnoCustom key value

4.5 tracker

  1. Added window.cora_SDk.trackers.page event
  2. Added Window.cora_SDk.trackers.click Click event
  3. Added Window.cora_SDk.trackers.expose event
  4. Added Window.cora_SDk.trackers.custom Custom events

After version 3.0, it will replace 4.4 Track

// Take page page event as an example, call example
window.CORA_SDK.tracker.page("eventName", {
    customKey1: "customValue1",
    customKey2: "customValue2",
});

4.6 trackPageStart

Enter the page to bury points. If the point burying method is manual mode, you can start burying points yourself.

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

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

Parameter Description:

Field nametypeIs it necessaryexplain
eventNamestringyesevent name
eventValueObjectnoevent object

4.7 trackPageEnd

Leave the page buried point, leave the page buried point (used in conjunction with trackPageStart, the parameters are the same)

// 方法:
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

Support custom device ID

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

4.9 setPageCollectionMode

Set the burying mode and support two burying modes: manual and automatic.



// 使用实例
window.CORA_SDK.setPageCollectionMode("AUTO");

Parameter Description:

Field nametypeIs it necessaryexplainillustrate
mode“AUTO” | “MANUAL”yesHow to collect page events“Manual” Manual
“AUTO” Automatic (default mode)

Automatic mode: turned on by default , automatically reports hidden points on the page.

Manual mode: manually turn on, turn off automatic page reporting.

4.10 updatePageProperties

Update buried point parameters

After adding buried parameters, all pages will take effect.

To clear the newly added properties, just call the method again and pass in the empty object {}

// 在window.CORA_SDK.initialize之后执行
window.CORA_SDK.updatePageProperties({
   "key1": value1,
   "key2": value2,
   "key3": value3,
   ...
});
Field nametypeIs it necessaryexplain
pageParamsObjectnoAdd buried parameters to the current page

4.11 updatePageName

Update page name

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

// good case
export default {
    // 以vue2.6为例,在生命周期beforeCreate执行最佳
    beforeCreate() {
        window.CORA_SDK.updatePageName('PAGEHOME') // 'PAGEHOME'此处是页面名
    }
}
Field nametypeIs it necessaryexplain
pageNamestringyesChange current page name

4.12 setPlatform

Set up the device system, instructions for use:

Field nametypeIs it necessaryexplain
platformstringyesDevice system: iOS, Android, Windows, PC, H5, MiniApp
// 举例:小程序端打开外部链接,跳转落地页后调用此方法
// 在window.CORA_SDK.initialize之后执行
window.CORA_SDK.setPlatform("MiniApp")

4.13 getGtpInfo

Get the value of gtp

// @params pageName {string} 页面名
// @params cd {string} 4.14GTX章节中c和d的位置,
window.CORA_SDK.getGtpInfo(pageName, cd)

// 放方法示例:
cont gtp = window.CORA_SDK.getGtpInfo('PAGE_HOME', 'Feeds.0')
console.log(gtp) // 输出结果 '123.PAGE_HOME.Feeds.0'

4.14 GTX

  1. Introduction to GTX automatic point burying
    • GTX buried points are used to track and analyze page traffic, and can solve the following key business problems:
      • Statistics of basic indicators such as PV and UV of the specified page;
      • Track the source and destination of page traffic and analyze the traffic funnel of user paths;
      • Based on traffic and conversion evaluation, inform the business side of the traffic efficiency of each page and the pit within the page;
    • Glossary:
      • Global Tracking Position (GTP): Global position tracking model, used to track locations and the flow of traffic between different locations;
      • Global Tracking Content (GTC): Global content tracking model, used to track delivery content and guide conversion efficiency;
      • Global Tracking X (GTX): refers to the solution composed of GTP and GTC;
  2. GTP buried point
    • GTP parameter definition: a.b.c.d = ${appId}.${pageId}.${module}.${point}, GTP needs to be constructed and used strictly in accordance with the following specifications. The UI layer constructs the four-layer structure through structured data (this method is recommended), or it can be constructed manually.
    • [Important] To jump to the a tag page <a href="/xx?gtp=a.b.c.d"></a>, you need to add &gtp=a.b.c.d when using code to jump to the url.
GTPmeaningillustrate
a position${appId}Globally unique, allocated independently on different ends, such as: c120420
b position${page}The b bit is automatically generated based on the URL of the page.
c position${module}The floor or module number of the page
d position${component}Subdivided submodule number

Code example:


<! -- 
    data-gtp-b=" Page number" 
    data-gtp-c=" Floor/Module Number" 
    data-gtp-d=" Submodule number of the subdivision within the floor/module" 
-->
<body>
    <div data-gtp-b="PAGE_HOME">
        <!-- 楼层 or 模块 -->
        <div data-gtp-c="floor1xx">
            <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="floor2xx">
            <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>

Other uses of GTX buried points

DOM propertiesillustrate
data-gtp-extThe extended field attribute of the service d bit, the attribute value is converted through JSON.stringify
<div data-gtp-d=”LOGIN” data-gtp-ext='{“itemId”:123}’>d bit</div>
data-gtp-skipNo click exposure; no page exposure, no clicks & no sub-DOM exposure

code example


<!-- GTP 埋点其他用法 -->
<div data-gtp-b="PAGE_HOME">
    <div data-gtp-c="c位">
        <div data-gtp-d="game1">正常曝光,点击埋点</div>
        <div data-gtp-d="c120420.homepage.module" data-gtp-skip="true">
            这一块的均不曝光
            <div data-gtp-d="only-click" data-gtp-only-click="true"> 1</div>
            <div data-gtp-d="only-expose" data-gtp-only-expose="true"> 2</div>
            <div data-gtp-d="game4-track-multiclick" data-gtp-multiclick="true"> 3</div>
            <div data-gtp-d="track-skip" data-gtp-skip="true">4</div>
        </div>

    </div>
</div>

3. GTC burying point

  • GTC parameter definition: a.b.c.d = ${sysId}.${algoId}.${algoVer}.${audienceId}, GTC also contains a 4-layer structure, definitions at different levels
GTCmeaningillustrate
a position${sysId}Delivery system ID, used to identify different content delivery parties
b position${algoId}Delivery algorithm ID, used to identify the delivery algorithm used by the delivery system to generate different content
c position${algoVer}Delivery algorithm version ID, used to identify different versions of the delivery algorithm
d position${audienceId}The placement group ID is used to identify different placement groups.

code example

Enter the url, for example, https://www.coraool.com?gtc=a.b.c.d SDK automatically retrieves

4.16 getDeviceId

Get device ID

window.CORA_SDK.getDeviceId()
// console 'xfdaslfjllf1212312xx'

5.Information collection form

Field nametypeIs it necessarydefault valueexplain
//Event
eventTypestringyes“CUSTOM”CLICK click event EXPOSE exposure event PAGE page event CUSTOM custom event
eventNamestringyes“”event name
eventTimestringyes“”Client reporting time
eventValue {object} Basic information of buried points: event value
Call external incoming
eventProps {object} basic information: SDK built-in event value
customDeviceIdstringno“”Custom device Id calls 4.7 function window.CORA_SDK.setCustomDeviceId(“xxid”)
pageNamestringno“”The page name calls the 4.10 function window.CORA_SDK.updatePageName(pageName:string). The function is not called: the page name is automatically generated.
isbfstringyes“0”Browser or tab switching hides “0” and the default value “1” indicates switching.
ikBstringyes“0”The page exposure caused by clicking the browser’s back button is “0” and the default value “1” means going back.
startTimestringnoPage visit start time
endTimestringnoPage visit end time
pageDurationstringnoTime on page
referPagestringno“xx”Previous page URL
gtpstringyes“”gtp data
gtpPre1stringyes“”Previous page gtp data
gtpPre2stringyes“”Previous page gtp data
gtcPre1stringyes“”Previous page gtc data
gtcPre2stringyes“”Previous page gtc data
sdkInitDatestringyes“”SDK buried information: first call time
enabledTrackingbooleanyesfalseAdvertisement push
enabledNotificationbooleanyesfalseAdvertisement push permission
platformstringyes“”Platform: Windows | Mac | Linux | Android | iOS
containerstringyes“”Container: NONE | BROWSER | APP | MINIAPP
langstringyes“”Device information: language
uidstringyes“”User information: user id
deviceIdstringyes“”device id
browserstringyes“”Browser
browserVersionstringyes“”Browser model
systemNamestringyes“”operating system
systemVersionstringyes“”Operating system version
sdkVersionstringyes“”SDK version
userAgentstringyes“”ua information
deviceScreenXpxnumberyesDevice hardware information: Device screen resolution Xpx
deviceScreenYpxnumberyesDevice hardware information: Device screen resolution Ypx
deviceScreenOrientstringyesDevice hardware information: device screen orientation
deviceScreenIsTouchbooleanyesfalseDevice hardware information: whether the device screen can be touched
deviceBatteryLevelnumberyesEquipment hardware information: battery level
deviceNetworkDevice network information
Share to
1
0 Likes
Prev page
Next page

Recomm

Comments (0)

Contact