> For the complete documentation index, see [llms.txt](https://beacon-help.gitbook.io/beacon-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://beacon-help.gitbook.io/beacon-help/sdk-wen-dang/sdkji-cheng-zhi-nan/html5ji-cheng-zhi-nan.md).

# HTML5集成指南

**一、获取SDK**

登录灯塔首页，创建应用，填入基本应用信息，选择HTML5类型，即可获取独一无二的AppKey，并获取JS-SDK；

[点此查看JS-SDK for HTML5](/beacon-help/sdkhuo-qu/sdk-for-html5.md)

**二、接入 SDK**

在您的站点网页中嵌入以下代码即可完成上报 SDK 的接入：

如果您的站点为 Http 协议，则引入的 js 为：

```javascript
<script type="text/javascript" 
 src="http://3gimg.qq.com/mig_op/beacon/js/beacon_release.js?appkey={your_app_key}&vc=1.0.1">
</script>
```

如果您的站点为 Https 协议，则引入的 js 为：

```javascript
<script type="text/javascript" 
  src="https://3gimg.qq.com/mig_op/beacon/js/beacon_release_s.js?appkey={your_app_key}&vc=1.0.1">
</script>
```

**【重要】：需要替换上面appkey的设置值**`{your_app_key}`**替换为自己申请的AppKey，如申请的AppKey为**`JS0AHX9X1VBJV8`**，则配置上面的参数为**`appkey=JS0AHX9X1VBJV8&vc=1.0.1` appkey和vc版本两个配置必不可少，否则事件无法上报。

说明：appkey 表示产品唯一标识，由灯塔注册时自动分配，每个应用唯一，不可更改；

vc 表示产品版本号，可以由开发者自行更改指定，用于区分版本的统计。

## 渠道号设置

在链接尾部添加`channelid=xxx`即可设置渠道，如链接`http://beacon.qq.com?channelid=10010`表示渠道号为`10010`。

**三、使用自定义事件上报功能**

使用自定义事件上报功能 使用自定义事件上报功能 使用自定义事件上报功能可以通过该事件接口，来记录和上报用户关键事件，从而对事件发生次数，成功失败率等进行统计分析。

自定义事件接口：

```javascript
/**
* 上报自定义事件
* @param eventName 事件名
* @param params 扩展字段参数，格式如下{"k1":"v1","k2":"v2"}
*/
BeaconAction.onEvent(eventID, eventName, params);
```

使用说明：在需要进行用户操作事件记录的地方调用

| 参数        | 含义                                                          |
| --------- | ----------------------------------------------------------- |
| eventID   | 用于相同ID事件的合并，做次数累加。可以与事件名一致                                  |
| eventName | 表示本次事件的唯一标识，用来区分不同的事件，不可重复                                  |
| params    | 需要额外上报的扩展字段，key和value成对填写。格式如下{"k1":"v1","k2":"v2"}，Key不可重复 |

调用示例：

`BeaconAction.onEvent("999","eventName",{"k1":"v1","k2":"v2"});`

**四、广告监测配置**

广告监测中，对于落地页自动跳转的行为需要添加如下上报事件

```javascript
BeaconAction.onEvent("101", "lp_jump", "");
```

如果是点击下载的行为则需要添加如下上报事件（页面中所有下载按钮点击都要添加）

```javascript
var dl_url = {"url":"http://xx.com/yy"}; // 下载跳转目标url
BeaconAction.onEvent("102","dl_click", dl_url);
```

**五、使用实时联调测试功能**

使用实时联调测试功能

为了方便开发者进行实时的联调测试，check 上报日志是否正常，我们提供了联调测试环境，只需将引入的 js 资源链接中的：

`beacon_release.js` 修改成 `beacon_release_jrlt.js(HTTP)` 或

`beacon_release_s.js`修改成 `beacon_release_jrlts.js(HTTPS)`

即可在灯塔系统中进行当前测试上报的日志查看：

说明：发布至正式线上的页面，务必修改成正式的 js 链接，否则会影响相应的统计数据查看。

还有疑问？欢迎反馈给<tbeacon@tencent.com>，会有专人为您服务。