MixPanel －Android端埋點技術研究
目前在app上通過記錄使用者操作（俗稱埋點），來分析使用者行為的做法，已經成了app必不可少的一部分。有關app的埋點技術，也在發展中。正好最近專案組研發了一個埋點的sdk，所以把相關知識梳理下。
埋點方式
-
程式碼埋點
這種方式主要是由程式猿們手動在程式碼中的回撥事件里加上埋點程式碼。優點是高度定製，想怎麼埋怎麼埋，缺點是工作量大，而且易出錯，難維護。
-
視覺化埋點
這種埋點方式分為兩種，一是使用後臺介面配置需要埋點的位置，app下載配置檔案，將需要埋點的事件上傳（代表MixPanel，百度，talkingdata等）。二是app把所有事件上傳，後臺自己選擇需要埋點的點（代表heap）。
兩種埋點方式各有優劣，但是由於技術目前還在發展中，並沒有形成完全統一的理論以及方式，因此現在大多是這兩種方式並存。
MixPanel原始碼分析－Android
下面是分析MixPanel的原始碼，這應該是唯一的開源的商業埋點實現（其他我沒找到），提供視覺化埋點以及程式碼埋點方式。開源地址：https://github.com/mixpanel ，我主要是研究Android的程式碼。
本文的分析並不透徹，主要由於mixpanel的程式碼比較複雜，很多是和伺服器的互動，在不瞭解協議的情況下，我也是連蒙帶猜來看原始碼的。想透徹分析的同學，可以在mixpanel的網站上註冊一個應用，再在應用裡整合mixpanel的原始碼，然後加日誌或者debug來分析。由於時間有限，我並沒有這麼做。請見諒。
首先是mixpanel的入口，MixPanelApi
該類中有大量的方法叫做Tweak，這個是用來做abtest的，在伺服器上做相應的配置，客戶端可以拉取配置實現不同的功能。本文不討論這個。
主要方法就是track，
/**
* Track an event.
*
* <p>Every call to track eventually results in a data point sent to Mixpanel. These data points
* are what are measured, counted, and broken down to create your Mixpanel reports. Events
* have a string name, and an optional set of name/value pairs that describe the properties of
* that event.
*
* @param eventName The name of the event to send
* @param properties A JSONObject containing the key value pairs of the properties to include in this event.
* Pass null if no extra properties exist.
*/
public void track(String eventName, JSONObject properties) {
track(eventName, properties, false);
}
我們通過不停跟蹤程式碼發現，這個方法會把埋點的event，生成一個AnalyticsMessages.EventDescription物件，然後通過handler，傳送到後臺執行緒中去處理，程式碼如下
track(){
final AnalyticsMessages.EventDescription eventDescription =
new AnalyticsMessages.EventDescription(eventName, messageProps, mToken, isAutomaticEvent);
mMessages.eventsMessage(eventDescription);
}
// ...跳轉至eventsMessage
public void eventsMessage(final EventDescription eventDescription) {
final Message m = Message.obtain();
m.what = ENQUEUE_EVENTS;
m.obj = eventDescription;
mWorker.runMessage(m);
}
//訊息處理
if (msg.what == ENQUEUE_EVENTS) {
final EventDescription eventDescription = (EventDescription) msg.obj;
try {
//省略部分程式碼
returnCode = mDbAdapter.addJSON(message, token, MPDbAdapter.Table.EVENTS, eventDescription.isAutomatic());
} catch (final JSONException e) {
MPLog.e(LOGTAG, "Exception tracking event " + eventDescription.getEventName(), e);
}
}
可以看到，最終資料被儲存到了資料庫裡，具體的資料庫表結構大家可以自行看原始碼，我就不研究哦了。
那資料什麼時候上傳呢，主要是在activiyt的onPause之後上傳。
@Override
public void onActivityPaused(final Activity activity) {
mPaused = true;
if (check != null) {
mHandler.removeCallbacks(check);
}
mHandler.postDelayed(check = new Runnable(){
@Override
public void run() {
if (mIsForeground && mPaused) {
mIsForeground = false;
try {
double sessionLength = System.currentTimeMillis() - sStartSessionTime;
if (sessionLength >= mConfig.getMinimumSessionDuration() && sessionLength < mConfig.getSessionTimeoutDuration()) {
DecimalFormat df = new DecimalFormat("#.0");
String sessionLengthString = df.format((System.currentTimeMillis() - sStartSessionTime) / 1000);
JSONObject sessionProperties = new JSONObject();
sessionProperties.put(AutomaticEvents.SESSION_LENGTH, sessionLengthString);
mMpInstance.track(AutomaticEvents.SESSION, sessionProperties, true);
}
} catch (JSONException e) {
e.printStackTrace();
}
mMpInstance.flush(); ／／上傳
}
}
}, CHECK_DELAY);
}
使用者也可以通過MixPanelApi的flush方法上傳
public void flush() {
mMessages.postToServer(new AnalyticsMessages.FlushDescription(mToken));
}
這就是事件埋點的基本流程，當然功能不止這些，還可以通過activity的生命週期，記錄頁面停留時長等，這些都是基於這個基本流程來處理的。
視覺化埋點
我覺得埋點主要的難點就是在視覺化埋點上，如何做到良好的使用者體驗以及效能呢。我們一起來看看MixPanel是怎麼做的。
首先看一下官網的介紹 https://mixpanel.com/autotrack/
通過視訊可以看到，網頁後臺可以找到我們所有可以埋點的區域，該區域會高亮＋邊框顯示出來，點選該區域，就會顯示彈出一個對話方塊，就可以把這個區域射成一個埋點的位置。
這看起來是不是比程式碼埋點好多啦。那伺服器是怎麼找到app中可以埋點的位置的呢。我們來看一下原始碼，首先是連線上配置介面的地方，是通過websocket連線的，mixpanel繼承了大量websocket的實現，這裡我們就不管他了，感興趣的同學可以去自己研究下websocket的開源實現。具體處理協議的地方是EditorClient這個類
private class EditorClient extends WebSocketClient {
public EditorClient(URI uri, int connectTimeout, Socket sslSocket) throws InterruptedException {
super(uri, new Draft_17(), null, connectTimeout);
setSocket(sslSocket);
}
@Override
public void onOpen(ServerHandshake handshakedata) {
MPLog.v(LOGTAG, "Websocket connected");
}
@Override
public void onMessage(String message) {
MPLog.v(LOGTAG, "Received message from editor:\n" + message);
try {
final JSONObject messageJson = new JSONObject(message);
final String type = messageJson.getString("type");
if (type.equals("device_info_request")) {
mService.sendDeviceInfo();
} else if (type.equals("snapshot_request")) {
mService.sendSnapshot(messageJson);
} else if (type.equals("change_request")) {
mService.performEdit(messageJson);
} else if (type.equals("event_binding_request")) {
mService.bindEvents(messageJson);
} else if (type.equals("clear_request")) {
mService.clearEdits(messageJson);
} else if (type.equals("tweak_request")) {
mService.setTweaks(messageJson);
}
} catch (final JSONException e) {
MPLog.e(LOGTAG, "Bad JSON received:" + message, e);
}
}
可以看到OnMessage的地方有這麼幾個介面。這些都是後臺web頁面發過來的訊息，然後app端執行相應的操作。
device_info_request 這個就不說了，顯然是獲取一些裝置的資訊。
snapshot_request 這個就是關鍵的地方，這裡是app端將當前展示的頁面的截圖，傳送給後端，這樣後端就可以顯示出來了。我們通過程式碼跟蹤，找到了實現在ViewCrawler裡的sendSnapshot方法。
private void sendSnapshot(JSONObject message) {
final long startSnapshot = System.currentTimeMillis();
//...省略
try {
writer.write("{");
writer.write("\"type\": \"snapshot_response\",");
writer.write("\"payload\": {");
{
writer.write("\"activities\":");
writer.flush();
mSnapshot.snapshots(mEditState, out);
}
final long snapshotTime = System.currentTimeMillis() - startSnapshot;
writer.write(",\"snapshot_time_millis\": ");
writer.write(Long.toString(snapshotTime));
writer.write("}"); // } payload
writer.write("}"); // } whole message
} catch (final IOException e) {
MPLog.e(LOGTAG, "Can't write snapshot request to server", e);
} finally {
try {
writer.close();
} catch (final IOException e) {
MPLog.e(LOGTAG, "Can't close writer.", e);
}
}
}
關鍵程式碼在ViewSnapShot裡
/**
* Take a snapshot of each activity in liveActivities. The given UIThreadSet will be accessed
* on the main UI thread, and should contain a set with elements for every activity to be
* snapshotted. Given stream out will be written on the calling thread.
*/
public void snapshots(UIThreadSet<Activity> liveActivities, OutputStream out) throws IOException {
mRootViewFinder.findInActivities(liveActivities);
final FutureTask<List<RootViewInfo>> infoFuture = new FutureTask<List<RootViewInfo>>(mRootViewFinder);
mMainThreadHandler.post(infoFuture);
final OutputStreamWriter writer = new OutputStreamWriter(out);
List<RootViewInfo> infoList = Collections.<RootViewInfo>emptyList();
writer.write("[");
try {
infoList = infoFuture.get(1, TimeUnit.SECONDS);
} catch (final InterruptedException e) {
MPLog.d(LOGTAG, "Screenshot interrupted, no screenshot will be sent.", e);
} catch (final TimeoutException e) {
MPLog.i(LOGTAG, "Screenshot took more than 1 second to be scheduled and executed. No screenshot will be sent.", e);
} catch (final ExecutionException e) {
MPLog.e(LOGTAG, "Exception thrown during screenshot attempt", e);
}
RootViewInfo是一個Future，主要的方法是taskSnapShot
private void takeScreenshot(final RootViewInfo info) {
final View rootView = info.rootView;
Bitmap rawBitmap = null;
try {
final Method createSnapshot = View.class.getDeclaredMethod("createSnapshot", Bitmap.Config.class, Integer.TYPE, Boolean.TYPE);
createSnapshot.setAccessible(true);
rawBitmap = (Bitmap) createSnapshot.invoke(rootView, Bitmap.Config.RGB_565, Color.WHITE, false);
} catch (final NoSuchMethodException e) {
MPLog.v(LOGTAG, "Can't call createSnapshot, will use drawCache", e);
} catch (final IllegalArgumentException e) {
MPLog.d(LOGTAG, "Can't call createSnapshot with arguments", e);
} catch (final InvocationTargetException e) {
MPLog.e(LOGTAG, "Exception when calling createSnapshot", e);
} catch (final IllegalAccessException e) {
MPLog.e(LOGTAG, "Can't access createSnapshot, using drawCache", e);
} catch (final ClassCastException e) {
MPLog.e(LOGTAG, "createSnapshot didn't return a bitmap?", e);
}
Boolean originalCacheState = null;
try {
if (null == rawBitmap) {
originalCacheState = rootView.isDrawingCacheEnabled();
rootView.setDrawingCacheEnabled(true);
rootView.buildDrawingCache(true);
rawBitmap = rootView.getDrawingCache();
}
} catch (final RuntimeException e) {
MPLog.v(LOGTAG, "Can't take a bitmap snapshot of view " + rootView + ", skipping for now.", e);
}
float scale = 1.0f;
if (null != rawBitmap) {
final int rawDensity = rawBitmap.getDensity();
if (rawDensity != Bitmap.DENSITY_NONE) {
scale = ((float) mClientDensity) / rawDensity;
}
final int rawWidth = rawBitmap.getWidth();
final int rawHeight = rawBitmap.getHeight();
final int destWidth = (int) ((rawBitmap.getWidth() * scale) + 0.5);
final int destHeight = (int) ((rawBitmap.getHeight() * scale) + 0.5);
if (rawWidth > 0 && rawHeight > 0 && destWidth > 0 && destHeight > 0) {
mCachedBitmap.recreate(destWidth, destHeight, mClientDensity, rawBitmap);
}
}
if (null != originalCacheState && !originalCacheState) {
rootView.setDrawingCacheEnabled(false);
}
info.scale = scale;
info.screenshot = mCachedBitmap;
}
這裡就知道了，首先通過反射view的createSnapshot方法，嘗試獲取view的截圖，如果沒有成功，則呼叫截圖的api，來獲取Drawingcache。獲取到之後，根據當前手機螢幕的解析度來縮放一次。保證跟手機的解析度一致。再上傳給伺服器，當然這裡只是螢幕的截圖，只根據截圖，是無法知道控制元件點選位置的。然後又做了什麼呢，我們繼續看程式碼：
private void snapshotView(JsonWriter j, View view)
throws IOException {
final int viewId = view.getId();
final String viewIdName;
if (-1 == viewId) {
viewIdName = null;
} else {
viewIdName = mResourceIds.nameForId(viewId);
}
j.beginObject();
j.name("hashCode").value(view.hashCode());
j.name("id").value(viewId);
j.name("mp_id_name").value(viewIdName);
final CharSequence description = view.getContentDescription();
if (null == description) {
j.name("contentDescription").nullValue();
} else {
j.name("contentDescription").value(description.toString());
}
final Object tag = view.getTag();
if (null == tag) {
j.name("tag").nullValue();
} else if (tag instanceof CharSequence) {
j.name("tag").value(tag.toString());
}
j.name("top").value(view.getTop());
j.name("left").value(view.getLeft());
j.name("width").value(view.getWidth());
j.name("height").value(view.getHeight());
j.name("scrollX").value(view.getScrollX());
j.name("scrollY").value(view.getScrollY());
j.name("visibility").value(view.getVisibility());
float translationX = 0;
float translationY = 0;
if (Build.VERSION.SDK_INT >= 11) {
translationX = view.getTranslationX();
translationY = view.getTranslationY();
}
j.name("translationX").value(translationX);
j.name("translationY").value(translationY);
j.name("classes");
j.beginArray();
// ..省略部分
if (view instanceof ViewGroup) {
final ViewGroup group = (ViewGroup) view;
final int childCount = group.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = group.getChildAt(i);
// child can be null when views are getting disposed.
if (null != child) {
snapshotView(j, child);
}
}
}
}
這裡就是關鍵，通過遍歷當前view，將所有的view的資訊，都傳給了後端，尤其是top，left，width，height這些資訊，通過這些資訊，後端就可以確定view的位置。這裡我覺得是有優化空間的，完全可以只上傳可以被埋點的view，例如button等，像一些純展示的無法點選的view，其實沒必要上傳的。例如大部分textview。這樣增加了後端的負擔。
當在後臺操作，選擇了一個點選的view之後，app端就會收到event_binding_request訊息，我們來看看如何處理這個訊息的
final int size = mEditorEventBindings.size();
for (int i = 0; i < size; i++) {
final Pair<String, JSONObject> changeInfo = mEditorEventBindings.get(i);
try {
final ViewVisitor visitor = mProtocol.readEventBinding(changeInfo.second, mDynamicEventTracker);
newVisitors.add(new Pair<String, ViewVisitor>(changeInfo.first, visitor));
} catch (final EditProtocol.InapplicableInstructionsException e) {
MPLog.i(LOGTAG, e.getMessage());
} catch (final EditProtocol.BadInstructionsException e) {
MPLog.e(LOGTAG, "Bad editor event binding cannot be applied.", e);
}
}
首先呼叫readEventBinding讀取服務端發來的資訊，然後將它存在一個ViewVisitor裡，想找到具體的view，則需要識別view的一些基本的特徵，之前的程式碼已經看到了，view的id，tag，contentdescription等特徵，都已經被上傳至伺服器，這時伺服器又會把它下發回來，放在path引數裡。
// Package access FOR TESTING ONLY
/* package */ List<Pathfinder.PathElement> readPath(JSONArray pathDesc, ResourceIds idNameToId) throws JSONException {
final List<Pathfinder.PathElement> path = new ArrayList<Pathfinder.PathElement>();
for (int i = 0; i < pathDesc.length(); i++) {
final JSONObject targetView = pathDesc.getJSONObject(i);
final String prefixCode = JSONUtils.optionalStringKey(targetView, "prefix");
final String targetViewClass = JSONUtils.optionalStringKey(targetView, "view_class");
final int targetIndex = targetView.optInt("index", -1);
final String targetDescription = JSONUtils.optionalStringKey(targetView, "contentDescription");
final int targetExplicitId = targetView.optInt("id", -1);
final String targetIdName = JSONUtils.optionalStringKey(targetView, "mp_id_name");
final String targetTag = JSONUtils.optionalStringKey(targetView, "tag");
final int prefix;
if ("shortest".equals(prefixCode)) {
prefix = Pathfinder.PathElement.SHORTEST_PREFIX;
} else if (null == prefixCode) {
prefix = Pathfinder.PathElement.ZERO_LENGTH_PREFIX;
} else {
MPLog.w(LOGTAG, "Unrecognized prefix type \"" + prefixCode + "\". No views will be matched");
return NEVER_MATCH_PATH;
}
final int targetId;
final Integer targetIdOrNull = reconcileIds(targetExplicitId, targetIdName, idNameToId);
if (null == targetIdOrNull) {
return NEVER_MATCH_PATH;
} else {
targetId = targetIdOrNull.intValue();
}
path.add(new Pathfinder.PathElement(prefix, targetViewClass, targetIndex, targetId, targetDescription, targetTag));
}
return path;
}
通過這些引數，就可以找個那個view，繼而對view進行監聽，監聽的方式就比較簡單了，用谷歌提供的Accessibility相關api就可以做到。
if ("click".equals(eventType)) {
return new ViewVisitor.AddAccessibilityEventVisitor(
path,
AccessibilityEvent.TYPE_VIEW_CLICKED,
eventName,
listener
);
} else if ("selected".equals(eventType)) {
return new ViewVisitor.AddAccessibilityEventVisitor(
path,
AccessibilityEvent.TYPE_VIEW_SELECTED,
eventName,
listener
);
} else if ("text_changed".equals(eventType)) {
return new ViewVisitor.AddTextChangeListener(path, eventName, listener);
} else if ("detected".equals(eventType)) {
return new ViewVisitor.ViewDetectorVisitor(path, eventName, listener);
} else {
throw new BadInstructionsException("Mixpanel can't track event type \"" + eventType + "\"");
}
而匹配view的規則也很簡單,就是對比class，id，contentDescription，tag四個元素
private boolean matches(PathElement matchElement, View subject) {
if (null != matchElement.viewClassName &&
!hasClassName(subject, matchElement.viewClassName)) {
return false;
}
if (-1 != matchElement.viewId && subject.getId() != matchElement.viewId) {
return false;
}
if (null != matchElement.contentDescription &&
!matchElement.contentDescription.equals(subject.getContentDescription())) {
return false;
}
final String matchTag = matchElement.tag;
if (null != matchElement.tag) {
final Object subjectTag = subject.getTag();
if (null == subjectTag || !matchTag.equals(subject.getTag().toString())) {
return false;
}
}
return true;
}
這樣，在每次app的activity的onresume方法裡，都會去做這個尋找匹配的view的過程，具體看viewcrawler的onActivityResume方法
@Override //ViewCrawler.class
public void onActivityResumed(Activity activity) {
installConnectionSensor(activity);
mEditState.add(activity);
}
//通過一系列處理，最終呼叫了visit方法
/**
* Scans the View hierarchy below rootView, applying it's operation to each matching child view.
*/
public void visit(View rootView) {
Log.d(LOGTAG, mPath.get(0).toString());
mPathfinder.findTargetsInRoot(rootView, mPath, this);
}
這種做法的效率暫且不停，到這裡我們的流程就分析完了。大致的流程就是
App端 上傳螢幕截圖和頁面佈局資訊－》服務端操作之後，下發需要埋點的viewpath －》 app端儲存這個path，並在每個activity的onResume都去執行尋找path的任務－》註冊Accessibility監聽，上傳相應事件。
這樣就實現了視覺化埋點，但是這種方式，應該是用於已經發布到線上的app的埋點，而且不同版本不通用。。。因為view的id等資訊是會隨著版本變化的。如果這裡有錯誤，請大神指出。不勝感激，謝謝！！
相關文章
- Android埋點技術概覽Android
- Android無埋點資料收集SDK關鍵技術Android
- 利用AspectJ實現Android端非侵入式埋點Android
- 從“埋點技術已死?”開始說起
- Android推送技術研究Android
- JJEvent 一個可靠的Android端資料埋點SDKAndroid
- 揭開JS無埋點技術的神祕面紗JS
- 超低技術門檻!運營人員也可以直接使用Android視覺化埋點Android視覺化
- Android全量埋點實踐Android
- 無痕埋點方案，現有方案調研 | 掘金技術徵文
- 商家視覺化埋點探索和實踐｜得物技術視覺化
- 如何使用Android視覺化埋點Android視覺化
- 得到Android團隊無埋點方案Android
- 美團點評無埋點方案 - 利用 AppCompatDetegale 替換控制元件 | 掘金技術徵文APP控制元件
- 得物技術埋點自動化驗證的探索和最佳實踐
- 小程式從手動埋點到自動埋點
- 51信用卡 Android 自動埋點實踐Android
- [原創]微信PC端技術研究-訊息防撤銷
- 前端技術框架選型，跨端框架盤點前端框架跨端
- 前端埋點方案分析前端
- 埋點計算定位
- CSS埋點統計CSS
- 短視訊技術詳解：Android端的短視訊開發技術Android
- Android APP全面屏適配技術要點AndroidAPP
- Android端程式碼染色原理及技術實踐Android
- 地球上最大的PHP站點後端技術解密PHP後端解密
- 美團無埋點方案 - Gradle Plugin 的方式，在編譯期間修改 class | 掘金技術徵文GradlePlugin編譯
- 面向切面程式設計AspectJ在Android埋點的實踐程式設計Android
- 應用於Android無埋點的Gradle外掛解析AndroidGradle
- 元件中路由和埋點元件路由
- js無侵入埋點方案JS
- 不可缺少的程式埋點
- JVM 垃圾收集技術研究JVM
- 基於 Nginx&Lua 實現自建服務端埋點系統Nginx服務端
- 技術站點
- iOS 播放遠端網路音樂的核心技術點iOS
- 新一代Flex富客戶端技術特點Flex客戶端
- APP 和 Web 端通過埋點 SDK 傳送的，經過 LogServiceAPPWebGse