前言
在上一期推文中【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