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

前言

在上一期推文中【Demo发布- ClkLog客户端集成-React Native】，我们与大家分享了 React Native 的集成 demo。本期，我们将继续介绍 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