taro

taro

1.注册友盟+账号

参考官网原生小程序文档

2.友盟官网申请小程序appkey

参考官网原生小程序文档

3.域名白名单配置

官网微信小程序文档
官网原生支付宝小程序接入

4.创建taro框架下的app demo

taro init myApp

5.安装sdk

cd path-to-taroproject
npm install umtrack-alipay --save
npm install umtrack-wx --save

6.跨平台集成示例

1.单文件内集成

参考taro的跨平台方案
_ src/app.jsx _

let uma = {};
if (process.env.TARO_ENV === 'weapp') {
  uma = require('umtrack-wx');
  uma.init({
    appKey: 'YOUR_APP_KEY',
    useOpenid: false,
    autoGetOpenid: false,
    debug: true
  });
} else if (process.env.TARO_ENV === 'alipay') {
  uma = require('umtrack-alipay');
  uma.init({
    appKey: 'YOUR_APP_KEY',
    debug: true
  });
}
//把uma 添加到Taro，后续通过Taro.uma调用uma方法 ,es6模块导入的是模块引用，
//因此放心注入，后面页面导入Taro模块是可以获取uma的
import Taro, { Component } from '@tarojs/taro'
Taro.uma = uma ;

2.跨平台文件集成

参考taro的跨平台方案
_ src/uma/index.weapp.js_

import uma from 'umtrack-wx';

uma.init({
    appKey: 'YOUR_APP_KEY',
    useOpenid: false,
    autoGetOpenid: false,
    debug: true
});
export default uma;

_ src/uma/index.alipay.js _

import uma from 'umtrack-alipay';

uma.init({
    appKey: 'YOUR_APP_KEY',
    debug: true
});
export default uma;

两种方法调用uma模块:
1.在其他页面中直接 import uma from 'path/to/uma'
2.或者同单文件集成，在app.jsx中注入uma到Taro
app.jsx

import uma from './uma'
import Taro, { Component } from '@tarojs/taro'
Taro.uma = uma ;

7.自定义事件

componentDidShow () {
    Taro.uma.trackEvent('bu7y', {
      name: 'car'
    });
},

8.注意事项

无论哪种集成方式，在app.jsx文件中 uma模块的导入一定要在Taro的导入之前，如eslint出现提示，建议关掉app.jsx文件的相关eslint检查，一般是关于import前置 或 绝对路径模块要先于相对模块的eslint提示。