互联网广告展现系统

摘；；模块具有获取站点配置、返回物料等功能渲染模块从检索模块获取相关数据，负责渲染和推广平台支持站长自助配；；：互联网；浏览器；渲染；；检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章系统需求分 样 第4章系统概要设 4.2.1检索模 4.2.2渲染模 第5章系统详细设计与实 5.1检索模 5.2渲染模 Loader模 Render模 5.3推广平 第6章系统测试与验 6.1检索模块及渲染端测 第7章总结与展 7.1总 参考文 致 1章选题背景与意1.1.1投放技术及市场前互联网由1969年国防部远景研究规划局ARPANET项目发展而来，最，告投放时与主往往需要。这个阶段互联网的沟通成本及，，第二阶段主以及对的要求越来越高，他们希望有达到更，；，点击率。例如，杭州某家旅游景区做的可以只展示给浙江地区的网民面的。利用人们不同区域、不同时间段的不同需求而投放的针对；，，第三阶段，随着网络的普及和网民数量的急剧上升系统迎来大数据时，，的互联网[3]。这个阶段，交易平台ADX（AdExchange）和需求方平台DSP（DemandSidePlatform）在庞大的互联网需求下，逐渐发展壮大起来。现阶段互联网的生态已经比较完善主与无需直接沟通，不同样式，要包括精准投放技术和复杂web应用的架构设计。精准度的提高主要加准确[5]。在互联网web前端开发上，会发现交互以及样式不断迭代更新，同时需要考虑在PC浏览器和移动浏览器上的适配，结构越来越复杂。。统主要基于，这点与其他互联网显著不同展现系统需要支持站点。 和用户之互联网投放技术的国内外研究现利用来定位用户，但保存在浏览器端，其大小有一定限制，会被用户和浏览器清理。在被清理后，再次植入就会发生变化，所以这种方式本基本就可以用系统生成的Baiduid唯一标识一个用户。同时公司利用搜索应一个用户的、、关注点。通过Baiduid和搜索记录、网页浏览记录结 ，这帮助用户过滤了他们不感的也只针对感的人群展现，帮助，后用户看到的要少4%，同时点击的可能性要高32%[11]。主要研究内、、及的技术进行调研和简单介绍，并对索模块渲染模块推广平台、、对系统所涉及到精准投放技术、复杂web应用的架构设计等技术章节组织结第二章相关理论和技术研究。重点对展现系统中涉及到的技术进行介第三章系统需求分析。总体分析系统需求，明确功能需求、非功能需求以、、第五章系统详细设计与实现主要是对检索模块渲染模块、、第六章系统测试与验证。主要测试检索端的服务以及展示效果和2章web2.1精准投放技，的数量，也就是流量流量拓展的由业务人员完成；另一方面是提高广，用户并要用唯一确定的ID来标记该用户目前主要使用浏览器标记用户权重调整对于系统来说的数和竞价是可见的，（使用了link，一般资源文件，如css样式文件），另一种是页面文件的、与的、与的、与应用程序的等[13]。web，url与页面特征的urlurl的，浏览器人的受遗传和生活环境共同影响，由于重复率极小，大约150亿分之一，也就是说可以唯一确定一个人。浏览器技术能生成类似于人类的结果，能帮助系统去唯一标识一个浏览器，或者说标记一位用户在使用HTTP协议的过程中浏览器按照HTTP协议会把浏览器的串作为该浏览器的。如图2.4所示：2.1生成浏览器浏览器技术的一个技术难点是应对浏览器的变化17]。人的在正常情况下的变化很少，而浏览器不同。比如，用户会更换或新增浏览器插件，做调整分辨率大小等操作这样新生成的浏览器与之前的不同对于调整过相关浏览器设置的用户，可以简单处理，认为用户改变了自己以往的浏览偏好，一定程度上可视为一个新的用户。复杂web应用的架构设计方传统互联网端渲染的模块普遍比较简单，例如固定大小的推广广告如下图2.2，渲染好的html如图2.3。图2.2推广示图2.3html示，上图中的渲染模块的投放代码主要任务是在页面固定大小的位置插入文设计的互联网展现系统区别一般互联网与相关的特殊位和特殊的交互方式，无法直接仿照传统渲染模块直接完成渲染模块需设计一套完善的渲染模块架构，保证的正常渲染以及。，但随着浏览器和网络性能的提升，web应用的功能越来越强大，随之而来的是webJavaScript语管理工具，能够良好的管理js文件之间的依赖管理，填补JavaScript这个语言模MVCWebWeb发展逐渐细分出来的领域。早期前端开发比较简

信各种宣传页面html5面小游戏等等,前端代码的逻辑也越来越复杂近五六年以来,各种尺寸的智能和平板电脑层出不穷，越来越多的人使用移动设备来互联网这就给前端代码的跨平台性复用性易性带来了更高的要求如果有跨平台的复用性好且易的框架的话可以大大提高开发效率因此前端开发人员也在不停地探索C模型在Web开发中应用广泛，实现了展示模块和数据逻辑处理模块的分离20]。因此很多公司开始借鉴C在后端的运用，建立前端C架构，代表的框架有rS，BackBon21。MVC的相关概念。MVCmodel、view、controller。M排第一，应用当中涉及到的所有业务对象都应尽可能抽像成Model。以一个、、html表单表单为例子，这个model的属性、、

事件表单检查事件，表单发送事件等等；VCM较弱，V代表渲染用到的视图，即为呈现给用户的界面，就像上面提到的表单；C代表控制器，modelviewmodelview以及使用哪些modelview。总得来说，MVCmodel,view,controller三个方面来描述你的应用，并通过三者的交互，使应用功能得以MVC开发规范，也便于多人协作开发。jquery.smustache.js(html模板)，less（css预处理器）等等。

dom操作chrome浏览器，测试界面渲染情况项目上线需要考虑减少页面http请求，压缩文件能加快载入速度，同时代码）本章小。本章对本文设计的系统涉及的理论和技术的情况进行了简单阐述精准投放技术结合了页面特征提取用户特征提取以及浏览器等技术通过这些技术提高的针对性进而提高的点击率复杂b应用的架构设计考虑到本文设计的系统区别于传统的特点，结合了依赖管理、C模式和开发辅助工具，保证了渲染模块的开发、测试以及上线。。3项目概。片上渲染的变现方案站长在网页中插入投放代码，在页面载入到发送日志推广平台是提供给站长的自选样式并自助获取。。、、投放代码的工具检索模块渲染模块推广平台共同完成。、、，展现系统的主要功能。本文主要对渲染端做详细叙述检索端大量复用，可行性分，息发送给交易平台，就可得到合适的数据。得到之后展现系 ，系统功能需求分3.1。3.1用例互联网展现系统：在不影响网民用户体验的情况下，为提供互联网页面，同时需要保证站长的收入和主的推广效果。网民：浏览投放了该互联网的的网民。：投放了该互联网的。主为宣传推广服务或商品向提供素材，委托为其进行推广。站、主面的利益，尽可能地最大化总体利益。、、展现系统包括检索模块渲染模块推广平台，其中检索模块主要复用公司模块由BFP模块和Nginx组成，渲染模块由Loader子模块、Render子模块以及辅助模块构成。系统模块划分如下图所示。、、图3.2展现系统模块实际线上检索的过程中，参与的模块较多，流程比较复杂。先通过一次简化版的检索流程，设计出完整的展现系统序列图，序列图如图3.3图3.3检索简化序列1）渲染模要分为loader和render两个模块，loader需要分析页面以获取合适、并发出请求获取内容以及最后包装数据和信息，render需要渲染并数据2）检索模于该模块使 理站点的配置；以及向ADX请求、处理ADX返回的并返回给渲由于时序图对渲染端的功能需求描述不够详细下图3.4是渲染模块Loader

图3.4渲染模块划；Loader子模块的主要需求是是为渲染提供数据。渲染由于在上进行渲染，Loader子模块需要一个模块完成进行查找功能渲染也需要用到从检索端获取的数据，这就需要Loader子模块创建一个获取后端数据的模块除了上面这两个模块建议创建一个新的模块处理数据和数据，RenderapiRender模；RenderRenderMVC的设计模式，便于后期的开发。其子模html和css文件进行分离，便于文件的复用；事件绑定和需要考虑扩展性，建议提供扩展字段便于后期新事件和新的添加。，最后还有推广平台，功能相对独立，该平台主要为站长提供投放代码服务。大致流程是站长先在的上先并申请一个广告位id（称为tu），再在推广平台上选择样式，最终获取到投放代码，该在网页中的上进行渲染，目前有以下几种主要产品形式贴片PC贴片：页面载入完成第一次展现时，隐藏在底部的贴片广告会自动展开，持续展现5s然后再收起隐藏，之后鼠标移入展现5s，鼠标移出立即收起隐藏，线上实例如图3.4所示。3.4PC移动贴片：由于移动设备上交互主要以触摸、点击为主，和PC浏览器告载入完成后就显示在底部，一直展现，线上例子如下图。3.5iconPCicon样式：当鼠标hover到上时，上便显现一个闪动的“+”号，移动到这个符号后，便在符号下方展现内容，鼠标离开符号或者内容区域，内容隐藏，符号也同时隐藏。PC上的实例如图3.6所示3.6PCicon样式移动icon样式：移动icon的交互也比较简单，一直展现在右上角，示3.7。为了获取更大的收益，呈现出更好的设计，提供更友好的交互，之后将会有的新样式开发上线。由于样式各不相同，渲染要到的数据也存在不同，检索模块需要根据样式返回对应格式的数据，这3.7移动icon系统性能需求分 的响应时发送请求到后端返回的时间要在0.2秒左右，否则会影响用户体验。 其他需JSON。拓展性：样式需求变更频繁，需要设计渲染模块扩展性更强浏览器。本章小 4、本章主要介绍互联网展现系统的概要设计按照整个展现系统的架构及各模块功能安排，介绍检索模块渲染模块以及推广平台这三个子模块以及这三个子系统的几个子模块安排其中详细介绍渲染模块，简单介绍推广平台检索模块由于复用公司已有模块故只做简略介绍。、系统概整个检索系统的架构如图4.1所示图4.1检索系统整体架构、整个系统可以分做5个大部分，分别是渲染模块、推广平台检索模块、交易平台ADX和需求方平台DSP，后三个模块实际开发中主要当初、系统结构设渲染模块的请求给BFP模块。BFP模块的功能包括返回站点配置和处理数：：信息传给ADX，ADX根据页面特征和用户特征请求DSP，通过竞价得到并4.3图4.3系统子系统划渲染模块是展现系统的重要组成部分主要由Loader模块Render、Loader子模块包含查找子模块请求子模块、loaderApi子模块。在需求上查找子模块需要先开始按照一定的算法查找页面中适合展现、查找结束后在有适合出的时将控制权转交到请求子模块上；请求子模块需要向检索端发出请求；获取到有效的数据后，loaderApiapiRenderapi包含处理过的信息以及用于出的的信息。Renderwidgetimpl子模块，为了于公司以往项目架构统一没有像常用的MVC模式分出清晰的model、viewcontroller。其中widget似于MVC中的modelview的结合impl需要获取loaderApi并调用widget子MVCcontroller。id，接着自选一种或者多种样式，最终推广平台根据选择结果产生对应的通信协议设整个展现系统目前主要用到HTTP协议渲染端与检索端使用际使用是通过JSNOP的方式进行解决跨域问题[23]。检索端与ADX，ADXDSP之间通信复用公司模块，暂不关注其通信过程。本章小划分为检索模块渲染模块和55.1检索模表5.1第一次调用检索端的字序 字 说 位id（计费相关 请求配置，默认为 页面中的个 loader5.2序 字 说 位 请求配置，默认为 页面中的个3loader4URL地址5326宽7高第二次请求，检索端和管理ADX接口，返回数据协议GET方式调用检索端用到的具体字段5.2渲染模Loader子模块开始分析页面并向检索端发出请求包装信息和数据；然后Render模块根据Loader模块提供的数据，在对应的上渲染以LoaderLoader主要包含以下几个主要功能。考虑到互联网投放在大量站点上，投放js代码处在不同的下加上服务器一般都部署在公司下，浏览器跨域问题无法避免，因此Loader请求检索模块的方式都通过jsonLoader模块主要类图5.1PC端的Loader和移动端的Loader，实线表示继承，虚线表示使用。简单介绍loader模块各个类之间的关系，CommerLoader类作为loader模块的类继承了BaseLoader类包装了Loader模块常用的一些方法BaseLoader类中具体实现了请求检索模块的主要逻辑和部分查找页面、获取数据的逻辑，继承了Loader类；Loader类做了主要的页面查找的逻辑，是Loader模块的基类，同时Loader类也调用了LoaderApi，进行数据和数据的包装，一边提供给Render模块使用。移动端的LoaderPCloader查找并页a)延迟加b)类似slide的切换（分手动和自动两种c)被透明层遮挡，无法触发相应鼠标事件（在此称为d)onload目前针对这些问题，搜索的算法设计了如图5.2，搜索的流程比在查找到符合条件的5.1Loader模块主要类图5.2查找算5.3Render模块主要类5.1。和渲染js，主要的相关请求字段同表5.2。提供LoaderApi给render使在完成前两步处理之后，loaderRender模块调用，便于Render模块的对数据的使用。目前版本的LoaderApi有以下这5.5LoaderApi目前已有接0Loader1绑定事件事件23获取的位置和高4renderjs6获取具体数7Render及，Render模块的主要类图如图5.3，类图的结构于Loader模块比1.绘代码为了与现有架构兼容，主要分为widget和impl两部分，结构上MVCwidgetmodelview、implcontroller。RenderLoaderApi之后，便开始绘制。5.6implwidget主要功能序号字 说 包含了model和view，集合了通用的 implLoaderApi个div的样式设置canvas位置于对应的之上作为渲染最外层的domimplcontrollerLoaderApiwidget实例化的widget渲染出html，插入canvasdiv，载入css，绑定2.日（优化中废弃ad.plugin.imageplus.Log中。如widget中执行如下代码即可：me.trigger(ui.events.SEND_LOG,{'actionid':3,'attach':'logcontent'});（日志具体实现是通过请求一张后端服务器上的一张1px*1px的小，在服nginx日志上留下记录，后期在分析日志得出相关数据。日志的主要5.7所示。图5.6日志主要构5.7目前主要日志接110220物料计费点33044058时间69js 所有文件的依赖关系，由closurelibrary统一写入一个标记依赖的jsonCSS预处理：实际开发中，为了方便样式的书写使用了Less。Less属于stylusCSS的编写和维基础工具库：为了方便dom操作，项目使用了内部的tangram.js比较类jquery；为了方便模板渲染使用了，mustache.jshtml的渲染。webnodejser-server，使用该模块可以在本机开启一个简单的http服务器便于的在浏览器代码调试：代码逻辑上的测试，主要使用chromedeveloptool。调试的时候主要看网络请求状况、jshtml的渲染结果。代码压缩：上线之前需要进行压缩js，已达到较少http请求的压力和防止源码中的商业信息被解读。压缩使用了closurelibrary文件上线实际上线需要将压缩好的js文件上传到CDN服务上考虑到浏览器会缓存js以及js的更新迭代，需要设置js地址定时产生变化。如 后缀的cachenodejs的一个模块edp，edpjs文件。实际上线如下使用：edpbosapp/main.min.jsbos://cae-pub- 推广平图 推广平台前端流程推广平台主要目的供站长进行自助 投放，提供站长自 5.4所示。类型分为pc和移动，首先站长先根据类型选择不同的页面；选择完成后，输入位id；输入后，推广平台会检测位id是否有效，有效的下，则提示站长更换位id。本章小本章主要介绍了检索模块推广平台和渲染模块的详细设计和实现。检索模块主要复用了公司原有模块，渲染模块包含Loader子模LoaderRender两个子模块构成，Loader进行页面，查找数据请求，并包装信息和数据；Render渲染，并广，66.1检索模块及渲染端测pc设备和移动设备的硬件参数都较pc流量测试和移动流量测试，pc端测pc端样式有多种分类需对各个样式的进试并检查渲染icon使用chrome浏览器，打开测试网页，如 3/67487.html，并打开chromedeveloptool查看请求信息，Loader模块第一次请求获取站点配置的参数和响应数据如图6.1和图6.2所示。6.1Loader模块第一次请求参6.2Loader模块检索第一次请求响Loader6.36.4图6.3Loader模块第二次请求的请求参图6.4Loader模块第二次请求返回数最终的展现如图6.7所示，并测试触发展现，关闭以及点图 icon样式6.66.7贴片样式测试方法基本同icon样式，都是先查看两次请求的信息，再查看渲染情况以及交互。最终展现如图6.8所示。竖条样式测试方法同icon样式，最终展现如图6.9所示移动流量测需要在不同网络环境下和不同浏览设备上进试。移动贴片6.8移动贴片样icon

6.9移动贴片样测试主要针对主要的几个日志，实际较多，如展现、展现日志6.10计费日志（actioned6.11点击后生成计费隐藏日志（actioned图6.12隐藏日推广平台的测推广平台不参与检索和渲染，主要为站长提供自助投放服务，pc6.15所示：6.13pc投放获取投放代。由图可知站长获取到投放代码，且代码已到剪贴板上符合预。id6.16所示。本章小本章主要对系统进行功能测试以及验证。检索模块，通过请求返回的数据情况，验证其功能；渲染端，通过请求，页面查找，渲6.16选择移动投放获取投放代7本章主要总结的行文结构并展望本文设计的互联网展现系统在未 总本文设计的互联网展现系统结合了精准投放技术复杂web项目架构设计，达到了精准推送，样式精致，交互新颖，用户体验