巧用 Img / JavaScript 采集頁面數據

sunny5541 發布于2019-08-01 18:28 / 1971人閱讀

摘要：日志服務提供就是為解決以上輕量級埋點采集場景而生，我們可以在分鐘時間內完成埋點和數據上報工作。服務功能包括實時采集與消費。

摘要：當我們有一個新內容時（例如新功能、新活動、新游戲、新文章），作為運營人員總是迫不及待地希望能盡快傳達到用戶，因為這是獲取用戶的第一步、也是最重要的一步。

點此查看原文:http://click.aliyun.com/m/40929/

我們發送重要郵件時為了確認對方已讀，都會在郵件中設置一個“讀取回執"標簽以確定對方時候讀信。

這種模式用途很廣，例如：

發送傳單時，確保對方已讀
推廣網頁時，多少用戶做了點擊
移動App運營活動頁面，分析用戶訪問情況
對這類個性化的采集與統計，針對站長CNZZ、百度統計，移動的Talking Data、友盟等都無法勝任。主要難點在于：

個性化需求難滿足：用戶產生行為并非移動端場景，其中會包括一些運營個性化需求字段，例如：來源、渠道、環境、行為等參數
開發難度大/成本高：為完成一次數據采集、分析需求，首先需要購買云主機，公網IP，開發數據接收服務器，消息中間件等，并且通過互備保障服務高可用；接下來需要開發服務端并進行測試
使用不容易：數據達到服務端后，還需要工程師先清洗結果并導入數據庫，生成運營需要的數據
無法彈性：無法預估用戶的使用量，因此需要預留很大的資源池
從以上幾點看，當一個面向內容投放的運營需求來了后，如何能以很快捷的手段滿足這類用戶行為采集、分析需求是一個很大的挑戰。

日志服務提供Web Tracking/JS/Tracking Pixel SDK 就是為解決以上輕量級埋點采集場景而生，我們可以在1分鐘時間內完成埋點和數據上報工作。此外日志服務每賬號*每月提供 500MB 免費額度，讓你不花錢也能辦事。

方案簡介

這里引入采集 + 分析方案基于阿里云日志服務，該服務是針對日志類數據的一站式服務，無需開發就能快捷完成海量日志數據的采集、消費、投遞以及查詢分析等功能，提升運維、運營效率。服務功能包括：

LogHub：實時采集與消費。與Blink、Flink、Spark Streaming、Storm、Kepler打通。
數據投遞：LogShipper。與MaxCompute、E-MapReduce、OSS、FunctionCompute打通
查詢與實時分析：LogSearch/Analytics。與DataV，Grafana，Zipkin，Tableua等打通。

采集端介紹

日志服務提供30+數據采集方式，針對服務器、移動端、嵌入式設備及各種開發語言都提供完整的解決方案，比較典型有：

Logtail：針對X86服務器設計Agent
Android/iOS：針對移動端SDK
Producer Library：面向受限CPU/內存智能設備

這里介紹的輕量級采集方案（Web Tracking），該方案只需一個http get請求即可將數據傳輸至日志服務Logstore端，適應各種無需任何驗證的靜態網頁，廣告投放，宣傳資料，移動端數據采集。相比其他日志采集方案，特點如下：

WebTracking接入步驟

Web Tracking（也叫Tracking Pixel）術語來自于HTML語法中的圖片標簽：我們可以在頁面上嵌入一個0 Pixel圖片，該圖片默認對用戶不可見，當訪問該頁面顯示加載圖片時，會順帶發起一個Get請求到服務端，這個時候就會把參數傳給服務端。

Web Tracking使用步驟如下：

為Logstore打開Web Tracking標簽（Logstore默認不允許匿名寫，在使用前需要先開通Logstore的Web Tracking開關）
通過埋點方式向Logstore寫入數據，有三種選擇：

直接通過HTTP Get方式上報數據

curl --request GET "http://${project}.${sls-host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2"

通過嵌入HTML 下Image標簽，當頁面方式時自動上報數據

or


 
track_ua.gif除了將自定義的參數上傳外，在服務端還會將http頭中的UserAgent、referer也作為日志中的字段。

通過Java Script SDK 上報數據



var logger = new window.Tracker("${sls-host}","${project}","${logstore}");
logger.push("customer", "zhangsan");
logger.push("product", "iphone 6s");
logger.push("price", 5500);
logger.logger();

案例：內容多渠道推廣

當我們有一個新內容時（例如新功能、新活動、新游戲、新文章），作為運營人員總是迫不及待地希望能盡快傳達到用戶，因為這是獲取用戶的第一步、也是最重要的一步。

以游戲發行作為例子：

市場很大一筆費用進行游戲推廣，例如投放了1W次廣告
廣告成功加載的有2000人次，約占20%
其中點擊的有800人次
最終下載并注冊賬號試玩的往往少之又少

從以上可見，能夠準確、實時地獲得內容推廣有效性對于業務非常重要。為了打到整體推廣目標，運營人員往往會會挑選各個渠道來進行推廣，例如：

用戶站內信（Mail），官網博客（Blog），首頁文案（Banner等）
短信，用戶Email，傳單等
新浪微博，釘釘用戶群，微信公眾賬號，知乎論壇，今日頭條等新媒體

方案設計

我們日志服務中創建一個Logstore（例如叫：myclick），并開啟WebTracking功能
為需要宣傳的文檔（article=1001) 面對每個宣傳渠道增加一個標示，并生成Web Tracking標簽（以Img標簽為例），如下：

站內信渠道(mailDec)：

用戶郵箱渠道(email)：

其他更多渠道可以在from參數后加上，也可以在URL中加入更多需要采集的參數
將img標簽放置在宣傳內容中，就可以散布出去了，我們也可以去散步喝咖啡了

采集日志分析

在完成埋點采集后，我們使用日志服務LogSearch/Analytics 功能可以對海量日志數據進行實時查詢與分析。在結果分析可視化上，除自帶Dashboard外，還支持DataV、Grafana、Tableua等對接方式，我們這里做一些基本的演示：

以下是截止目前采集日志數據，我們可以在搜索框中輸入關鍵詞進行查詢：

也可以在查詢后輸入SQL進行秒級的實時分析并可視化：

除了在日志服務中分析外，

以下是我們對用戶點擊/閱讀日志的實時分析：
當前投放總流量與閱讀數

* | select count(1) as c

每個小時閱讀量的曲線

* | select count(1) as c, date_trunc("hour",from_unixtime(__time__)) as time group by time order by time desc limit 100000

每種渠道閱讀量的比例

* | select count(1) as c, f group by f desc

閱讀量來自哪些設備

* | select count_if(ua like "%Mac%")  as mac, count_if(ua like "%Windows%")  as win, count_if(ua like "%iPhone%")  as ios, count_if(ua like "%Android%")  as android

閱讀量來自哪些省市

* | select ip_to_province(__source__) as province, count(1) as c group by province order by c desc limit 100

更多字段和分析場景可以參見分析語法與最佳實踐

最終可以將這些實時數據配置到一個實時刷新Dashboard中，效果如下:

GPU云服務器云服務器 javascript打開頁面 javascript當前頁面巧用巧用云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51762.html

巧用 Img / JavaScript 采集頁面數據

摘要：日志服務提供就是為解決以上輕量級埋點采集場景而生，我們可以在分鐘時間內完成埋點和數據上報工作。服務功能包括實時采集與消費。摘要：當我們有一個新內容時（例如新功能、新活動、新游戲、新文章），作為運營人員總是迫不及待地希望能盡快傳達到用戶，因為這是獲取用戶的第一步、也是最重要的一步。點此查看原文:http://click.aliyun.com/m/40929/ 我們發送重要郵件時為...

WrBug 2019-08-22 14:01 評論0 收藏0
每日 30 秒 ? 巧用可視區域

簡介可視區域、頁面優化、DOM節點多、圖片懶加載、性能可視區域是一個前端優化經常出現的名詞，不管是顯示器、手機、平板它們的可視區域范圍都是有限。在這個有限可視區域區域里做到完美顯示和響應，而在這個區域外少做一些操作來減少渲染的壓力、網絡請求壓力。在每日 30 秒之對海量數據進行切割中的使用場景，我們就是利用了有限可視區域只渲染一部分 DOM 節點來減少頁面卡頓。既然可視區域 ...

DevYK 2019-08-23 15:57 評論0 收藏0
Translater.JS巧用HTML注釋翻譯頁面

摘要：這是一個利用注釋的頁面翻譯解決方案。對于少量的靜態頁面，這種解決方案顯得更簡單。它沒有依賴，壓縮只有只有。 translater.js showImg(https://jaywcjlove.github.io/sb/ico/npm.svg); showImg(http://jaywcjlove.github.io/sb/ico/gulp-build-with.svg); showImg...

tinna 2019-08-26 11:29 評論0 收藏0
讓前端監控數據采集更高效

摘要：如何在新的技術背景下讓前端數據采集工作更加完善高效，是本文討論的重點。具體來說，我們對前端的數據采集具體主要分為路由切換性能資源錯誤日志上報路由切換等前端技術的快速發展使單頁面應用盛行。隨著業務的快速發展，我們對生產環境下的問題感知能力越來越關注。作為距離用戶最近的一層，前端的表現是否可靠、穩定、好用，很大程度上決定著用戶對整個產品的體驗和感受。因此，對于前端的監控不容忽視。搭建一...

Half 2019-08-23 17:00 評論0 收藏0
CSS（一）偽元素的巧用

摘要：并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...

entner 2019-08-30 15:53 評論0 收藏0