關(guān)于熱圖

在網(wǎng)站分析行業(yè)中，網(wǎng)站熱圖能夠很好的反應(yīng)用戶在網(wǎng)站的操作行為，具體分析用戶的喜好，對(duì)網(wǎng)站進(jìn)行針對(duì)性的優(yōu)化，一個(gè)熱圖的例子（來(lái)源于ptengine）

上圖中能很清晰的看到用戶關(guān)注點(diǎn)在那，我們不關(guān)注產(chǎn)品中熱圖的功能如何，本篇文章就熱圖的實(shí)現(xiàn)做一下簡(jiǎn)單的分析和總結(jié)。

熱圖主流的實(shí)現(xiàn)方式

一般實(shí)現(xiàn)熱圖顯示需要經(jīng)過(guò)如下階段：
1.獲取網(wǎng)站頁(yè)面
2.獲取經(jīng)過(guò)處理后的用戶數(shù)據(jù)
3.繪制熱圖
 本篇主要聚焦于階段1來(lái)詳細(xì)的介紹一下主流的在熱圖中獲取網(wǎng)站頁(yè)面的實(shí)現(xiàn)方式
4.使用iframe直接嵌入用戶網(wǎng)站
5.抓取用戶頁(yè)面保存到本地，通過(guò)iframe嵌入本地資源（所謂本地資源這里認(rèn)為是分析工具這一端）

兩種方式各有各的優(yōu)缺點(diǎn)

首先第一種直接嵌入用戶網(wǎng)站，這個(gè)有一定的限制條件，比如如果用戶網(wǎng)站為了防止iframe劫持，不允許iframe嵌套（設(shè)置meta X-FRAME-OPTIONS 為sameorgin 或者直接設(shè)置http header ，甚至直接通過(guò)js來(lái)控制if(window.top !== window.self){ window.top.location = window.location;} ），這種情況下就需要客戶網(wǎng)站做一部分工作才可以被分析工具的iframe加載，使用起來(lái)不一定那么方便，因?yàn)椴⒉皇撬械男枰獧z測(cè)分析的網(wǎng)站用戶都可以管理網(wǎng)站的。

第二種方式，直接抓取網(wǎng)站頁(yè)面到本地服務(wù)器，然后瀏覽的是本機(jī)服務(wù)器上抓取的頁(yè)面，這種情況下頁(yè)面已經(jīng)過(guò)來(lái)了，我們就可以為所欲為了，首先我們繞過(guò)了X-FRAME-OPTIONS 為sameorgin的問(wèn)題，只需要解決js控制的問(wèn)題，對(duì)于抓取的頁(yè)面來(lái)說(shuō)，我們可以通過(guò)特殊的對(duì)應(yīng)來(lái)處理（比如移除對(duì)應(yīng)的js控制，或者添加我們自己的js）；但是這種方式也有很多的不足：1、無(wú)法抓取spa頁(yè)面，無(wú)法抓取需要用戶登錄授權(quán)的頁(yè)面，無(wú)法抓取用戶設(shè)置了白明白的頁(yè)面等等。

兩種方式都存在https 和 http資源由于同源策略引起的另一個(gè)問(wèn)題，https站無(wú)法加載http資源，所以如果為了最好的兼容性，熱圖分析工具需要被應(yīng)用http協(xié)議，當(dāng)然具體可以根據(jù)訪問(wèn)的客戶網(wǎng)站而具體分站優(yōu)化。

抓取網(wǎng)站頁(yè)面如何優(yōu)化

這里我們針對(duì)抓取網(wǎng)站頁(yè)面遇到的問(wèn)題基于puppeteer做一些優(yōu)化，提高抓取成功的概率，主要優(yōu)化以下兩種頁(yè)面：

1.spa頁(yè)面

spa頁(yè)面在當(dāng)前頁(yè)算是主流了，但是它總所周知的是其對(duì)搜索引擎的不友好；通常的頁(yè)面抓取程序其實(shí)就是一個(gè)簡(jiǎn)單的爬蟲(chóng)，其過(guò)程通常都是發(fā)起一個(gè)http get 請(qǐng)求到用戶網(wǎng)站（應(yīng)該是用戶網(wǎng)站服務(wù)器）。這種抓取方式本身就會(huì)有問(wèn)題問(wèn)題，首先，直接請(qǐng)求的是用戶服務(wù)器，用戶服務(wù)器對(duì)非瀏覽器的agent 應(yīng)該會(huì)有很多限制，需要繞過(guò)處理；其次，請(qǐng)求返回的是原始內(nèi)容，需要在瀏覽器中通過(guò)js渲染的部分無(wú)法獲?。ó?dāng)然，在iframe嵌入后，js執(zhí)行還是會(huì)再一定程度上彌補(bǔ)這個(gè)問(wèn)題），最后如果頁(yè)面是spa頁(yè)面，那么此時(shí)獲取的只是模板，在熱圖中顯示效果非常不友好。

針對(duì)這種情況，如果基于puppeteer來(lái)做，流程就變成了

puppeteer啟動(dòng)瀏覽器打開(kāi)用戶網(wǎng)站-->頁(yè)面渲染-->返回渲染后結(jié)果，簡(jiǎn)單的用偽代碼實(shí)現(xiàn)如下：

const puppeteer = require('puppeteer');

async getHtml = (url) =>{
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  return await page.content();
}

這樣我們拿到的內(nèi)容就是渲染后的內(nèi)容，無(wú)論頁(yè)面的渲染方式如何（客戶端渲染抑或服務(wù)端）

需要登錄的頁(yè)面

對(duì)于需要登錄頁(yè)面其實(shí)分為多種情況：

需要登錄才可以查看頁(yè)面，如果沒(méi)有登錄，則跳轉(zhuǎn)到login頁(yè)面（各種管理系統(tǒng)）

對(duì)于這種類(lèi)型的頁(yè)面我們需要做的就是模擬登錄，所謂模擬登錄就是讓瀏覽器去登錄，這里需要用戶提供對(duì)應(yīng)網(wǎng)站的用戶名和密碼，然后我們走如下的流程：

訪問(wèn)用戶網(wǎng)站-->用戶網(wǎng)站檢測(cè)到未登錄跳轉(zhuǎn)到login-->puppeteer控制瀏覽器自動(dòng)登錄后跳轉(zhuǎn)到真正需要抓取的頁(yè)面，可用如下偽代碼來(lái)說(shuō)明：

const puppeteer = require("puppeteer");
async autoLogin =(url)=>{
   const browser = await puppeteer.launch();
   const page =await browser.newPage();
   await page.goto(url);
   await page.waitForNavigation();

   //登錄
   await page.type('#username',"用戶提供的用戶名");
   await page.type('#password','用戶提供的密碼');

   await page.click('#btn_login');

  //頁(yè)面登錄成功后，需要保證redirect 跳轉(zhuǎn)到請(qǐng)求的頁(yè)面
   await page.waitForNavigation();

   return await page.content();
}

登錄與否都可以查看頁(yè)面，只是登錄后看到內(nèi)容會(huì)所有不同 （各種電商或者portal頁(yè)面）

這種情況處理會(huì)比較簡(jiǎn)單一些，可以簡(jiǎn)單的認(rèn)為是如下步驟：

通過(guò)puppeteer啟動(dòng)瀏覽器打開(kāi)請(qǐng)求頁(yè)面-->點(diǎn)擊登錄按鈕-->輸入用戶名和密碼登錄 -->重新加載頁(yè)面

基本代碼如下圖：

const puppeteer = require("puppeteer");
async autoLoginV2 =(url)=>{
   const browser = await puppeteer.launch();
   const page =await browser.newPage();
   await page.goto(url);

   await page.click('#btn_show_login');

   //登錄
   await page.type('#username',"用戶提供的用戶名");
   await page.type('#password','用戶提供的密碼');

   await page.click('#btn_login');

  //頁(yè)面登錄成功后，是否需要reload 根據(jù)實(shí)際情況來(lái)確定
   await page.reload();

   return await page.content();
}

總結(jié)

明天總結(jié)吧，今天下班了。

補(bǔ)充（還昨天的債）：基于puppeteer雖然可以很友好的抓取頁(yè)面內(nèi)容，但是也存在這很多的局限

1.抓取的內(nèi)容為渲染后的原始html，即資源路徑（css、image、javascript）等都是相對(duì)路徑，保存到本地后無(wú)法正常顯示，需要特殊處理（js不需要特殊處理，甚至可以移除，因?yàn)殇秩镜慕Y(jié)構(gòu)已經(jīng)完成）

2.通過(guò)puppeteer抓取頁(yè)面性能會(huì)比直接http get 性能會(huì)差一些，因?yàn)槎嗔虽秩镜倪^(guò)程

3.同樣無(wú)法保證頁(yè)面的完整性，只是很大的提高了完整的概率，雖然通過(guò)page對(duì)象提供的各種wait 方法能夠解決這個(gè)問(wèn)題，但是網(wǎng)站不同，處理方式就會(huì)不同，無(wú)法復(fù)用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論