当前位置：首页 > news >正文

程序化广告行业（32/89）：常见广告位类型深度剖析

news 2025/9/4 11:22:31

程序化广告行业（32/89）：常见广告位类型深度剖析

大家好！在探索程序化广告的道路上，我发现这里面的学问可真不少。为了能和大家一起进步，今天我就把自己学习到的关于程序化广告位类型的知识分享出来，希望能给对这个领域感兴趣的朋友一些帮助。

一、横幅广告（banner ad）：网络页面的常驻“宣传牌”

横幅广告是我们在浏览网站或App时最常见的广告类型之一，它一般出现在页面的顶部、中部或底部。就好像是挂在网页或App上的一块宣传牌，不管你是在看新闻、刷资讯还是使用各种应用，都很容易看到它。它还有好多别称，像标志广告、条幅广告、旗帜广告等。

横幅广告的格式丰富多样，其中以图片为主，包括静态的jpg/png图片、动态的gif图片，还有动画flash、视频video（也就是video in banner，通常是把视频嵌套在flash里，属于动画中的视频广告），以及HTML/H5等。静态图片简单直接，能清晰展示产品关键信息；动态图片和动画则更具吸引力，能通过动态效果抓住用户的目光；视频和HTML/H5格式就更厉害了，它们可以实现更多的交互功能，让用户有更好的体验。比如，你在一个时尚购物网站的顶部看到的一个服装品牌的横幅广告，如果是HTML/H5格式，你可能可以直接在广告上点击切换服装款式、查看尺码信息，甚至直接下单购买。

下面给大家分享一个简单的HTML代码示例，用于创建一个基本的横幅广告（仅为示意，实际应用会更复杂）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>横幅广告示例</title>
</head>
<body>
    <div style="width: 100%; height: 100px; background-color: lightblue; text-align: center;">
        <h2>欢迎选购我们的商品！</h2>
        <a href="#">立即购买</a>
    </div>
</body>
</html>

在这个代码里，我们创建了一个宽度为100%、高度为100px的蓝色背景的横幅区域，里面有一句欢迎语和一个购买链接。虽然很简单，但它展示了横幅广告的基本结构。

二、富媒体广告（rich media ad）：灵活多变的“弹出式宣传”

富媒体广告和横幅广告不同，它不会老老实实待在页面固定的位置上，而是通过弹出或者悬浮等方式出现在用户眼前，比如漂浮广告、右下角弹窗等。这种广告形式非常灵活，能够以一种比较醒目的方式吸引用户的注意力。

优质媒体的富媒体广告位一般价格比较高，因为它们能带来更好的广告效果，所以很多大型广告主会选择采购。想象一下，你正在浏览一个新闻网站，突然右下角弹出一个精致的弹窗广告，是一款你一直关注的电子产品的促销信息，还带有精美的动画效果和互动按钮，是不是很容易就吸引到你了呢？

下面是一个用CSS和JavaScript实现简单漂浮广告效果的代码示例（同样是简化示意）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>漂浮广告示例</title>
    <style>
       .floating-ad {
            position: fixed;
            right: 0;
            top: 200px;
            width: 200px;
            height: 150px;
            background-color: lightgreen;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="floating-ad">
        <h3>特别优惠！</h3>
        <p>快来抢购吧！</p>
    </div>
    <script>
        let ad = document.querySelector('.floating-ad');
        let x = 0;
        let y = 0;
        let directionX = 1;
        let directionY = 1;
        function moveAd() {
            x += directionX;
            y += directionY;
            if (x <= 0 || x >= window.innerWidth - ad.offsetWidth) {
                directionX = -directionX;
            }
            if (y <= 0 || y >= window.innerHeight - ad.offsetHeight) {
                directionY = -directionY;
            }
            ad.style.transform = `translate(${x}px, ${y}px)`;
            requestAnimationFrame(moveAd);
        }
        moveAd();
    </script>
</body>
</html>

在这段代码里，我们创建了一个固定在页面右侧、距离顶部200px的绿色漂浮广告。通过JavaScript代码，让广告在页面上不断地移动，增加它的吸引力。

三、视频广告（video ad）：视频内容中的“广告插播”

随着视频网站和App的普及，视频广告也成为了一种重要的广告形式。它主要出现在视频内容播放过程中，形式包括视频和图片等。视频播放器框内广告又可以细分为贴片、暂停和角标（overlay）等几种类型。

贴片广告：贴片广告是流媒体形式的广告，按照出现的时间顺序，分为前贴（pre-roll）、中贴（mid-roll）和后贴（post-roll），时长通常有15秒、30秒、60秒甚至90秒。前贴就是在视频播放前出现的广告，大家肯定很熟悉，每次打开视频网站看剧前，都可能会先看到一段前贴广告；中贴是在视频播放中途出现的广告，后贴则是在视频播放结束后出现的广告。品牌广告主最喜欢购买的广告形式就是贴片广告，行业里说的OTV广告一般指的也是贴片广告。不同视频网站的贴片广告体验不太一样，有的会自动播放，有的需要点击后才播放，还有的可以让用户选择跳过广告。比如，你在某视频平台观看热门电视剧时，可能会看到一个15秒的汽车品牌前贴广告，自动播放，无法跳过，强制你观看，这就是一种常见的贴片广告形式。
暂停广告：当你在看视频的过程中点击暂停时，就会弹出覆盖在视频上面的暂停广告。这种广告一般可以通过点击右上角的关闭按钮关闭。比如说，你在追一部精彩的网剧，看到关键时刻想暂停去做点别的事，这时候暂停广告就出现了，可能是一款零食的广告，如果你感兴趣，就可以点击了解更多信息。
角标（overlay）广告：角标广告是在视频播放过程中，某些时段内弹出的覆盖在视频上面的角标广告，出现一段时间后会自动消失。它还分为大角标和小角标。想象一下，你在看一场体育赛事直播，屏幕的某个角落突然出现一个运动品牌的小角标广告，过一会儿又自动消失了，既不会太影响你观看比赛，又能让你对这个品牌有一定的印象。

下面是一个简单的HTML5视频广告（贴片广告形式）的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频广告示例</title>
</head>
<body>
    <video width="640" height="360" controls>
        <source src="ad_video.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>
    <script>
        let video = document.querySelector('video');
        video.addEventListener('loadedmetadata', function () {
            let adDuration = 15; // 假设广告时长15秒
            let totalDuration = video.duration;
            let newDuration = totalDuration + adDuration;
            video.setAttribute('data-new-duration', newDuration);
        });
        video.addEventListener('play', function () {
            let adVideo = document.createElement('video');
            adVideo.src = 'ad_video.mp4';
            adVideo.width = 640;
            adVideo.height = 360;
            adVideo.controls = true;
            adVideo.style.position = 'absolute';
            adVideo.style.left = '50%';
            adVideo.style.top = '50%';
            adVideo.style.transform = 'translate(-50%, -50%)';
            document.body.appendChild(adVideo);
            adVideo.play();
            adVideo.addEventListener('ended', function () {
                document.body.removeChild(adVideo);
                video.play();
            });
        });
    </script>
</body>
</html>