簡介：超過10年互聯(lián)網(wǎng)行業(yè)技術(shù)工作經(jīng)驗總結(jié)

前言：更多關(guān)于數(shù)智化轉(zhuǎn)型、數(shù)據(jù)中臺內(nèi)容可掃碼加群一起探討

阿里云數(shù)據(jù)中臺官網(wǎng) https://dp.alibaba.com/index

---

（作者：qingliang_hu）
關(guān)聯(lián)閱讀：大廠經(jīng)驗（一）：一套 Web 自動曝光埋點技術(shù)方案

團隊經(jīng)過一年探索，已經(jīng)實現(xiàn)了多終端可視化埋點方案，包含 Web / App / 小程序等終端，基本操作流程就是將原運行在終端的應用，映射到PC瀏覽器上，通過瀏覽器做配置埋點，相較于H5，App終端因技術(shù)棧及訪問環(huán)境等條件不同，在界面投屏及元素識別上有一定的難度，下面分享我們實現(xiàn)的像素識別方案。

埋點，簡單說就是對指定位置埋上指定的值，以便監(jiān)控到該位置是否做了點擊、曝光、跳轉(zhuǎn)等操作，從而得到數(shù)據(jù)以做分析使用。

該數(shù)據(jù)通常被PD、運營等同學使用，但埋點卻由編碼的開發(fā)同學完成，且埋點的值還會不定時的更新，增加開發(fā)人員工作。

以此為訴求，團隊著手實現(xiàn)可視化埋點方案，可視化埋點核心在于 如何以平臺的形式不經(jīng)開發(fā)人員來對頁面埋點，比如由制定埋點規(guī)劃、使用埋點數(shù)據(jù)的PD人員來操作。

可視化埋點 從使用終端及技術(shù)棧上可劃分為兩類，native和web，而weex、小程序則兩端都覆蓋

開發(fā)完全不參與，當然是非常理想，實際上難以操作。簡單來說做埋點管理的平臺通常是在web端，而PD很難通過web平臺來操作native app的頁面元素。相比之下web端的埋點可視化因終端及技術(shù)的一致性，我們已經(jīng)實現(xiàn)。

退而求其次，由開發(fā)人員在代碼中標明需要埋點的位置，由PD來配置、更新需埋點的值，也可以很大程度上減少開發(fā)人員工作，提升工作效率，我們就以這種思路來實際App可視化埋點。

下面主要分享下，如何在PC平臺對App實現(xiàn)可視化埋點解析，實際的實現(xiàn)行為更復雜，這里精要講下思路、流程。

方案

web端的可視化埋點，用戶可以通過js實現(xiàn)對html操作，從而直接在PC上對web頁面做元素的圈選、分析。

而web不具備操作native的能力，通過埋點規(guī)范、Native截屏、解析約定等，共同實現(xiàn)了一套完整的方案。

首先Native開發(fā)人員做硬編碼向需要埋點的元素定義id，native接入sdk，以識別此類元素，截應用圖，并將圖元素繪制在對應位置，保存為RGB色值的png圖像，如下圖。

上圖中帶黑色邊框的藍色正方形的區(qū)塊，標明了需要埋點的元素及ID都隱藏這個區(qū)塊里。

我們放大該區(qū)塊

可以看到黑框內(nèi)的左上角，有一些彩色像素，這些像素就是用來標識埋點元素的位置及id。

web端的工作重點就是解析這張圖片的Data。

web端下載該圖并得到其像素數(shù)據(jù)

const canvas = document.canvas;
const ctx = canvas.getContext('2d');

const img = new Image();
img.setAttribute("crossOrigin", "anonymous");
img.crossOrigin = "Anonymous"
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
let imageData = ctx.getImageData(0, 0, this.width, this.height); // imageData即 該圖片的所有像素點
}

得到所有像素點，如

[255, 144, 0, 255, 255, 144, 0, 255, 255, 144, 0, 255, 255,...]

我們知道，一個像素點，由四個值組成，分別為RGBA，如第一個像素點

• 255 - R
• 144 - G
• 0 - B
• 255 - A

通過這套數(shù)據(jù)，四個一組 來篩選找到 web與native 約定好的起始點（即 [97, 117, 116, 255, 111, 116, 114, 255, 97, 99, 107, 255]) ，找到后，再取5656px的區(qū)塊，且該區(qū)塊外有 22px的黑色邊框，符合這個條件的，即是雙方約定標識的有效區(qū)域，如下圖示意

比如我們在第10000個像素找到了符合條件的區(qū)塊，經(jīng)過簡單計算我們可以得到每個像素在圖片上的位置

const pi = 10000; //如對第10000個像素點

const width = 1000; //該圖片的寬度為1000
const pos = {
height: pi*width,
width: parseInt(i / width, 10)
}

得到有效區(qū)域后，再分析該區(qū)域像素數(shù)據(jù)，可以得出，如下像素值

[

97, 117, 116, 255, #起始標識 a,u,t
111, 116, 114, 255, #起始標識 o,t,r
97, 99, 107, 255, #起始標識 a,c,k
0, 0, 27, 255, #id 長度 27
97, 50, 49, 255, #id值 a,2,1
52, 49, 46, 255, #id值 4,1,.
49, 46, 115, 255, #id值 1,.,s
101, 97, 114, 255, #id值 e,a,r
99, 104, 98, 255, #id值 c,h,b
97, 114, 46, 255, #id值 a,r,.
115, 101, 97, 255, #id值 s,e,a
114, 99, 104, 255, #id值 r,c,h
98, 111, 120, 255, #id值 b,o,x 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255, 255, 0, 0,
255 ...
]

前三個像素表起始標識，

第四個像素表id的長度值，即27個字符，

據(jù)這個長度讀取后面的字符

并將每個像素點除第四位外的其它值解析成asc碼

String.fromCharCode(97)//=> aString.fromCharCode(117)//=> u

我們即可得出其表示的數(shù)據(jù)含義

前三個像素的表起始標識，解析為 autotrack，

據(jù)第四像素指定長度（27）字符，解析后面的code為 a2141.1.searchbar.searchbox。

再顯示到圖像上，效果如下

為顯示友好對 "a2141.1.searchbar.searchbox"，只顯示了最后一段。

這樣我們即得到了該元素的位置，又得到了其id。

監(jiān)聽用戶在該圖上的點擊操作，即可輕松選中埋點區(qū)域并得到其id，為該id綁定配置需要的參數(shù)值。生成配置文檔并打包到該App中，通過sdk解析該份配置，通過id將配置與頁面元素對應上，就大功告成！！

原文鏈接>>

數(shù)據(jù)中臺是企業(yè)數(shù)智化的新基建，阿里巴巴認為數(shù)據(jù)中臺是集方法論、工具、組織于一體的，“快”、“準”、“全”、“統(tǒng)”、“通”的智能大數(shù)據(jù)體系。目前正通過阿里云數(shù)據(jù)中臺解決方案對外輸出，包括零售、金融、互聯(lián)網(wǎng)、政務等領(lǐng)域，其中核心產(chǎn)品有：

• Dataphin，一站式、智能化的數(shù)據(jù)構(gòu)建及管理平臺；
• Quick BI，隨時隨地 智能決策；
• Quick Audience，全方位洞察、全域營銷、智能增長；
• Quick A+， 跨多端全域應用體驗分析及洞察的一站式數(shù)據(jù)化運營平臺；

官方站點：
數(shù)據(jù)中臺官網(wǎng) https://dp.alibaba.com

原文鏈接：https://developer.aliyun.com/article/765541?

版權(quán)聲明：本文中所有內(nèi)容均屬于阿里云開發(fā)者社區(qū)所有，任何媒體、網(wǎng)站或個人未經(jīng)阿里云開發(fā)者社區(qū)協(xié)議授權(quán)不得轉(zhuǎn)載、鏈接、轉(zhuǎn)貼或以其他方式復制發(fā)布/發(fā)表。申請授權(quán)請郵件developerteam@list.alibaba-inc.com，已獲得阿里云開發(fā)者社區(qū)協(xié)議授權(quán)的媒體、網(wǎng)站，在轉(zhuǎn)載使用時必須注明"稿件來源：阿里云開發(fā)者社區(qū)，原文作者姓名"，違者本社區(qū)將依法追究責任。 如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，歡迎發(fā)送郵件至：developer2020@service.aliyun.com 進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的大厂经验（二）：多端可视化埋点解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。