Demo 发布 - ClkLog 客户端集成 uni-app

前言

本期，我们将介绍 ClkLog 集成 uni-app 的 demo。 uni-app 允许开发者编写一套代码，然后可以编译到 iOS、Android、H5 以及各种小程序等多个平台。因此，本次 demo 中将涵盖上述所有平台，并且我们会详细说明集成过程中遇到的难点及解决方案。

uni-app-demo 说明

本 demo 支持 IOS、Android、h5、微信小程序，并实现了相关功能点的示例。

● 示例包含的内容：

1、uni-app 在 h5、微信小程序、Android/iOS 端的 sdk 集成和初始化

2、会话的实现与接入示例

3、浏览页面事件的手动接入示例

4、页面标题的手动接入示例

● 其他更多内容的接入请参考神策 uni-app sdk 官方文档。

在集成神策 uni-app 相关 sdk 之前，请根据以下情况进行 sdk 的选择

1、如果打包包含 h5 ，由于 uni-app-js 会话未实现需要自己实现，建议采用神策 web js sdk 的方式引入 sa-sdk-javascript 插件。

2、如果打包包含 微信小程序 ，需要引入 uni-app-js 插件。

3、如果打包包含 Android/iOS ，需要引入 uni-app-native(Android & iOS) 插件, 插件集成过程中建议使用离线打包模式（云打包在测试中无法正常采集数据）。

在使用 ClkLog 作为 uni-app 的数据采集服务端时，需要要注意以下内容

1、ClkLog 的统计数据基于神策 sdk 的浏览页面事件和会话 ID（$event_session_id）, 由于神策 uni-app sdk 的会话未实现，所以需要自己实现会话 ID 并配置为全局属性，同时关闭全埋点的浏览页面事件并手动跟踪浏览页面事件。

2、  神策 web、小程序、iOS、Android 端的 sdk 浏览页面事件名称不同，请根据 uni-app 打包的版本去跟踪浏览页面事件，各端的浏览页面事件如下：

Web：$pageview

Android&iOS：$AppViewScreen

微信小程序：$MPViewScreen。

3、  由于 uni-app 属于单页面应用，开启自动采集浏览页面事件会出现页面标题和页面 URL 不匹配的问题，在各端的浏览页面事件注册时请根据实际情况手动采集页面标题。

4、  demo 中分别使用 App.h5.vue、App.minprogram.vue、App.androd-ios.vue 三个文件对 web 端、小程序端和移动端做了 sdk 的引用、初始化和自定义集成示例，请根据实际情况选择对应集成参考示例在 App.vue 入口页进行 sdk 的初始化。

demo 源码地址

我们分别在 gitee 和 github 中上传了 demo，欢迎大家前来围观。

https:// gitee.com/clklog/clklog-uniapp-demo

https:// github.com/clklog/clklog-uniapp-demo