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-1.0.4-beta.js"></script>
VersionDateRelease NotesSDK
20240318Stable version
1. Improves the real-time performance of invoke data
2. Deeply optimizes and enhances the stability and compatibility of data reporting
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-1.1.0.js
20240424New stable version
1. Added user path tracking
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.1.0.js
20240524New stable version
1. Update GTP statistics method to support multiple PAGE events in one URL
https://digiplus.coraoolstatic.com/com.coraool.digiplus/coraool-web-sdk-2.1.2.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: "bingoplus.home.game.ranking", // 获取Ranking列表的时候 固定传该值
    apiVersion:"1.0.0",    // 目前只支持 1.0.0
});

2. Track buried points

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

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: "binggo.homePage.ranking",
    apiVersion: "1.0.0",
    params: {} // 无 params 可不写此行
})

  Input instructions:

Field nametypeIs it necessaryexplain
apiNamestringyesExample of api name: Get Ranking list data: apiName: “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 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, eventValue: Object)

// 使用实例
window.CORA_SDK.trackPageStart("eventName", {
   key: "value",
})

Parameter Description:

Field nametypeIs it necessaryexplain
eventNamestringyesevent name
eventValueObjectnoevent object

4.6 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, eventValue: Object)

// 使用实例
window.CORA_SDK.trackPageEnd("eventName", {
   key: "value",
})

4.7 setCustomDeviceId

Support custom device ID

window.CORA_SDK.setCustomDeviceId("xxid");

4.8 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.9 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.updatePageProperties({
   "key1": value1,
   "key2": value2,
   "key3": value3,
   ...
});
Field nametypeIs it necessaryexplain
pageParamsObjectnoAdd buried parameters to the current page

4.10 updatePageName

Update page name

// window.CORA_SDK.updatePageName(pageName:string)
window.CORA_SDK.updatePageName("homePage");
Field nametypeIs it necessaryexplain
pageNamestringyesChange current page name

4.11 setPlatform

Set up the device system, instructions for use:

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

4.12 setAutoPageTrack

The page is automatically reported. Instructions for use:

// 和4.8 window.CORA_SDK.setPageCollectionMode("MANUAL")配合使用
window.CORA_SDK.setAutoPageTrack()

// 此方法可以写到全局的路由守卫中,如果没有其他PAGE_xx事件,则使用用此方法发送自动上报

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="/页面名?coraGtp=a.b.c.d"></a>, you need to add &coraGtp=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:

<!-- 页面曝光 -->
<body>
    <div class="xx">
        <!-- 楼层 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-only-clickclick only
data-gtp-only-exposeExposure only
data-gtp-multiclickSupport multiple clicks to bury points
data-gtp-skipNo click exposure; no page exposure, no clicks & no sub-DOM exposure

code example


<div>
    <div data-gtp-c="c位">
        <div data-gtp-d="game1">正常曝光,点击埋点</div>
        <div data-gtp-d="game1" data-gtp-only-click="true"> 只点击</div>
        <div data-gtp-d="only-expose" data-gtp-only-expose="true"> 只曝光</div>
        <div data-gtp-d="game4-track-multiclick" data-gtp-multiclick="true"> 支持多次点击</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

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

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
Not allow to forward/copy without permission:CORAOOL » Coraool WebSDK Development Guide
Share to
0 Likes

Recomm

Comments (0)

Contact us