大廠經驗（2）：多端可視化埋點解決方案

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上一篇文章我介紹我所在團隊的"},{"type":"link","attrs":{"href":"https://xie.infoq.cn/article/7e3d056b0bd3e4ce6d70b86a9?from=message","title":""},"content":[{"type":"text","text":"Web自動曝光埋點的方案經驗"}]},{"type":"text","text":"，今天想繼續就"},{"type":"text","marks":[{"type":"strong"}],"text":"埋點"},{"type":"text","text":"話題來介紹一下我們的多端可視化埋點解決方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"團隊經過一年探索，已經實現了"},{"type":"text","marks":[{"type":"strong"}],"text":"多終端可視化埋點方案"},{"type":"text","text":"，包含 Web / App / 小程序等終端，基本操作流程就是將原運行在終端的應用，映射到PC瀏覽器上，通過瀏覽器做配置埋點，相較於H5，App終端因技術棧及訪問環境等條件不同，在界面投屏及元素識別上有一定的難度，下面分享我們實現的像素識別方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"埋點"},{"type":"text","text":"，簡單說就是對指定位置埋上指定的值，以便監控到該位置是否做了點擊、曝光、跳轉等操作，從而得到數據以做分析使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該數據通常被PD、運營等同學使用，但埋點卻由編碼的開發同學完成，且埋點的值還會不定時的更新，增加開發人員工作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以此爲訴求，團隊着手實現可視化埋點方案，可視化埋點核心在於 如何以平臺的形式不經開發人員來對頁面埋點，比如由制定埋點規劃、使用埋點數據的PD人員來操作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可視化埋點 從使用終端及技術棧上可劃分爲兩類，"},{"type":"text","marks":[{"type":"strong"}],"text":"native"},{"type":"text","text":"和"},{"type":"text","marks":[{"type":"strong"}],"text":"web"},{"type":"text","text":"，而weex、小程序則兩端都覆蓋。"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0c/0c1782788025f90b27d09591601076ef.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發完全不參與，當然是非常理想，實際上難以操作。簡單來說做埋點管理的平臺通常是在web端，而PD很難通過web平臺來操作native app的頁面元素。相比之下web端的埋點可視化因終端及技術的一致性，我們已經實現。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"退而求其次，由開發人員在代碼中標明需要埋點的位置，由PD來配置、更新需埋點的值，也可以很大程度上減少開發人員工作，提升工作效率，我們就以這種思路來實際App可視化埋點。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面主要分享下，如何在PC平臺對App實現可視化埋點解析，實際的實現行爲更復雜，這裏精要講下思路、流程。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#40A9FF","name":"user"}}],"text":"方案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"web端的可視化埋點，用戶可以通過js實現對html操作，從而直接在PC上對web頁面做元素的圈選、分析。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而web不具備操作native的能力，通過埋點規範、Native截屏、解析約定等，共同實現了一套完整的方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先Native開發人員做硬編碼向需要埋點的元素定義id，native接入sdk，以識別此類元素，截應用圖，並將圖元素繪製在對應位置，保存爲RGB色值的png圖像，如下圖:"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2d/2d7fdee10ec5ae3d9d05f646f6903072.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上圖中帶黑色邊框的藍色正方形的區塊，標明瞭需要埋點的元素及ID都隱藏這個區塊裏。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們放大該區塊"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0f/0f0b02c31489c4707b9e919aa1a0e2c9.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以看到黑框內的左上角，有一些彩色像素，這些像素就是用來標識埋點元素的位置及id。"},{"type":"text","marks":[{"type":"strong"}],"text":"web端的工作重點就是解析這張圖片的Data。"},{"type":"text","text":"web端下載該圖並得到其像素數據:"}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const canvas = document.canvas;\nconst ctx = canvas.getContext('2d');\nconst img = new Image();\nimg.setAttribute(\"crossOrigin\", \"anonymous\");\nimg.crossOrigin = \"Anonymous\"\nimg.src = src;\nimg.onload = function() {\n ctx.drawImage(img, 0, 0);\n let imageData = ctx.getImageData(0, 0, this.width, this.height); // imageData即 該圖片的所有像素點 \n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"得到所有像素點，如"}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"[255, 144, 0, 255, 255, 144, 0, 255, 255, 144, 0, 255, 255,...]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們知道，一個像素點，由四個值組成，分別爲RGBA，如第一個像素點:"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"255 - R"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"144 - G"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"0 - B"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":10}}],"text":"255 - A"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過這套數據，四個一組 來篩選找到 web與native 約定好的起始點（即 [97, 117, 116, 255, 111, 116, 114, 255, 97, 99, 107, 255]) ，找到後，再取56"},{"type":"text","marks":[{"type":"italic"}],"text":"56px的區塊，且該區塊外有 2"},{"type":"text","text":"2px的黑色邊框，符合這個條件的，即是雙方約定標識的有效區域，如下圖示意:"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/48/48665e409361e5f62ba3e1babb8832a2.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"比如我們在第10000個像素找到了符合條件的區塊，經過簡單計算我們可以得到每個像素在圖片上的位置:"}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const pi = 10000; //如對第10000個像素點 \nconst width = 1000; //該圖片的寬度爲1000 \nconst pos = { \n height: pi*width,\n width: parseInt(i / width, 10)\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"得到有效區域後，再分析該區域像素數據，可以得出，如下像素值"}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"[ \n97, 117, 116, 255, #起始標識 a,u,t \n111, 116, 114, 255, #起始標識 o,t,r \n97, 99, 107, 255, #起始標識 a,c,k \n0, 0, 27, 255, #id 長度 27 \n97, 50, 49, 255, #id值 a,2,1 \n52, 49, 46, 255, #id值 4,1,. \n49, 46, 115, 255, #id值 1,.,s \n101, 97, 114, 255, #id值 e,a,r \n99, 104, 98, 255, #id值 c,h,b \n97, 114, 46, 255, #id值 a,r,. \n115, 101, 97, 255, #id值 s,e,a \n114, 99, 104, 255, #id值 r,c,h \n98, 111, 120, 255, #id值 b,o,x 0, 0, \n255, 255, 0, 0, \n255, 255, 0, 0, \n255, 255, 0, 0, \n255, 255, 0, 0, \n255, 255, 0, 0, \n255 ...\n]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前三個像素表起始標識，第四個像素表id的長度值，即27個字符。根據這個長度讀取後面的字符並將每個像素點除第四位外的其它值解析成asc碼"}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"String.fromCharCode(97)//=> aString.fromCharCode(117)//=> u"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/30/30d1aa4e6af0fb0caa0786a0186b257c.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們即可得出其表示的數據含義：前三個像素的表起始標識，解析爲 autotrack，據第四像素指定長度（27）字符，解析後面的code爲 a2141.1.searchbar.searchbox。再顯示到圖像上，效果如下:"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/59/59a225259d88e62d1b9d2c0d490167f4.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲顯示友好對 \"a2141.1.searchbar.searchbox\"，只顯示了最後一段。這樣我們即得到了該元素的位置，又得到了其id。用戶在該圖上的點擊操作，即可輕鬆選中埋點區域並得到其id，爲該id綁定配置需要的參數值。生成配置文檔並打包到該App中，通過sdk解析該份配置，通過id將配置與頁面元素對應上，就大功告成了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}