摘要： 當(dāng)我們有一個(gè)新內(nèi)容時(shí)（例如新功能、新活動(dòng)、新游戲、新文章），作為運(yùn)營人員總是迫不及待地希望能盡快傳達(dá)到用戶，因?yàn)檫@是獲取用戶的第一步、也是最重要的一步。

點(diǎn)此查看原文:http://click.aliyun.com/m/40929/

我們發(fā)送重要郵件時(shí)為了確認(rèn)對方已讀，都會(huì)在郵件中設(shè)置一個(gè)“讀取回執(zhí)”標(biāo)簽以確定對方時(shí)候讀信。

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

發(fā)送傳單時(shí)，確保對方已讀
推廣網(wǎng)頁時(shí)，多少用戶做了點(diǎn)擊
移動(dòng)App運(yùn)營活動(dòng)頁面，分析用戶訪問情況
對這類個(gè)性化的采集與統(tǒng)計(jì)，針對站長CNZZ、百度統(tǒng)計(jì)，移動(dòng)的Talking Data、友盟等都無法勝任。主要難點(diǎn)在于：

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

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

方案簡介

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

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

采集端介紹

日志服務(wù)提供30+數(shù)據(jù)采集方式，針對服務(wù)器、移動(dòng)端、嵌入式設(shè)備及各種開發(fā)語言都提供完整的解決方案，比較典型有：

Logtail：針對X86服務(wù)器設(shè)計(jì)Agent
Android/iOS：針對移動(dòng)端SDK
Producer Library：面向受限CPU/內(nèi)存 智能設(shè)備

這里介紹的輕量級采集方案（Web Tracking），該方案只需一個(gè)http get請求即可將數(shù)據(jù)傳輸至日志服務(wù)Logstore端，適應(yīng)各種無需任何驗(yàn)證的靜態(tài)網(wǎng)頁，廣告投放，宣傳資料，移動(dòng)端數(shù)據(jù)采集。相比其他日志采集方案，特點(diǎn)如下：

WebTracking接入步驟

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

Web Tracking使用步驟如下：

為Logstore打開Web Tracking標(biāo)簽（Logstore默認(rèn)不允許匿名寫，在使用前需要先開通Logstore的Web Tracking開關(guān)）
通過埋點(diǎn)方式向Logstore寫入數(shù)據(jù)，有三種選擇：

直接通過HTTP Get方式上報(bào)數(shù)據(jù)

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

通過嵌入HTML 下Image標(biāo)簽，當(dāng)頁面方式時(shí)自動(dòng)上報(bào)數(shù)據(jù)

<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除了將自定義的參數(shù)上傳外，在服務(wù)端還會(huì)將http頭中的UserAgent、referer也作為日志中的字段。

通過Java Script SDK 上報(bào)數(shù)據(jù)

<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();

案例：內(nèi)容多渠道推廣

當(dāng)我們有一個(gè)新內(nèi)容時(shí)（例如新功能、新活動(dòng)、新游戲、新文章），作為運(yùn)營人員總是迫不及待地希望能盡快傳達(dá)到用戶，因?yàn)檫@是獲取用戶的第一步、也是最重要的一步。

以游戲發(fā)行作為例子：

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

從以上可見，能夠準(zhǔn)確、實(shí)時(shí)地獲得內(nèi)容推廣有效性對于業(yè)務(wù)非常重要。為了打到整體推廣目標(biāo)，運(yùn)營人員往往會(huì)會(huì)挑選各個(gè)渠道來進(jìn)行推廣，例如：

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

方案設(shè)計(jì)

我們?nèi)罩痉?wù)中創(chuàng)建一個(gè)Logstore（例如叫：myclick），并開啟WebTracking功能
為需要宣傳的文檔（article=1001) 面對每個(gè)宣傳渠道增加一個(gè)標(biāo)示，并生成Web Tracking標(biāo)簽（以Img標(biāo)簽為例），如下：

站內(nèi)信渠道(mailDec)：

<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參數(shù)后加上，也可以在URL中加入更多需要采集的參數(shù)
將img標(biāo)簽放置在宣傳內(nèi)容中，就可以散布出去了，我們也可以去散步喝咖啡了

采集日志分析

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

以下是截止目前采集日志數(shù)據(jù)，我們可以在搜索框中輸入關(guān)鍵詞進(jìn)行查詢：

也可以在查詢后輸入SQL進(jìn)行秒級的實(shí)時(shí)分析并可視化：

除了在日志服務(wù)中分析外，

以下是我們對用戶點(diǎn)擊/閱讀日志的實(shí)時(shí)分析：
當(dāng)前投放總流量與閱讀數(shù)

* | select count(1) as c

每個(gè)小時(shí)閱讀量的曲線

* | 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

閱讀量來自哪些設(shè)備

* | 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

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

最終可以將這些實(shí)時(shí)數(shù)據(jù)配置到一個(gè)實(shí)時(shí)刷新Dashboard中，效果如下:

總結(jié)

以上是生活随笔為你收集整理的巧用 Img / JavaScript 采集页面数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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