react native 友盟统计 Android 端集成

简介: ios 端 可参考:https://www.jianshu.com/p/879d28ee74e6趁热打铁吧,把刚才已经完成的友盟统计集成记录下 Android端集成:分下面几部:步骤sdk的集成原生模块的配置原生交互模块RN端调用sdk集成部分友盟sdk下载地址:https://developer.

ios 端 可参考:https://www.jianshu.com/p/879d28ee74e6
趁热打铁吧,把刚才已经完成的友盟统计集成记录下 Android端集成:
分下面几部:

步骤

  • sdk的集成
  • 原生模块的配置
  • 原生交互模块
  • RN端调用

sdk集成部分

友盟sdk下载地址:
https://developer.umeng.com/sdk?spm=a211g2.211692.0.0.4cc21183f5dYjU
sdk集成相关文档:
https://developer.umeng.com/docs/66632/detail/68337

这里如果嫌官方文档太乱的话可以参考下 我这里的手动集成:
1.首先把 下载的sdk
umeng-analytics-7.5.3.jar
umeng-common-1.5.3.jar
放到工程目录下的libs文件夹下,thirdparties文件下的可能和混淆加密有关,这里按需使用吧,我这里没有。


img_aca73ac5cb6e6e7918a78bb304986f65.png
image.png

img_5d2123a39b6fe904a24a77954197ab13.png
image.png

把架包添加到工程中


img_56d2841a8018a6166c8088019d2ef3c9.png
image.png
dependencies {
    compile files('libs/umeng-analytics-7.5.3.jar')
    compile files('libs/umeng-common-1.5.3.jar')
}

到这里Android端sdk已经集成了。

android端配置

<manifest -- 中
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.INTERNET"/>

 <application --- 中 
  <!--友盟 统计-->
        <meta-data
            android:name="UMENG_APPKEY"
            android:value="5b863efe8f4a9d1b8b00010b" >
        </meta-data>
        <meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>

交互模块

接下来把官网下载下来的 交互模块放到工程中 https://developer.umeng.com/sdk/reactnative
注意这里下载下来的并不是sdk 而是 一些交互类
DplusReactPackage.java
RNUMConfigure.java
AnalyticsModule.java
这三个java交互文件缺一不可哦。

img_15161daf18ae37ab40a4c61713e4783e.png

之后,就是把相关 java代码,改下包路径 按照错误提示更改就行了

比如: package com.rent.UMTJ;
缺少类的 导入相关类即可。
交互类 写完之后,在MainApplication中实例化一下

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
       
            new DplusReactPackage(),
       
      );
    }


 @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    UMConfigure.setLogEnabled(true);
    //初始化组件化基础库, 统计SDK/推送SDK/分享SDK都必须调用此初始化接口
    RNUMConfigure.init(this, "[这里输入自己创建应用时候的appkey]", "UMENG_CHANNEL", UMConfigure.DEVICE_TYPE_PHONE,
            "");
  }

在MainActivity中也要初始化操作

 @Override
    protected void onCreate(Bundle savedInstanceState) {
     
        MobclickAgent.setSessionContinueMillis(1000);   //设置统计的场景,以及发送间隔:
        MobclickAgent.setScenarioType(this, MobclickAgent.EScenarioType.E_DUM_NORMAL);
        super.onCreate(savedInstanceState);


    }
  @Override
    public void onResume() {   //友盟统计初始化
        super.onResume();
        MobclickAgent.onResume(this);
    }
    @Override
    protected void onPause() { //友盟统计初始化
        super.onPause();
        MobclickAgent.onPause(this);
    }

ok基本上按照步骤走的话,都很顺利,到这里就可以RN端调用了。

RN端调用

这里封装了一下 Umtj.js 可作为参考

import { NativeModules } from 'react-native';
const UMTJ = NativeModules.UMAnalyticsModule;
export const onPageStart = pageName => {
  //用于统计单个自定义页面的起始和onPageEnd同时使用,不可单独使用
  return UMTJ.onPageStart(pageName);
};
export const onPageEnd = pageName => {
  //用于统计单个Activity页面结束时间
  return UMTJ.onPageEnd(pageName);
};
export const onEvent = eventId => {
  //用于统计自定义事件的发生次数

  return UMTJ.onEvent(eventId);
};
export const onEventWithLable = (eventId, label) => {
  //用于统计自定义事件的发生次数 可传参数进去

  return UMTJ.onEventWithLable(eventId, label);
};

调用原生模块

import {
  onEvent,
  onEventWithLable,
  onPageStart,
  onPageEnd,
} from '../utils/natives/Umtj';

//比如这里是个点击事件

click=()=>{
 onEvent('regist');
 onEventWithLable('regist', '注册登录成功');
}

这里的“regist”是我们在 友盟后台自定义的 埋点值,可以进行手动埋点 用来统计用户一些行为操作,方便产品运营吧。


img_d58571fd17a6339c28d4ac28f541a789.png
image.png

ios 端 可参考:https://www.jianshu.com/p/879d28ee74e6

目录
相关文章
|
7月前
|
JSON 前端开发 算法
掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
457 23
|
10月前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
292 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
数据采集 前端开发 开发工具
Demo发布- ClkLog客户端集成-React Native
ClkLog是一款支持开源和商业付费的用户行为分析软件系统,通过采集客户端行为日志数据,在开源的OLAP数据库上进行模型分析。常见的客户端有Web JS、IOS、Andriod 、小程序等,以及react-native 、uni-app等。Clklog方案选用了\神策提供的开源SDK来进行数据采集。
235 48
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
363 11
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
949 8
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
446 3
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
361 27
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
3091 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
前端开发 JavaScript 测试技术