Web客户端广告分发及数据统计

2024年5月16日 286次阅读 来源: 快乐动起来

Web客户端广告分发及数据统计

在Web营业开辟中常常碰到广告加载及治理的题目，举例以下：

  1. 页面中具有多个广告位，而且每家广告的代码作风和内容不尽相同

  2. 一个广告位须要投放多家广告，如安在客户端开启A/B测试及动态加载广告代码

  3. 怎样对每一个广告举行正确的数据统计（PV、UV、Reffer）

  4. 如安在引入援用的页面上摒弃芜杂的广告代码

需求剖析

开辟一个广告治理器的模块与营业举行解耦。不论接入广告的数目有多大、A/B测试有多庞杂，在开辟的视角应该是赞同庞杂度的，而且与营业是不相关的。固然，开辟人员对这些广告的治理也应该是最简朴的，须要靠近0工作量的才是最好。

治理器应具有以下功用：

  • 广告设置
    即广告内容的定义，每一个广告须要一个唯一的称号来标识。

  • 流量分派
    无论是经由过程客户端照样效劳端来掌握流量分派，该API直接输出掷中的广告标识。详细的逻辑和完成在内部完成。任何开辟能够掩盖该要领完成本身的分派计划。

  • 加载机制
    依据设置动态的加载指定的广告剧本，治理剧本加载和设置的状况。

  • 数据网络
    依据剧本的加载状况，须要将加载信息传递给数据统计平台，比方加载胜利、加载失利、装置胜利。

  • 数据统计
    须要有平台对网络的数据举行统计、分类、展现。

完成计划

  • 运用原生Js举行广告治理模块的开辟，不依赖任何第三方Javascript库

  • 应用第三方数据平台举行数据网络和统计，如Google Analyze或CNZZ等

装置运用

  1. 装置广告模块治理器

    <script src="/lib/ddap.js"></script>

  2. 装置第三方数据统计代码

    <script src="https://s95.cnzz.com/z_stat.php?id=***&web_id=***"></script>

  3. 定义广告

    <script>
Q.insertAd({
  name: 'tb_side_1',
  scripts: [{
     url: 'http://p.tanx.com/ex?i=mm_32479643_3494618_56760779',
     id: 'tanx-x'
  }]
});
</script>

  4. 装置广告

    <script>
document.write('<a style="display:none!important" id="tan-x"></a>');
var Q = window['tt_ddap'] ? window['tt_ddap'].Q : false;
if (Q) {
    var name=Q.transfer();
    Q.start(name);
}
</script>

API设想

  • ads
    广告设置存储

  • loaded
    单个剧本加载回调

  • createScript
    加载单个剧本

  • addScript
    加载一切剧本

  • sendToGA
    向第三方发送统计数据

  • insertAd
    定义广告代码

  • start
    加载广告

  • transfer
    掌握流量分派

源代码

检察 Github

    原文作者：快乐动起来
    原文地址: https://segmentfault.com/a/1190000005761430
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞