互聯(lián)網(wǎng)廣告展現(xiàn)系統(tǒng)

摘；；模塊具有獲取站點配置、返回物料等功能渲染模塊從檢索模塊獲取相關數(shù)據(jù)，負責渲染和推廣平臺支持站長自助配；；：互聯(lián)網(wǎng)；瀏覽器；渲染；；檢OneoftheimportantpillarsofInternetadvertisingrevenuesasanimportantpartoftheadvertisingmarket,butalsothecompany'sInternetisplayinganincreasinglylargeinfluencetomakebusinessmoreefficientflowofinformation,todevelopabroadermarketdemand.However,thetraditionalInternetadvertising,suchasbannerads,pop-upads,advertisingafixedposition,notenoughnewform,theinteractionisnotfriendlyenough,takeupmorespaceonthepageandthepoorinthesmallscreensofmobiledevicesexperience.Therefore,thedevelopmentofgooduserexperience,clickrates,adaptingmobileInternetadvertisingproducts,theInternetcompanyhasaveryimportantsignificance.Inthispaper,wedesignasetofimage-basedInternetadvertisingdisplaysystem.Thesystemobtainsimageinformationpagefeaturesandbrowserfingerprintsandotherinformationtoobtainthecorrespondingadvertisementdataandrendertheadsontherightpageimage.Thesystemincludesadrenderingmodule,aretrievalmoduleadvertising,advertisingplatformandothermajormodules.Advertisingretrievalmodulehavingtoobtainasiteconfigurationreturnsadvertisingmaterials,andotherfunctions;adrenderingmoduletoobtaintherelevantdatafromtheadretrievalmodule,responsiblefortheadrenderingandadvertisingmonitoring;advertisingself-serviceadvertisingplatformsupportWebmasterconfiguredtofacilitaterapidadvertiseEachmoduleofthesystemhasbeenalotofstabilityandusabilitytesting,validation:Internetadvertising;Browserfingerprint;Adrendering;Advertisingpromotion;Adversitingsearch目摘第1 緒 第2 相關理論與技 2.1精準投放技 瀏覽器 MVC模 第3章系統(tǒng)需求分 樣 第4章系統(tǒng)概要設 4.2.1檢索模 4.2.2渲染模 第5章系統(tǒng)詳細設計與實 5.1檢索模 5.2渲染模 Loader模 Render模 5.3推廣平 第6章系統(tǒng)測試與驗 6.1檢索模塊及渲染端測 第7章總結與展 7.1總 參考文 致 1章選題背景與意1.1.1投放技術及市場前互聯(lián)網(wǎng)由1969年國防部遠景研究規(guī)劃局ARPANET項目發(fā)展而來，最，告投放時與主往往需要。這個階段互聯(lián)網(wǎng)的溝通成本及，，第二階段主以及對的要求越來越高，他們希望有達到更，；，點擊率。例如，杭州某家旅游景區(qū)做的可以只展示給浙江地區(qū)的網(wǎng)民面的。利用人們不同區(qū)域、不同時間段的不同需求而投放的針對；，，第三階段，隨著網(wǎng)絡的普及和網(wǎng)民數(shù)量的急劇上升系統(tǒng)迎來大數(shù)據(jù)時，，的互聯(lián)網(wǎng)[3]。這個階段，交易平臺ADX（AdExchange）和需求方平臺DSP（DemandSidePlatform）在龐大的互聯(lián)網(wǎng)需求下，逐漸發(fā)展壯大起來?，F(xiàn)階段互聯(lián)網(wǎng)的生態(tài)已經(jīng)比較完善主與無需直接溝通，不同樣式，要包括精準投放技術和復雜web應用的架構設計。精準度的提高主要加準確[5]。在互聯(lián)網(wǎng)web前端開發(fā)上，會發(fā)現(xiàn)交互以及樣式不斷迭代更新，同時需要考慮在PC瀏覽器和移動瀏覽器上的適配，結構越來越復雜。。統(tǒng)主要基于，這點與其他互聯(lián)網(wǎng)顯著不同展現(xiàn)系統(tǒng)需要支持站點。 和用戶之互聯(lián)網(wǎng)投放技術的國內(nèi)外研究現(xiàn)利用來定位用戶，但保存在瀏覽器端，其大小有一定限制，會被用戶和瀏覽器清理。在被清理后，再次植入就會發(fā)生變化，所以這種方式本基本就可以用系統(tǒng)生成的Baiduid唯一標識一個用戶。同時公司利用搜索應一個用戶的、、關注點。通過Baiduid和搜索記錄、網(wǎng)頁瀏覽記錄結 ，這幫助用戶過濾了他們不感的也只針對感的人群展現(xiàn)，幫助，后用戶看到的要少4%，同時點擊的可能性要高32%[11]。主要研究內(nèi)、、及的技術進行調(diào)研和簡單介紹，并對索模塊渲染模塊推廣平臺、、對系統(tǒng)所涉及到精準投放技術、復雜web應用的架構設計等技術章節(jié)組織結第二章相關理論和技術研究。重點對展現(xiàn)系統(tǒng)中涉及到的技術進行介第三章系統(tǒng)需求分析?？傮w分析系統(tǒng)需求，明確功能需求、非功能需求以、、第五章系統(tǒng)詳細設計與實現(xiàn)主要是對檢索模塊渲染模塊、、第六章系統(tǒng)測試與驗證。主要測試檢索端的服務以及展示效果和2章web2.1精準投放技，的數(shù)量，也就是流量流量拓展的由業(yè)務人員完成；另一方面是提高廣，用戶并要用唯一確定的ID來標記該用戶目前主要使用瀏覽器標記用戶權重調(diào)整對于系統(tǒng)來說的數(shù)和競價是可見的，（使用了link，一般資源文件，如css樣式文件），另一種是頁面文件的、與的、與的、與應用程序的等[13]。web，url與頁面特征的urlurl的，瀏覽器人的受遺傳和生活環(huán)境共同影響，由于重復率極小，大約150億分之一，也就是說可以唯一確定一個人。瀏覽器技術能生成類似于人類的結果，能幫助系統(tǒng)去唯一標識一個瀏覽器，或者說標記一位用戶在使用HTTP協(xié)議的過程中瀏覽器按照HTTP協(xié)議會把瀏覽器的串作為該瀏覽器的。如圖2.4所示：2.1生成瀏覽器瀏覽器技術的一個技術難點是應對瀏覽器的變化17]。人的在正常情況下的變化很少，而瀏覽器不同。比如，用戶會更換或新增瀏覽器插件，做調(diào)整分辨率大小等操作這樣新生成的瀏覽器與之前的不同對于調(diào)整過相關瀏覽器設置的用戶，可以簡單處理，認為用戶改變了自己以往的瀏覽偏好，一定程度上可視為一個新的用戶。復雜web應用的架構設計方傳統(tǒng)互聯(lián)網(wǎng)端渲染的模塊普遍比較簡單，例如固定大小的推廣廣告如下圖2.2，渲染好的html如圖2.3。圖2.2推廣示圖2.3html示，上圖中的渲染模塊的投放代碼主要任務是在頁面固定大小的位置插入文設計的互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)區(qū)別一般互聯(lián)網(wǎng)與相關的特殊位和特殊的交互方式，無法直接仿照傳統(tǒng)渲染模塊直接完成渲染模塊需設計一套完善的渲染模塊架構，保證的正常渲染以及。，但隨著瀏覽器和網(wǎng)絡性能的提升，web應用的功能越來越強大，隨之而來的是webJavaScript語管理工具，能夠良好的管理js文件之間的依賴管理，填補JavaScript這個語言模MVCWebWeb發(fā)展逐漸細分出來的領域。早期前端開發(fā)比較簡

信各種宣傳頁面html5面小游戲等等,前端代碼的邏輯也越來越復雜近五六年以來,各種尺寸的智能和平板電腦層出不窮，越來越多的人使用移動設備來互聯(lián)網(wǎng)這就給前端代碼的跨平臺性復用性易性帶來了更高的要求如果有跨平臺的復用性好且易的框架的話可以大大提高開發(fā)效率因此前端開發(fā)人員也在不停地探索C模型在Web開發(fā)中應用廣泛，實現(xiàn)了展示模塊和數(shù)據(jù)邏輯處理模塊的分離20]。因此很多公司開始借鑒C在后端的運用，建立前端C架構，代表的框架有rS，BackBon21。MVC的相關概念。MVCmodel、view、controller。M排第一，應用當中涉及到的所有業(yè)務對象都應盡可能抽像成Model。以一個、、html表單表單為例子，這個model的屬性、、

事件表單檢查事件，表單發(fā)送事件等等；VCM較弱，V代表渲染用到的視圖，即為呈現(xiàn)給用戶的界面，就像上面提到的表單；C代表控制器，modelviewmodelview以及使用哪些modelview。總得來說，MVCmodel,view,controller三個方面來描述你的應用，并通過三者的交互，使應用功能得以MVC開發(fā)規(guī)范，也便于多人協(xié)作開發(fā)。jquery.smustache.js(html模板)，less（css預處理器）等等。

dom操作chrome瀏覽器，測試界面渲染情況項目上線需要考慮減少頁面http請求，壓縮文件能加快載入速度，同時代碼）本章小。本章對本文設計的系統(tǒng)涉及的理論和技術的情況進行了簡單闡述精準投放技術結合了頁面特征提取用戶特征提取以及瀏覽器等技術通過這些技術提高的針對性進而提高的點擊率復雜b應用的架構設計考慮到本文設計的系統(tǒng)區(qū)別于傳統(tǒng)的特點，結合了依賴管理、C模式和開發(fā)輔助工具，保證了渲染模塊的開發(fā)、測試以及上線。。3項目概。片上渲染的變現(xiàn)方案站長在網(wǎng)頁中插入投放代碼，在頁面載入到發(fā)送日志推廣平臺是提供給站長的自選樣式并自助獲取。。、、投放代碼的工具檢索模塊渲染模塊推廣平臺共同完成。、、，展現(xiàn)系統(tǒng)的主要功能。本文主要對渲染端做詳細敘述檢索端大量復用，可行性分，息發(fā)送給交易平臺，就可得到合適的數(shù)據(jù)。得到之后展現(xiàn)系 ，系統(tǒng)功能需求分3.1。3.1用例互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)：在不影響網(wǎng)民用戶體驗的情況下，為提供互聯(lián)網(wǎng)頁面，同時需要保證站長的收入和主的推廣效果。網(wǎng)民：瀏覽投放了該互聯(lián)網(wǎng)的的網(wǎng)民。：投放了該互聯(lián)網(wǎng)的。主為宣傳推廣服務或商品向提供素材，委托為其進行推廣。站、主面的利益，盡可能地最大化總體利益。、、展現(xiàn)系統(tǒng)包括檢索模塊渲染模塊推廣平臺，其中檢索模塊主要復用公司模塊由BFP模塊和Nginx組成，渲染模塊由Loader子模塊、Render子模塊以及輔助模塊構成。系統(tǒng)模塊劃分如下圖所示。、、圖3.2展現(xiàn)系統(tǒng)模塊實際線上檢索的過程中，參與的模塊較多，流程比較復雜。先通過一次簡化版的檢索流程，設計出完整的展現(xiàn)系統(tǒng)序列圖，序列圖如圖3.3圖3.3檢索簡化序列1）渲染模要分為loader和render兩個模塊，loader需要分析頁面以獲取合適、并發(fā)出請求獲取內(nèi)容以及最后包裝數(shù)據(jù)和信息，render需要渲染并數(shù)據(jù)2）檢索模于該模塊使 理站點的配置；以及向ADX請求、處理ADX返回的并返回給渲由于時序圖對渲染端的功能需求描述不夠詳細下圖3.4是渲染模塊Loader

圖3.4渲染模塊劃；Loader子模塊的主要需求是是為渲染提供數(shù)據(jù)。渲染由于在上進行渲染，Loader子模塊需要一個模塊完成進行查找功能渲染也需要用到從檢索端獲取的數(shù)據(jù)，這就需要Loader子模塊創(chuàng)建一個獲取后端數(shù)據(jù)的模塊除了上面這兩個模塊建議創(chuàng)建一個新的模塊處理數(shù)據(jù)和數(shù)據(jù)，RenderapiRender模；RenderRenderMVC的設計模式，便于后期的開發(fā)。其子模html和css文件進行分離，便于文件的復用；事件綁定和需要考慮擴展性，建議提供擴展字段便于后期新事件和新的添加。，最后還有推廣平臺，功能相對獨立，該平臺主要為站長提供投放代碼服務。大致流程是站長先在的上先并申請一個廣告位id（稱為tu），再在推廣平臺上選擇樣式，最終獲取到投放代碼，該在網(wǎng)頁中的上進行渲染，目前有以下幾種主要產(chǎn)品形式貼片PC貼片：頁面載入完成第一次展現(xiàn)時，隱藏在底部的貼片廣告會自動展開，持續(xù)展現(xiàn)5s然后再收起隱藏，之后鼠標移入展現(xiàn)5s，鼠標移出立即收起隱藏，線上實例如圖3.4所示。3.4PC移動貼片：由于移動設備上交互主要以觸摸、點擊為主，和PC瀏覽器告載入完成后就顯示在底部，一直展現(xiàn)，線上例子如下圖。3.5iconPCicon樣式：當鼠標hover到上時，上便顯現(xiàn)一個閃動的“+”號，移動到這個符號后，便在符號下方展現(xiàn)內(nèi)容，鼠標離開符號或者內(nèi)容區(qū)域，內(nèi)容隱藏，符號也同時隱藏。PC上的實例如圖3.6所示3.6PCicon樣式移動icon樣式：移動icon的交互也比較簡單，一直展現(xiàn)在右上角，示3.7。為了獲取更大的收益，呈現(xiàn)出更好的設計，提供更友好的交互，之后將會有的新樣式開發(fā)上線。由于樣式各不相同，渲染要到的數(shù)據(jù)也存在不同，檢索模塊需要根據(jù)樣式返回對應格式的數(shù)據(jù)，這3.7移動icon系統(tǒng)性能需求分 的響應時發(fā)送請求到后端返回的時間要在0.2秒左右，否則會影響用戶體驗。 其他需JSON。拓展性：樣式需求變更頻繁，需要設計渲染模塊擴展性更強瀏覽器。本章小 4、本章主要介紹互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)的概要設計按照整個展現(xiàn)系統(tǒng)的架構及各模塊功能安排，介紹檢索模塊渲染模塊以及推廣平臺這三個子模塊以及這三個子系統(tǒng)的幾個子模塊安排其中詳細介紹渲染模塊，簡單介紹推廣平臺檢索模塊由于復用公司已有模塊故只做簡略介紹。、系統(tǒng)概整個檢索系統(tǒng)的架構如圖4.1所示圖4.1檢索系統(tǒng)整體架構、整個系統(tǒng)可以分做5個大部分，分別是渲染模塊、推廣平臺檢索模塊、交易平臺ADX和需求方平臺DSP，后三個模塊實際開發(fā)中主要當初、系統(tǒng)結構設渲染模塊的請求給BFP模塊。BFP模塊的功能包括返回站點配置和處理數(shù)：：信息傳給ADX，ADX根據(jù)頁面特征和用戶特征請求DSP，通過競價得到并4.3圖4.3系統(tǒng)子系統(tǒng)劃渲染模塊是展現(xiàn)系統(tǒng)的重要組成部分主要由Loader模塊Render、Loader子模塊包含查找子模塊請求子模塊、loaderApi子模塊。在需求上查找子模塊需要先開始按照一定的算法查找頁面中適合展現(xiàn)、查找結束后在有適合出的時將控制權轉交到請求子模塊上；請求子模塊需要向檢索端發(fā)出請求；獲取到有效的數(shù)據(jù)后，loaderApiapiRenderapi包含處理過的信息以及用于出的的信息。Renderwidgetimpl子模塊，為了于公司以往項目架構統(tǒng)一沒有像常用的MVC模式分出清晰的model、viewcontroller。其中widget似于MVC中的modelview的結合impl需要獲取loaderApi并調(diào)用widget子MVCcontroller。id，接著自選一種或者多種樣式，最終推廣平臺根據(jù)選擇結果產(chǎn)生對應的通信協(xié)議設整個展現(xiàn)系統(tǒng)目前主要用到HTTP協(xié)議渲染端與檢索端使用際使用是通過JSNOP的方式進行解決跨域問題[23]。檢索端與ADX，ADXDSP之間通信復用公司模塊，暫不關注其通信過程。本章小劃分為檢索模塊渲染模塊和55.1檢索模表5.1第一次調(diào)用檢索端的字序 字 說 位id（計費相關 請求配置，默認為 頁面中的個 loader5.2序 字 說 位 請求配置，默認為 頁面中的個3loader4URL地址5326寬7高第二次請求，檢索端和管理ADX接口，返回數(shù)據(jù)協(xié)議GET方式調(diào)用檢索端用到的具體字段5.2渲染模Loader子模塊開始分析頁面并向檢索端發(fā)出請求包裝信息和數(shù)據(jù)；然后Render模塊根據(jù)Loader模塊提供的數(shù)據(jù)，在對應的上渲染以LoaderLoader主要包含以下幾個主要功能?？紤]到互聯(lián)網(wǎng)投放在大量站點上，投放js代碼處在不同的下加上服務器一般都部署在公司下，瀏覽器跨域問題無法避免，因此Loader請求檢索模塊的方式都通過jsonLoader模塊主要類圖5.1PC端的Loader和移動端的Loader，實線表示繼承，虛線表示使用。簡單介紹loader模塊各個類之間的關系，CommerLoader類作為loader模塊的類繼承了BaseLoader類包裝了Loader模塊常用的一些方法BaseLoader類中具體實現(xiàn)了請求檢索模塊的主要邏輯和部分查找頁面、獲取數(shù)據(jù)的邏輯，繼承了Loader類；Loader類做了主要的頁面查找的邏輯，是Loader模塊的基類，同時Loader類也調(diào)用了LoaderApi，進行數(shù)據(jù)和數(shù)據(jù)的包裝，一邊提供給Render模塊使用。移動端的LoaderPCloader查找并頁a)延遲加b)類似slide的切換（分手動和自動兩種c)被透明層遮擋，無法觸發(fā)相應鼠標事件（在此稱為d)onload目前針對這些問題，搜索的算法設計了如圖5.2，搜索的流程比在查找到符合條件的5.1Loader模塊主要類圖5.2查找算5.3Render模塊主要類5.1。和渲染js，主要的相關請求字段同表5.2。提供LoaderApi給render使在完成前兩步處理之后，loaderRender模塊調(diào)用，便于Render模塊的對數(shù)據(jù)的使用。目前版本的LoaderApi有以下這5.5LoaderApi目前已有接0Loader1綁定事件事件23獲取的位置和高4renderjs6獲取具體數(shù)7Render及，Render模塊的主要類圖如圖5.3，類圖的結構于Loader模塊比1.繪代碼為了與現(xiàn)有架構兼容，主要分為widget和impl兩部分，結構上MVCwidgetmodelview、implcontroller。RenderLoaderApi之后，便開始繪制。5.6implwidget主要功能序號字 說 包含了model和view，集合了通用的 implLoaderApi個div的樣式設置canvas位置于對應的之上作為渲染最外層的domimplcontrollerLoaderApiwidget實例化的widget渲染出html，插入canvasdiv，載入css，綁定2.日（優(yōu)化中廢棄ad.plugin.imageplus.Log中。如widget中執(zhí)行如下代碼即可：me.trigger(ui.events.SEND_LOG,{'actionid':3,'attach':'logcontent'});（日志具體實現(xiàn)是通過請求一張后端服務器上的一張1px*1px的小，在服nginx日志上留下記錄，后期在分析日志得出相關數(shù)據(jù)。日志的主要5.7所示。圖5.6日志主要構5.7目前主要日志接110220物料計費點33044058時間69js 所有文件的依賴關系，由closurelibrary統(tǒng)一寫入一個標記依賴的jsonCSS預處理：實際開發(fā)中，為了方便樣式的書寫使用了Less。Less屬于stylusCSS的編寫和維基礎工具庫：為了方便dom操作，項目使用了內(nèi)部的tangram.js比較類jquery；為了方便模板渲染使用了，mustache.jshtml的渲染。webnodejser-server，使用該模塊可以在本機開啟一個簡單的http服務器便于的在瀏覽器代碼調(diào)試：代碼邏輯上的測試，主要使用chromedeveloptool。調(diào)試的時候主要看網(wǎng)絡請求狀況、jshtml的渲染結果。代碼壓縮：上線之前需要進行壓縮js，已達到較少http請求的壓力和防止源碼中的商業(yè)信息被解讀。壓縮使用了closurelibrary文件上線實際上線需要將壓縮好的js文件上傳到CDN服務上考慮到瀏覽器會緩存js以及js的更新迭代，需要設置js地址定時產(chǎn)生變化。如 后綴的cachenodejs的一個模塊edp，edpjs文件。實際上線如下使用：edpbosapp/main.min.jsbos://cae-pub- 推廣平圖 推廣平臺前端流程推廣平臺主要目的供站長進行自助 投放，提供站長自 5.4所示。類型分為pc和移動，首先站長先根據(jù)類型選擇不同的頁面；選擇完成后，輸入位id；輸入后，推廣平臺會檢測位id是否有效，有效的下，則提示站長更換位id。本章小本章主要介紹了檢索模塊推廣平臺和渲染模塊的詳細設計和實現(xiàn)。檢索模塊主要復用了公司原有模塊，渲染模塊包含Loader子模LoaderRender兩個子模塊構成，Loader進行頁面，查找數(shù)據(jù)請求，并包裝信息和數(shù)據(jù)；Render渲染，并廣，66.1檢索模塊及渲染端測pc設備和移動設備的硬件參數(shù)都較pc流量測試和移動流量測試，pc端測pc端樣式有多種分類需對各個樣式的進試并檢查渲染icon使用chrome瀏覽器，打開測試網(wǎng)頁，如 3/67487.html，并打開chromedeveloptool查看請求信息，Loader模塊第一次請求獲取站點配置的參數(shù)和響應數(shù)據(jù)如圖6.1和圖6.2所示。6.1Loader模塊第一次請求參6.2Loader模塊檢索第一次請求響Loader6.36.4圖6.3Loader模塊第二次請求的請求參圖6.4Loader模塊第二次請求返回數(shù)最終的展現(xiàn)如圖6.7所示，并測試觸發(fā)展現(xiàn)，關閉以及點圖 icon樣式6.66.7貼片樣式測試方法基本同icon樣式，都是先查看兩次請求的信息，再查看渲染情況以及交互。最終展現(xiàn)如圖6.8所示。豎條樣式測試方法同icon樣式，最終展現(xiàn)如圖6.9所示移動流量測需要在不同網(wǎng)絡環(huán)境下和不同瀏覽設備上進試。移動貼片6.8移動貼片樣icon

6.9移動貼片樣測試主要針對主要的幾個日志，實際較多，如展現(xiàn)、展現(xiàn)日志6.10計費日志（actioned6.11點擊后生成計費隱藏日志（actioned圖6.12隱藏日推廣平臺的測推廣平臺不參與檢索和渲染，主要為站長提供自助投放服務，pc6.15所示：6.13pc投放獲取投放代。由圖可知站長獲取到投放代碼，且代碼已到剪貼板上符合預。id6.16所示。本章小本章主要對系統(tǒng)進行功能測試以及驗證。檢索模塊，通過請求返回的數(shù)據(jù)情況，驗證其功能；渲染端，通過請求，頁面查找，渲6.16選擇移動投放獲取投放代7本章主要總結的行文結構并展望本文設計的互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)在未 總本文設計的互聯(lián)網(wǎng)展現(xiàn)系統(tǒng)結合了精準投放技術復雜web項目架構設計，達到了精準推送，樣式精致，交互新穎，用戶體驗