控制台文档
帮助文档
快速开始
注册新用户
创建应用
cpcn-client桌面工具
发布新版本
热更新之React Native App
手动安装cpcn-react-native(Android)
手动安装cpcn-react-native(iOS)
示例:React Native App集成CodePush热更新,从零开始
CodePush热更新费用规则参考
用户行为分析,让你更懂你的用户-Footprint
用户行为分析之React Native App
Footprint常见问题解答
关于我们

用户行为分析之React Native App

使用Footprint,能让你轻松在你的React Native App中实现“用户行为分析”功能。Footprint已被集成在了cpcn-react-native中。
cpcn-react-native的版本号必须>=0.1.21
Footprint可单独使用,也就是说,如果你的App没有使用CodePush(中国)热更新功能,也是可以使用Footprint的。
如果你不清楚“用户行为分析”能为你做什么,那么可参考此链接中的“应用场景举例”
注意:如果你的App对网络访问有限制,则需要允许对 http://code-push.cnhttps://code-push.cn 的访问
React Native App中使用Footprint非常简单,具体步骤如下:

Step 1:创建React Native项目

如果你已经有了一个现成的项目,则可跳过此步骤。
在这个示例中,将项目建立在E盘的test目录下,并且项目的名字为myapp
打开命令行窗口,进入E:\test\目录,执行以下命令创建项目:

react-native init myapp

Step 2:在CodePush(中国)创建对应的应用

如果你正在使用CodePush(中国)提供的热更新服务,则已经完成了此步骤,则跳过此处。
进入CodePush(中国)的控制台,并登入。如果还没有帐户,则注册一个新帐户
点击页面上的创建应用,在弹出的面板中填写相应的信息,以创建应用。应用的名称可任意填写,只要不与其它应用重复就行了。
因为这个示例即有Android版,也有iOS版,所以需要在CodePush(中国)的控制台中为Android版和iOS版各创建一个应用。
React Native App用户行为分析(Footprint)-创建项目
React Native App用户行为分析(Footprint)-创建项目
如果你的应用只打算开发Android版或iOS版中的一个,则只需创建一个即可。

Step 3:安装及配置CodePush(中国)前端插件(cpcn-react-native)

如果你正在使用CodePush(中国)提供的热更新服务,则已经完成了此步骤,则跳过此处。
cpcn-react-native的版本号必须>=0.1.21。如果你安装的版本号不符合此要求,则需重新安装它。
使用cpcn-client桌面工具来完成此步骤的工作。
如果你的电脑上还没有安装cpcn-client,则点击这里下载并安装它
打开电脑上安装的cpcn-client,登入后,将能看到刚刚在控制台中创建的两个应用:myapp-androidmyapp-ios
点击myapp-android应用的名字,将会打开一个面板。在打开的面板中,设置项目文件夹,即E:\test\myapp。点击install cpcn-react-native & link,等待执行完毕。
React Native App用户行为分析(Footprint)-集成安装
由于iOS版需在Mac电脑上运行和测试,因此需在Mac电脑上为myapp-ios重复以上的操作。
等待执行完毕后,cpcn-react-native就安装并配置成功了。

Step 4:启用Footprint

用你喜欢的任意代码编辑器(例如:VS Code)打开项目源码(E:\test\myapp)。
在项目的第一个页面文件(默认为/App.js)中,在引入任何组件之前引入cpcn-react-native,并在当前页面的class定义之前使用cpcn-react-native提供的useFootprint()方法启用Footprint

import React from 'react';
// 在引入任何组件之前引入 cpcn-react-native
import cpcn from 'cpcn-react-native';
import { SafeAreaView, View, Text } from 'react-native';

// 在当前页面的 class 定义之前使用 cpcn-react-native 提供的 useFootprint() 方法启用 Footprint
cpcn.useFootprint();

class App extends React.Component {
    render() {
        return (
            <SafeAreaView>
                <View>
                    <Text>Ver: 1</Text>
                </View>
            </SafeAreaView>
        );
    }
};

export default App;
以上步骤在整个项目中仅需做此一次,在项目的其它页面不必再做类似的操作。
如果你不确定应该在何处引入cpcn-react-native,你也可以直接在文件的最顶部引入它:

// 在文件的最顶部位置引入 cpcn-react-native
import cpcn from 'cpcn-react-native';
import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';
另外,你还可以使用React.useFootprint()替换cpcn.useFootprint(),它们是等效的。
至此,我们仅使用了两行代码,但你的App已经拥有了“日活跃用户”、“月活跃用户”、“周活跃用户对比”、“时段活跃用户对比”....等等与“用户活跃度”相关的统计功能!

Step 5:使用“埋点”记录用户的行为

“埋点”的使用非常灵活,你需要根据你自己的需求进行“埋点”。这里仅介绍“埋点”的方法。
需要注意的是,一个应用的“埋点key”数量是有限制的,目前每个应用最多可有30个“埋点key”,超出限制的会被忽略。
当你需要知道某个页面被访问的次数时,则需给该页面做“埋点”。下面的示例是给/App.js做“埋点”:

import React from 'react';
// 在引入任何组件之前引入 cpcn-react-native
import cpcn from 'cpcn-react-native';
import { SafeAreaView, View, Text } from 'react-native';

// 在当前页面的 class 定义之前使用 cpcn-react-native 提供的 useFootprint() 方法启用 Footprint
cpcn.useFootprint();

class App extends React.Component {
    constructor(props) {
        super(props);
        
        // 给当前页面做“埋点”。
        // 参数 '首页' 为给该“埋点”设置的 key ,即“埋点key”。
        // “埋点key”不可大于10个字符。
        this.footprint('首页');
    }
    
    render() {
        return (
            <SafeAreaView>
                <View>
                    <Text>Ver: 1</Text>
                </View>
            </SafeAreaView>
        );
    }
};

export default App;
在需要“埋点”的页面文件的constructor中,使用React.Componentfootprint(key)方法做“埋点”。参数key为“埋点key”,也就是给该“埋点”起的名字,不可大于10个字符
此处仅仅是给该页面做了“埋点”,并不会马上计数。只有当该页面被打开时才会计数。同理,如果用户从该页面跳转到了另一个页面,再返回该页面,也不会被计数,因为它没有被重新加载。
可以给多个“埋点”使用同一个“埋点key”,它们会被计入同一个统计数据。例如,在一个资讯类App中,可为“财经”类目下的所有页面均使用财经这样一个“埋点key”,以统计“财经”类目下所有页面被访问的次数。
如果你需要知道用户的某项操作行为,例如你需要知道用户是否点击了某个按钮,则可在相应的元素上做“埋点”。下面的示例演示了在“支付页面”的“支付”按钮上做“埋点”,以记录用户是否点击了该按钮:

import React from 'react';
import { SafeAreaView, View, Button } from 'react-native';

class Pay extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <SafeAreaView>
                <View>
                    {/* 使用 footprint 属性给元素埋点 */}
                    <Button footprint="点击了支付" title="支付"></Button>
                </View>
            </SafeAreaView>
        );
    }
};

export default Pay;
为元素加入footprint属性,即可对该元素做“埋点”,从而记录用户在该元素上的操作行为。footprint的值即为该“埋点”的key
上面的示例中,当用户点击“支付”按钮时,将会被计入统计数据。
注意:并不是所有的元素都支持“埋点”,目前,支持“埋点”的元素有以下这些:
Button
TouchableOpacity
Text
你还可以在你的代码的任意位置使用代码进行“埋点”。下面的示例演示了在“支付完成”后使用代码进行“埋点”:

import React from 'react';
import { SafeAreaView, View, Button } from 'react-native';

class Pay extends React.Component {
    constructor(props) {
        super(props);
    }
    
    onPayPress() {
        // 假设你有一个 pay() 方法来完成支付功能
        pay(() => {
            // 这是支付成功后的回调方法
            
            // 使用 React.footprint() 做埋点,参数 '支付成功' 是该埋点的 key
            React.footprint('支付成功');
        });
    }
    
    render() {
        return (
            <SafeAreaView>
                <View>
                    <Button title="支付" onPress={this.onPayPress}></Button>
                </View>
            </SafeAreaView>
        );
    }
};

export default Pay;
使用React.footprint(key)方法可在你的代码中的任意位置做“埋点”,参数key是为该“埋点”设置的key
下面是一个综合使用的稍完整一些的应用场景的示例:

import React from 'react';
import { SafeAreaView, View, Button } from 'react-native';

class Pay extends React.Component {
    constructor(props) {
        super(props);
        
        // 给当前页面做“埋点”
        this.footprint('支付页');
    }
    
    onPayPress() {
        // 假设你有一个 pay() 方法来完成支付功能
        pay(() => {
            // 这是支付成功后的回调方法
            
            // 使用 React.footprint() 做埋点,参数 '支付成功' 是该埋点的 key
            React.footprint('支付成功');
        });
    }
    
    render() {
        return (
            <SafeAreaView>
                <View>
                    {/* 使用 footprint 属性给元素埋点 */}
                    <Button footprint="点击了支付" title="支付" onPress={this.onPayPress}></Button>
                </View>
            </SafeAreaView>
        );
    }
};

export default Pay;
对于以上的示例,你将可能在CodePush(中国)的控制台中看到类似如下的统计报表:
React Native App用户行为分析(Footprint)-综合使用示例
接下来你就可以通过以上的统计报表进行分析了。(在这个示例中,支付成功率明显偏低,很可能“支付”相关的代码存在Bug)