码问

Appearance

广告曝光组件 ​

新闻的信息流页面中，会不时出现广告栏，如何精准的统计这些广告的曝光度，出现的次数。 基于此开发了广告曝光组件，通过简洁的配置，避免了重复的埋点。

项目简介 ​

手机移动端的新闻首页以及各个频道页面有特定的信息流栏目，可以无限滚动，刷新出不同的新闻数据。 在这些新闻列表中会嵌入一些广告信息，同时这些广告的点击以及转化率是很重要的数据，产品和领导很关注这些。

Alt text

为了能精确统计这些广告的曝光度，收集广告的相关数据，为后期产品制定有效的广告投放策略作参考。 开发了广告曝光组件，该组件是发布在公司私域的NPM仓库中，在业务项目中直接安装使用即可。

使用方式 ​

  1. 配置了内部的私域 NPM 仓库地址
  2. 安装 npm 包
sh
npm install @news-app/ad-exposure
npm install @news-app/ad-exposure
  1. 在业务项目中调用
js
import { AdExposure } from "@news-app/adExposure";
const adExposure = new AdExposure()
const adData = {
  event: 'article_wap_hotNews_list_{n}',
  target: 'exposure_ad_position',
  info: { modelid: 'test-model-1',
  position: {n}
};

adExposure.positionExposure('.hot-new-list', { duration: 500, adData }, () => {
  // 广告在可视区域停留了 0.5 秒，视为一次有效的曝光，
  console.log('500ms delaying callback function');
  // 此时会发送给上报接口
});
import { AdExposure } from "@news-app/adExposure";
const adExposure = new AdExposure()
const adData = {
  event: 'article_wap_hotNews_list_{n}',
  target: 'exposure_ad_position',
  info: { modelid: 'test-model-1',
  position: {n}
};

adExposure.positionExposure('.hot-new-list', { duration: 500, adData }, () => {
  // 广告在可视区域停留了 0.5 秒，视为一次有效的曝光，
  console.log('500ms delaying callback function');
  // 此时会发送给上报接口
});

个人贡献 ​

  • 梳理老旧的业务逻辑时，主动拓展出的一个业务组件
  • 使用了Observer API来监视DOM元素的可见性
  • 衔接已有的上报统计API
  • 支持传递多种曝光参数