广告位(banner)的可视化管理后台逻辑说明

10 评论 1万 浏览 70 收藏 8 分钟

针对APP端的banner展示,怎样做到前后端的有机组合,方便运营人员自行操作(随时更改)广告位呢?本文简单的将可视化banner后台的逻辑做以说明。

百度百科上我们可以看到对banner的定义即“横幅广告(Banner Ad.)是网络广告最早采用的形式,也是目前最常见的形式。横幅广告又称旗帜广告,它是横跨于网页上的矩形公告牌,当用户点击这些横幅的时候,通常可以链接到广告主的网页。”

在APP端或者PC端,我们经常看到各种各样大小的广告,有动态和静态区分,一般均为可点击的,或者为了宣告而增加的静态通知图片。

那么针对APP端的banner展示,怎样做到前后端的有机组合,方便运营人员自行操作(随时更改)广告位呢,接下来,我就简单的将可视化banner后台的逻辑做以说明。

前端banner展示

我们经常看到,banner存在一个APP的首页,位置可以在顶部,中部或者底部。通常以轮播图的形式展示,3秒/5秒进行轮播。

例如下图这种在首页中部的轮播展示banner图:

展示形式分两种:一种是静态的广告图,另一种是动态的广告图;

前端交互分两种:一种是不可点击的,仅仅是展示一张图片,另一种是可点击的,点击进入对应的网页或者端内页面。

通常情况下,banner都会有一个默认的一直存在的页面,但处特殊情况下的页面,当需要的时候,广告位展示出来,当不需要的时候,广告位隐藏。

举例,比如说通常像首页的banner,就算没有轮播的banner图,通常也都会有一个默认的图片。但像一些特殊页面的广告位,用股票APP来说,新股申购页面的特殊广告位,当有国际配售的新股的时候,广告位会展示出来,方便用户申购,当没有新股的时候,广告位就会隐藏。

例如下图展示的这种,特殊页面的banner是可以设置成隐藏的,无国际配售的时候banner隐藏不展示。

那到底前端的banner展示,怎么做一个可视化的后台页面呢,下面进行介绍

后台页面

1. banner管理列表页

一般这个列表展示的字段,通常都来源于添加banner时候的定义字段。

具体的字段还是要依据你们业务的复杂程度而定,但通常情况下,以下这些字段是必须存在的:

  • 产品:这个可以定义为扩展字段,开始做这个功能的时候,可能仅仅是针对一个产品,但为了你这个后台的适配性,一般会告诉技术把这个字段预留出来;
  • banner名称:运营人员自行定义区分的字段,有时候该字段也可用来作为banner展示名称内容的获取字段;
  • banner位置:该字段也可定义为是一个扩展字段,不可能仅仅一个页面上存在广告位;
  • 权重:该字段一般是设置banner在卡前端的展示位置,比如说有同一页面上设置了6个banner,那这6个banner的排列顺序由该字段设置;
  • 图片:一般是做预览用的;
  • 上架状态:这个字段一般是根据你设置的banner上架时间和下架时间根据当前时间来判断该banner的状态,一般分为待上架,上架中,已下架。分的更细一点,已下架可以在分为下架和已过期;
  • 开始时间和结束时间用来控制banner在前端展示的时间;
  • 操作般就是编辑:用来修改此条banner的设置内容。

2. 新增页面

banner管理列表页的列表数据来源于什么呢,就来源新增页面,新增页面是位添加一个banner而设置的。

新增页面中特殊说明下一下两个字段,其余字段在列表页中已做说明。

我们都知道,APP中的banner展现分为三种:

  • 第一种就一张宣告的图片,无任何跳转;
  • 第二种是点击之后,跳转到一个网页,称之为外部链接;
  • 第三种是也可点击跳转,跳转的是APP内的原生页面。

那这两个字段TAG和URL地址,就是为了区分这个而建立的用于前后端进行交互的字段。

通常是事先定义好TAG,用它来特指是banner展示的哪一种。

TAG技术会分两种,当是跳转到APP原生页面,无需输入外部链接地址。当为外部链接页面的时候,则需输入外部链接地址。

3. 编辑页面

该页面同新增页面,除了向产品,banner位置这种用来唯一区分的字段不可更改外,其余的均可编辑修改

4. 删除banner

一般情况下,在可视化的后台中,不做删除操作。例如我们前边说到的banner状态【下架】来表示已过期的banner或者中途操作下架的banner,保存记录在列表页中,可供选择查看。

像这种情况的删除非要做的话可以在数据库中操作。或者在可视化中操作一栏增加删除操作,但需做好日志处理。

5. 搜索

搜索可以视你设置的具体字段进行分类,本文中,从上述的可视化后台界面可以看出。针对搜索,可根据产品名称/banner的位置/banner的状态进行搜索。也可增加输入查询项:banner的名称进行模糊搜索查询到对应的banner

以上就是我仅针对APP内的广告位(banner)的可视化后台做简单说明。仅仅是简单试用的初级层面,期待您的批评指正,我们一同进步,也欢迎小伙伴给出更完美的方案供学习。

 

本文由 @酸辣土豆丝 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 你好,你的列表是按照什么规则排序的

    回复
    1. 可以按上架状态排序,再按时间排序,这个你可以根据所需自行定义。只要描述细致就好了

      回复
  2. 你好,如果PC、APP端都有banner或者广告位,是否可以进行统一管理?

    回复
    1. 可以的呀

      回复
  3. 学到了,谢谢分享!

    回复
    1. 互相学习!

      回复
  4. 前端展示的banner数量是有限的,如果配置了很多个banner图,怎么判断取舍呢

    回复
    1. 有两种情况,第一种是根据运营要求自己决定,第二种是通过千人千面算法得出

      回复
  5. 我以为的可视化编辑是在PC网页端,以手机端前台样式显示然后可直接编辑的可视化 😈

    回复
    1. 我们就是做的这种,不过对前端开发的是增加了工作难度的,还有时间。性价比不高

      回复