[TalkingData] 如何在小程序中使用 TalkingData SDK?

http://doc.talkingdata.com/posts/484

1. 配置 request 合法域名

2. SDK 初始化

  1. 下载 SDK,解压,将其中的 tdweapp.js 文件导入项目
  2. 在项目的入口文件 app.js 中导入 SDK:
var TD = require('./utils/tdweapp');

在 app.js 的生命周期调用 SDK:

App({
  onLaunch: function() {
    TD.launch({
      appKey: 'your-talkingdata-app-id',
      appName: 'your-app-name',
      versionName: 'versionName', // 小程序的可见版本号
      versionCode: 'versionCode', // 小程序的内部版本号,便于版本管理
      autoOnAppShow: true,
      autoOnAppHide: true,
      autoOnPageUnload: true,
      autoOnPullDownRefresh: true,
      autoOnReachBottom: true,
      autoOnShare: true
    });
  },

  onShow: function() {
    // TD.show(); // if autoOnAppShow == false
  },

  onHide: function() {
    // TD.hide(); // if autoOnAppHide == false
  }
})

采用自动采集处理方式时,TalkingData SDK 默认修改了微信小程序的生命周期,仅用于自动监听必要事件,不做其他处理。

3. 高级统计 - 页面统计

此功能可帮助开发者统计应用中各个页面的访问次数和停留时长,为产品优化提供依据。我们默认取当前页面path为pageName。

在需要被统计的页面内导入SDK,在相关生命周期调用SDK,页面在关闭时会将页面访问信息上报。

微信目前提供了两种不同的页面实现方式:Navigation等链接方式、Tabs方式。Navigation等链接方式下,微信小程序会依次触发onLoad、onUnload;在Tabs方式下,微信小程序不会多次触发onLoad、onUnload,所以这种方式下需要在onShow中进行调用才能准确统计页面数据。

两种实现方式下具体调用方法如下:

  1. 当页面实现方式为Tabs时,在onShow、onHide位置进行调用:
var TD = require('../../utils/tdweapp');
Page({
  onShow: function() {
    TD.Page.load(true); // true: Tabs method
  },
  onHide: function() {
    // TD.Page.unload(); // if autoOnPageUnload == false
  }
})
  1. 当页面实现方式为navigation等链接方式打开时,在onLoad、onUnload位置进行调用:
var TD = require('../../utils/tdweapp');
Page({
  onLoad: function() {
    TD.Page.load();
  },
  onUnload: function() {
    // TD.Page.unload(); // if autoOnPageUnload == false
  }
})

4. 高级统计 - 自定义事件

自定义事件用于统计任何您期望跟踪的数据,如:用户点击某功能按钮、填写某个输入框、触发了某个广告等。 完成这些自定义事件统计后可以在报表对其进行统计分析并进行关键路径转化分析。

4.1 自定义事件接口

调用 TD.event() 方法上报自定义事件:

<view bindtap="bindEvent">
  <text>点我出发自定义事件</text>
</view>
var TD = require('../../utils/tdweapp');

Page({
  onLoad: function(){
    TD.Page.load();
  },

  onUnload: function() {
    // TD.Page.unload(); // if autoOnPageUnload == false
  },

  bindEvent: function() {
    TD.event({
      id: 'id1',
      label: 'label1',
      params: {
        key: 'key1',
        value: 'value1'
      }
    });
  }
})

4.2 标准事件接口

对于微信小程序的标准事件:分享、下拉刷新、页面触底,我们提供了标准事件接口:

如果在SDK初始化时以下参数为true时,我们自动采集分享事件:

autoOnPullDownRefresh: true,
autoOnReachBottom: true,
autoOnShare: true

如果不希望自动采集以上三个标准事件,也可以调用以下方法,完成对上述用户行为的统计。建议采用与我们相同的事件ID、Lable及参数, 以便报表对此事件做更深入分析。

如果以上参数不能满足您的需求,您也可以采用按需调用TD.event()进行事件追踪。

var app = getApp();

var TD = require('../../utils/tdweapp.js');

Page({
  onLoad() {
    TD.Page.load();
  },

  onUnload() {
    TD.Page.unload();
  },

  onShareAppMessage () {
    TD.Page.share({
      title: 'custom share title',
      desc: 'custom share description',
      path: 'page/page3/index?a=1&b=2&from=tdsdk'
    });

    return {
      title: 'custom share title',
      desc: 'custom share description',
      path: 'page/page3/index?a=1&b=2&from=tdsdk'
    }
  },

  onPullDownRefresh() {
    TD.Page.pullDownRefresh();
  },
  onReachBottom() {
    TD.Page.onReachBottom();
  }
});

推荐阅读更多精彩内容

  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 2,896评论 0 0
  • 前言: 上一篇文章我们介绍了.wxml和.wxss文件,这篇文章对js文件进行详细的讲解,首先贴上一个简单的js文...
    Smile__EveryDay阅读 18,980评论 0 7
  • 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程...
    junhey阅读 617评论 0 4
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,282评论 1 11
  • 一 基本概念 00 变量分类 局部变量 成员变量 静态变量 01 基本数据类型 整型 浮点型 字符型 boolea...
    xhades阅读 94评论 0 1
  • 日子过得真快啊!转眼已是初五,眼看又要上班,在这个年味越来越淡的新年里,回想起我的小时候,想起记忆中的新年,...
    flower29阅读 388评论 1 3
  • 阔叶榕的根须实在发达,好像宽大深厚的土地都不够它伸展,在地面恣意地爆出缠绕纠缠一起的条条根须,发达有力,让人想到魔...
    荷_407d阅读 84评论 0 0
  • 原来今天是喜欢郑大贤的第200天。 在这之前我不知道我还能如此喜欢一个人。 认识B.A.P是很巧合的事,因为老方去...
    张洲泽_阅读 233评论 0 0