5個步驟，學懂PC站和H5站資料埋點

埋點是網站和APP等產品進行日常改進及資料分析的資料採集基礎，我們主要用來採集使用者行為資料（例如：頁面訪問路徑，點選了哪一個按鈕）進行資料 ... MdEditor 5個步驟，學懂PC站和H5站資料埋點 語言:CN/TW/HK 時間 2018-12-0714:56:27 人人都是產品經理 主題: 個人電腦 APP 伺服器 這篇文章拋開資料增長方法和埋點技術原理的大道理，手把手帶著大家做一遍從0-1的資料埋點，花10分鐘時間，學會如何走出第一步。

一年前，我寫了一篇《7個步驟，學會APP客戶端資料埋點》的文章在網路上獲得了10w+的閱讀量，幫助了很多新人快速完成埋點需求。

後來一直有同學反饋和諮詢，大家在工作中除了接觸和負責APP客戶端的產品外，還有大量同學在負責PC網站和H5站的產品。

那麼PC網站和H5站的產品埋點又怎麼能快速搞定呢？ 如果你遇到了下面這些問題的話，我們繼續往下看，跟我做。

領導說，咱們的pc和H5網站需要加一下統計，你負責搞定； 研發說，咱們的pc網站的資料統計系統用哪家的？你選好了註冊一下； 研發說，咱們的H5網站的統計程式碼你發我一下，發一個統計需求的郵件給我； 運營說，咱們的pc網站都能看哪些資料？平臺在哪？怎麼查首頁的UVPV？ 運營說，咱們網站想做SEO搜尋引擎優化，想看看每天的來源和關鍵詞，發我一下。

這篇文章拋開資料增長方法和埋點技術原理，手把手帶著大家做一遍從0-1的資料埋點，我們花10分鐘時間，學會如何走出第一步。

我們分五個部分來談： 一、什麼是資料埋點 二、網頁埋點和APP埋點的區別 三、IPPVUVCookie是什麼 四、PC站和H5站從0-1完成埋點 五、埋點後在哪看數，能看到什麼資料 一、什麼是資料埋點？ 埋點是網站和APP等產品進行日常改進及資料分析的資料採集基礎，我們主要用來採集使用者行為資料（例如：頁面訪問路徑，點選了哪一個按鈕）進行資料分析，從而讓運營同學更加合理的安排運營計劃讓產品經理更好的優化產品路徑。

現在市面上有很多第三方埋點服務商，百度統計、友盟、growingIO等。

一個網站上線,開發者除了保證網站功能正常，體驗優好之外，還有一項重要的工作是資料收集——通過收集使用者的行為資料可以幫助瞭解網站的功能是否滿足使用者的需求，導流方式是否有效，新功能上線後是否效果是否達到設計初衷。

根據資料指引有效優化產品體驗，以及發現新的產品方向是產品經理的必備技能，而如何採集準確並且足夠的網站資料則應該是開發者的責任。

目前常見的資料埋點手段： （1）手動埋點 手動程式碼埋點比較常見，需要呼叫埋點的業務方在需要採集資料的地方呼叫埋點的方法。

優點是流量可控，業務方可以根據需要在任意地點任意場景進行資料採集，採集資訊也完全由業務方來控制。

這樣的有點也帶來了一些弊端，需要業務方來寫死方法，如果採集方案變了，業務方也需要重新修改程式碼，重新發布。

（2）視覺化埋點 可是化埋點是近今年的埋點趨勢，很多大廠自己的資料埋點部門也都開始做這塊。

優點是業務方工作量少，缺點則是技術上推廣和實現起來有點難（業務方前端程式碼規範是個大前提）。

阿里的活動頁很多都是運營通過視覺化的介面拖拽配置實現，這些活動控制元件元素都帶有唯一標識。

通過埋點配置後臺，將元素與要採集事件關聯起來，可以自動生成埋點程式碼嵌入到頁面中。

（3）無埋點 無埋點則是前端自動採集全部事件，上報埋點資料，由後端來過濾和計算出有用的資料。

優點是前端只要載入埋點指令碼，缺點是流量和採集的資料過於龐大，伺服器效能壓力山大，主流的GrowingIO就是這種實現方案。

我們目前自己的網站用的還是第一種。

後面兩種是近年出現的，資料準確性和普及型還需要驗證，所以我們今天就聊最通用的埋點形式。

二、網頁埋點和APP埋點的區別 如今大家都更多的關注APP的產品設計，所以對APP的資料分析也提的比較多，但是網站也是需要進行資料分析和埋點的。

而且目前H5大行其道，很多公司都是採取H5網頁的形式進行產品承載，H5網站從技術原理來看，他還是HTML程式碼形式編寫的，所以埋點的話也和APP的實現方式是不一樣。

簡單說，想看數，先埋點。

先通過資料統計系統把統計程式碼或程式碼包拿到，然後加在你的頁面程式碼或者整合到APP程式碼包裡，然後就可以看到相應的使用者行為資料。

從埋點這件事來看，簡單理解，最大的的區別就是統計的平臺不一樣。

目前第三方的資料採集和分析產品有很多，如：googleAnalytics、百度統計、友盟+、GrowingIO、百度移動統計等。

目前這幾家都覆蓋了多類平臺的統計服務，所以，如果你是給APP埋點，就選移動統計；如果是給網站統計，就選網站統計。

網站一般用的是統計平臺的JS程式碼，APP是用的統計平臺的統計SDK，就這麼簡單。

因為2類產品的技術原理是不一樣的，不要混淆就可以了。

例如：在百度統計和友盟的官方網站首頁裡面，想找到網站統計系統就選紅框這裡的產品即可。

三、IPPVUVCookie是什麼？ 埋點是為了看數，那麼有些數，對於新人來說，是必須要懂的。

這裡從網路和百科裡面搜尋了一下基本的定義，方便大家閱讀。

（1）ip、uv、pv的定義 IP（獨立IP）：即InternetProtocol，指獨立IP數。

00:00-24:00內相同IP地址只被計算一次。

PV（訪問量）：即PageView，即頁面瀏覽量或點選量，使用者每次重新整理即被計算一次。

UV（獨立訪客）：即UniqueVisitor，訪問您網站的一臺電腦客戶端為一個訪客，00:00-24:00內相同的客戶端只被計算一次。

（2）ip、pv、uv的區別 IP（獨立IP）：某IP地址的計算機訪問網站的次數，這種統計方式很容易實現，具有真實性，所以是衡量網站流量的重要指標。

PV（訪問量）：PV反映的是瀏覽某網站的頁面數，所以每重新整理一次也算一次。

就是說PV與來訪者的數量成正比，但PV並不是頁面的來訪者數量，而是網站被訪問的頁面數量。

UV（獨立訪客）：可以理解成訪問某網站的電腦的數量，網站判斷來訪電腦的身份是通過來訪電腦的cookies實現的。

如果更換了IP後但不清除cookies，再訪問相同網站，該網站的統計中UV數是不變的。

舉例說明： 甲乙丙三人某臺通過ADSL的電腦，訪問了“pmwangshi”這個網站，並且每人各瀏覽了2個頁面，那麼網站的流量統計是： IP（獨立IP）：1 PV（訪問量）：6（3人乘以2個頁面） UV（獨立訪客）：1 若三人都是更換了IP（ADSL重新撥號）後各瀏覽了2個頁面，則： IP（獨立IP）：3 PV（訪問量）：6 UV（獨立訪客）：1 所以，IP(獨立IP)反映的是網路地址物件的數量，UV(獨立訪客)反映的是實際使用者的數量，每個UV相對於每個ip更準確地對應一個實際的瀏覽者。

（3）Cookie 當客戶端第一次訪問某個網站伺服器時，網站伺服器會給該客戶端電腦發出一個Cookie，通常放在C盤中。

在這個Cookie中會分配一個獨一無二的編號，並記錄訪問伺服器的資訊，如訪問時間、訪問了哪些頁面等等。

當你下次再訪問這個伺服器時，伺服器就可以直接從你的電腦中找到上一次放進去的Cookie檔案，並且對其進行更新，但那個獨一無二的編號是不會變的。

如果在一定時間內，伺服器發現2個Visit所對應的是一個編號，那麼我們自然可以認為這個來源於同一個Visitor了，自然也就是1個UV。

使用Cookie的方法要比網站伺服器更精確些。

但也存在一些問題，比如：有些客戶端為保證更高級別的安全，關閉了Cookie的功能；或者是有些客戶端設定了在退出頁面時自動刪除Cookie，亦或經常自己去手動刪除Cookie，那麼這個方法就不那麼精確了。

由此看來，兩個方法都只能得到近似的UV，而不是絕對精確的。

四、PC和H5站從0-1完成埋點 不管是用哪一個平臺，基本思路都是一樣的，降峰老師今天給大家一個通用的思路和方法。

可以讓大家快速的試驗和動起來。

首頁先明確下完成一個pc網站或者H5網站的資料埋點的幾個步驟： 註冊一家統計網站 新增網站 獲取JS程式碼 將JS程式碼發給研發並完成網頁上線 在後臺檢視資料 （1）註冊一家統計網站常用的APP資料分析網站 百度統計tongji.baidu.com（注意不是移動統計） 友盟u-webweb.umeng.com（這就是原來的cnzz站長統計） 任意選擇一個網站註冊一個賬號。

我們今天以友盟u-web來做教程。

學會了一家，其他的都大同小異。

（2）新增網站註冊完成後，會進入到友盟的首頁，如果找不到的話直接訪問web.umeng.com，點選【立即使用】。

進入站點列表： 新增完成後就可以在列表裡面看到你新增的站點，以後站點的資料，js程式碼獲取，設定都在這裡。

請見箭頭的幾個位置是常用功能。

新建的賬號下面站長列表肯定是空的，那麼你可以點選右側的【新增站點】，來新增一個新站點。

新增站點的時候，重點寫站點名稱和域名即可，其他的可以隨便寫。

域名的格式：如有多個請分行填寫，填寫示例： 如需統計整站：pmwangshi.com 如只需統計子域名：123.pmwangshi.com （3）獲取JS程式碼站點建立完成後，就需要從系統裡面取一個js程式碼，把這個js程式碼給到技術，讓技術把這個程式碼放入你要統計的網頁程式碼內，然後統計系統就可以抓取到網站的行為資料了。

我們還是看第2步那個圖，列表後面有1個【獲取程式碼】，點選後進入： 這裡就是需要給到研發的js程式碼，你可以選1個樣式，然後把整段程式碼複製下來。

（4）將JS程式碼發給研發並完成網頁上線拿到這段程式碼後，需要發給研發,，並告訴研發你這個程式碼是用於哪一個域名的統計即可。

給研發的需求郵件可以這麼表達： 親愛的研發哥哥您好： 目前需要給網站XXX進行埋點，我們選擇了XXX統計系統。

許可權已經申請完畢，並獲取了統計用的JS程式碼。

辛苦進行程式碼預埋。

網站域名為：xxxxxx.com Js程式碼： (由於程式碼特殊性，文章裡無法貼出) 辛苦研發將其貼上到網站所有頁面的《/body》前，並辛苦測試做好測試迴歸，新增成功後即可開始統計。

期望在X月X日的第X個版本迭代計劃內完成上線。

謝謝~ （5）在後臺檢視資料完成js程式碼預埋並讓研發哥哥上線後，降峰老師就恭喜你，你算第一階段的事情大功告成了，第二天就可以開始穩定的看數了。

（一般來說，js程式碼上線後一小時後就能開始有數） 後續用你的管理員賬號登入進來，或者直接點選放置在頁面裡面的統計小圖示即可開啟一個頁面看到資料了。

（後續你可以儲存蒐藏下來這個頁面的url，後續直接開啟即可訪問統計頁面了） 如果你設定了密碼，那麼還需輸入密碼。

五、埋點後能看到什麼？ 資料在看數之前，補充一個事情。

這裡有1個配置檢視資料隱私許可權的小細節，因為你放置了一個統計程式碼後，會在頁面上出現一個統計的小圖示，比如：你放置在頁面底部就會有1個小圖示。

預設是隻有管理員才能看到資料，如果你想給內部人員開放許可權的話，那麼需要設定一個檢視的密碼。

設定完成後，大家根據需求點選統計報表裡面的資料即可查看了。

左側選單有豐富的資料內容，不需要你做其他設定，資料就都有了。

這個比APP埋點簡單很多，APP還需要定義頁面的元素的事件名稱和事件id，有興趣的可以看看我的《7步完成APP客戶端埋點》的文章做下對比。

附錄一些產品關注的核心指標，這些在分析系統的後臺都能看到。

我們今天更多的是行為資料，業務資料還需要每個公司自己去開發，在另外的BI資料系統裡檢視，比如支付公司的交易資料，電商公司的訂單資料，金融公司的信貸放款量資料等等。

（1）產品規模 使用者資料：如新增使用者、使用者型別分佈、活躍使用者、沉默使用者、啟動次數、版本分析等。

業務資料：這個與具體業務有關，如問答社群的問題數，回答數，全網熱度，瀏覽量；如對含交易平臺的交易量，交易額，客單價，轉化率，利潤等。

（2）產品運營 流量資料：pv、uv、dau、mau、留存分析（次日留存，7日留存，使用者新鮮度）、流失分析（日周月、自然流失、迴歸流失）。

渠道資料：渠道流量、渠道轉換率、渠道評價、渠道時段詳情、渠道質量（渠道活躍使用者/渠道流量）等。

資料只是基礎，更多的還需我們人肉去洞察背後的原因和分析結論。

進階的方法還有配合轉化分析、訪問路徑、轉化漏斗、熱力圖等工具使用，從點到面地瞭解使用者的使用行為及留存的問題。

大家可以在統計系統後臺逐個體驗。

針對網站還有SEO優化的事情需要關注。

現在大家都在談如何黑客增長、如何進行精細化獲客，談各種策略各種模型。

我最近也在進行精細化獲客和投放策略設計的工作，也有一些沉澱，但是我覺得給新人看的基礎文章還是需要輸出的。

如今網上基礎的手把手的埋點操作步驟鮮有人寫，筆者認為有時候這些最簡單的事情，可以讓新人能快速開展工作，得到領導的信任，這類文章從某種意義來看也有更多的受眾。

作者：降峰，小山老師  10年產品人。

公眾號：小山學堂 本文由@降峰原創釋出於人人都是產品經理。

未經許可，禁止轉載 題圖作者提供 「其他文章」 除了大大大，我們還能如何「適老化」設計 從巨集觀視角出發，企業該如何做增長？ 對商業文案存在性的探討：本不該淪為“八卦”編輯 客戶成功：客戶成功如何與銷售更好的配合？ 我們如何提升新使用者轉化率？ 一圖勝千言——UI-UX與使用者之間的互動情感 建立金融會員積分體系設計，讓你的客戶留下來！ ​亞馬遜、SHEIN都在用的BNPL，憑何成為歐美出海新利刃？ 內容自適應設計在金融產品上的應用探究 產品戰略地圖（7）：能力壩的拆解與建設 海外營銷乾貨丨5種適合商業營銷的TikTok趨勢 解構客服平臺：探祕智慧質檢的“簡歷” 一款產品的誕生與成長 今日體驗：淘寶也玩測試小遊戲 HMI領域深入研究！設計知識體系（下） 跨文化產品的設計思路 留量時代：營銷運營化 詳解｜針對某個功能，如何做競品分析和設計優化？ 覆盤|智慧硬體產品——體測儀 潮流電商的PK——得物、識貨競品分析報告 「個人電腦」 打著“工作”的旗號，多顯示卡發燒PC怎麼又回來了 二合一平板新低：酷比魔方iWORKGT電腦3999元起 PC晶片，ARM能否挑戰X86？ 有同感嗎？調查發現高功耗已成PCDIY使用者最深惡痛絕的問題 強到離譜！松下出了臺“戰地專用”的電腦，簡直就是個手提箱~ a16z：區塊空間是繼PC、寬頻和智慧手機之後的未來 微信PC端3.7正式版推送：終於等待儲存清理功能 PC平臺首個PS5模擬器“Kyty”問世，目前已可執行部分PS4遊戲 手機、PC電腦銷量暴跌半導體晶片牛不起來了 PC業務大增後，索尼放狠話2025年一半遊戲要進軍PC、手遊平臺 「APP」 如何高效的開展app的效能測試 使用web-vitals監控webapp的效能 這是一款有味道的APP 白嫖市值風雲VIP的三種姿勢 即日起，乘坐成都地鐵可享折上折優惠 上海市民，可以自行列印離線“隨申碼”了！申領、使用攻略收好 兩步路無法上傳香山和西山相關的路線 uni-app微信小程式訂閱訊息推送實踐 這84款APP被通報！有的可能你在用…… 蘋果使用者，誰沒收到過“性感荷官”的邀請？