巧用 Img / JavaScript 採集頁面數據

摘要： 當咱們有一個新內容時（例如新功能、新活動、新遊戲、新文章），做爲運營人員老是火燒眉毛地但願能儘快傳達到用戶，由於這是獲取用戶的第一步、也是最重要的一步。

點此查看原文: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標籤，當頁面方式時自動上報數據

<img src='http://${project}.${sls-host}/logstores/${logstore}/track.gif?APIVersion=0.6.0&key1=val1&key2=val2'/>
or
<img src=‘http://${project}.${sls-host}/logstores/${logstore}/track_ua.gif?APIVersion=0.6.0&key1=val1&key2=val2’/>

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

經過Java Script SDK 上報數據

<script type="text/javascript" src="loghub-tracking.js" async></script>

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)：
<img src="http://example.cn-hangzhou.lo...;from=mailDec&article=1001" alt="" title="">

<img src="http://example.cn-hangzhou.log.aliyuncs.com/logstores/myclick/track_ua.gif?APIVersion=0.6.0&from=aliyundoc&article=1001" alt="" title="">

用戶郵箱渠道(email)：

<img src="http://example.cn-hangzhou.log.aliyuncs.com/logstores/myclick/track_ua.gif?APIVersion=0.6.0&from=email&article=1001" alt="" title="">

其餘更多渠道能夠在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中，效果以下: