wap广告对接文档

一、投放方式

1.1 异步投放

TIP

异步投放只需要引用一次JS脚本即可，JS脚本放在head标签或body标签均可。投放代码放在body标签需要的地方即可，此处的投放代码指：

<div class="_gpunkxjudct"></div>
<script type="text/javascript">
  (window.slotbydup = window.slotbydup || []).push({
      id: "u6341556",
      container: "_gpunkxjudct",
      async: true
  });
</script>
<!-- 多条广告如下脚本只需引入一次 -->
<script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap.js" async="async" defer="defer" >
</script>

TIP

PC，WAP场景下广告投放，对广告位置，加载时机，页面性能有要求的媒体可以选择异步投放。

代码解析：

页面优先创建广告容器，包含class属性
创建广告单元，传入3个属性： a. id:广告位id b. container：广告容器class值 c. async：异步投放默认为true
引入广告脚本

TIP

提示：

媒体也可以自己创建一个广告容器，或者使用平台提供的容器。但是要包含class属性，并将class属性值填入到slotbydup操纵中的container属性中。
脚本加载位置，顺序，时机不做限制，每个页面部署一个脚本即可。

TIP

示例如下：

<html>
<head>
    <meta charset="utf-8" />
  	<title>Ad_Demo_Async_Multi</title>
  	<!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap2.js"></script>
</head>
<body>
    <div>媒体内容片段1</div>
  	<!-- 广告投放代码 -->
    <script type="text/javascript">
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u2671865',
            container: s
        });
  	</script>

    <div>媒体内容片段2</div>
  	<!-- 广告投放代码 -->
    <script type="text/javascript">
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u2671865',
            container: s
        });
  	</script>

    <div>媒体内容片段3</div>
  	<!-- 广告投放代码 -->
    <script type="text/javascript">
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u2671865',
            container: s
        });
  	</script>
</body>
</html>

1.2 同步投放

TIP

同步投放指从平台获取的整个代码都需要放在body标签中，投放代码如下所示：

<script type="text/javascript">
	var cpro_id = 'u2671865';
</script>
<script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap2.js"></script>

TIP

PC，WAP场景下广告投放，追求投放逻辑简单，无需额外操作，广告脚本确保可以同步加载的媒体可以选择。复制粘贴即可进行广告投放。

代码解析：

声明cpro_id变量
引入广告脚本文件，文件加载过程中cpro_id会被识别并使用

TIP

提示：

使用此投放方式时，在代码执行过程中会使用document.write创建广告容器。因此不要在页面加载完成后再加载同步投放代码
脚本要在cpro_id变量赋值之后再加载，确保脚本可以对cpro_id中代码位id进行处理。多个代码位需要多次加载脚本。

TIP

示例如下：

<html>
<head>
    <meta charset="utf-8" />
    <title>Ad_Demo_Sync_Multi</title>
</head>
<body>
    <div>媒体内容片段1</div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        var cpro_id = 'u2671865';
    </script>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap2.js"></script>
    <div>媒体内容片段2</div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        var cpro_id = 'u2671865';
    </script>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap2.js"></script>
    <div>媒体内容片段3</div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        var cpro_id = 'u2671865';
    </script>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap2.js"></script>
</body>
</html>

1.3 反屏蔽投放

TIP

反屏蔽投放指从平台获取的脚本放在body标签中，投放代码如下所示：

<script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap3.js "></script>

TIP

主要针对wap场景，很多厂商浏览器以及qq，uc等wap浏览器，默认带有广告屏蔽插件。使用反屏蔽投放，可以确保广告在有屏蔽插件的浏览器中也可以正常展现。

代码解析：

进行反屏蔽投放之前，需要优先申请反屏蔽域名，并进行配置和验证。
反屏蔽脚本由反屏蔽脚本域名+加密路径组成
页面中需要加载反屏蔽广告的位置，直接部署脚本即可
反屏蔽是个持续对抗的过程，无法做到一劳永逸，反屏蔽域名如果命中屏蔽规则，会弱化反屏蔽投放效果，需要媒体重新申请重新配置。

TIP

提示：

脚本不可以添加async和defer属性，会影响广告容器的正确绘制
反屏蔽脚本域名更换后，无需从平台从新获取脚本。直接修改部署到页面的脚本域名即可
反屏蔽域名更换后，新旧域名同时生效，无过渡期失效的问题
每次“获取反屏蔽脚本”都会返回不同的路径脚本。无需重复获取，任意一次脚本内容都可以进行投放

TIP

示例如下：

<html>
<head>
   	<meta charset="utf-8" />
   	<title>Ad_Demo_Anti_Multi</title>
</head>
<body>
    <div>媒体内容片段1</div>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap3.js"></script>
    <div>媒体内容片段2</div>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap3.js"></script>
    <div>媒体内容片段3</div>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap3.js"></script>
</body>
</html>

二、投放方式对比

2.1 同步投放 VS 异步投放

TIP

同步投放和异步投放的区别：

异步投放中广告脚本script标签中添加了async和defer标记，如果页面加载时即投放广告，广告脚本的加载不会影响页面的渲染，而是和页面渲染同时进行的
异步投放可以传入自己的容器，从而控制广告渲染位置和时机

2.1 反屏蔽投放 VS 非反屏蔽投放

TIP

反屏蔽投放和非反屏蔽投放的区别：

根据使用场景，如果媒体广告集中在wap流量上（非端内h5），那么可以优先选择反屏蔽投放，保证广告投放效果。
如果不接入反屏蔽投放，再考虑使用同步还是异步投放，参考2.1。

注：反屏蔽投放和非反屏蔽投放选择其中一种进行投放即可，无需部署两套脚本逻辑。

三、环境对比

3.1 正式环境——浏览器

TIP

正式环境进行pc，wap广告投放，需要注意以下几点。

投放页面要以http或者https协议+正常域名(opens new window)（非localhost，非ip类型，比如127.0.0.1，非file://，非ftp://）的形式进行访问，页面广告才能正常绘制。
投放页面的网站**域名（或主域名）**需要存在于”媒体管理”中的”网站域名”。
投放页面中广告脚本不要使用iframe嵌套进行投放（跨域非跨域的iframe均不可）
**端内流量，或者特殊场景流量下（非pc，wap浏览器环境）**需要观察广告检索请求，广告点击，是否可以正常携带cookie信息。

3.2 正式环境——pc客户端

TIP

pc客户端类型的广告投放方式与正常浏览器的广告投放类似，但是需要依赖一些前置条件：

媒体webview用域名（网址引入），如果没有域名是不能接入的，会被反作弊过滤掉；
webview支持cookie留存（1）如果支持cookie留存，就可以在webview中搞定一切，展现、点击等；（2）如果媒体不支持cookie留存，找相关客服人员申请权限。
广告点击后跳转时默认浏览器打开还是自己webview打开？（1）如果没有特殊的要求，且cookie能够留存住的话，建议在webview中完成一切；（2）对应像锁屏一样的场景，就需要跳转到默认浏览器，因为锁屏本身就会跳转到默认浏览器打开。

3.3 测试环境

TIP

投放页面要以http或者https协议+正常域名(opens new window)（非localhost，非ip类型，比如127.0.0.1，非file://，非ftp://）的形式进行访问，页面广告才能正常绘制。

四、对外接口

TIP

对外接口，与广告投放是平行逻辑，

不可以在广告投放逻辑中新增closeAd和noAd的属性，进行事件监听

。比如：window.slotbydup = window.slotbydup || []).push({id: xxx,container:s,closeAd:function(){}});

是无法正常触发closeAd的方法的。

4.1 广告关闭接口

TIP

媒体使用该接口，定义回调方法，可以在用户点击“广告关闭”后，触发回调。一个页面只需要定义一次。

(window.slotbydup = window.slotbydup || []).push({
	 // 广告关闭回调方法 一个页面只需要定义一个
   closeAd: function (tu_index) {
   		// tuid_同页面内相同代码位id自增索引
   		console.log(tu_index);
   }
});

4.2 无广告返回接口

TIP

媒体使用该接口，定义回调方法，可以在“无广告返”回时，触发回调。一个页面只需要定义一次。

(window.slotbydup = window.slotbydup || []).push({
	 // 无广告返回回调方法 一个页面只需要定义一个
   noAd: function (tu_index, noadInfo) {
   		// tuid_同页面内相同代码位id自增索引
   		console.log(tu_index);
   		// 无广告返回原因{noadx: '联盟内部无广告返回状态码', queryid:'精确到本次检索的唯一id'}
   		console.log(noadInfo);
   }
});

4.3 有广告返回接口

TIP

该接口只针对屏保代码位开放。媒体使用该接口，定义回调方法，可以在“有广告返”回时，触发回调。一个页面只需要定义一次。

(window.slotbydup = window.slotbydup || []).push({
   // 有广告返回的回调
   haveAd: function (tu_index) {
   		// tuid_同页面内相同代码位id自增索引
   		console.log(tu_index);
   }
});

五、拉伸规则说明

TIP

拉伸规则是为了不同场景下，让广告尺寸更加适配媒体页面而提供的广告拉伸方案。目前平台可以选配的拉伸规则如下：

WAP流量：

按屏幕宽度（默认）
按父容器宽度
按屏幕宽高（wap插屏）

PC流量：

固定像素宽度（默认）
按父容器宽度
按父容器宽高（pc屏保）

5.1 WAP拉伸规则案例

<html>
<head>
    <meta charset="utf-8" />
    <title>WAP广告拉伸规则</title>
    <!-- 广告投放脚本 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap.js" async="async" defer="defer"></script>
</head>
<body>
    <div>媒体内容片段1</div>
    <!-- 广告容器1 -->
    <div class="_jnwj3fh9mjo"></div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u6811714', // 拉伸规则：按屏幕宽度
            container: '_jnwj3fh9mjo'
        });
    </script>
    <div>媒体内容片段2</div>
    <!-- 广告父容器 -->
    <!-- 注意！！！按照父容器宽度 拉伸指的是广告宽度以 container2 宽度600px进行拉伸 -->
    <div id="container2" style="width: 600px">
        <!-- 广告容器2 -->
        <div class="_ace93fh9mkw"></div>
    </div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u6811718', // 拉伸规则：按父容器宽度
            container: '_ace93fh9mkw'
        });
    </script>
    <div>媒体内容片段3</div>
    <!-- 反屏蔽广告投放 按照屏幕宽度拉伸 -->
    <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap4.js"></script>
    <div>媒体内容片段4</div>
    <div id="container4" style="width: 600px">
        <!-- 注意！！！按照父容器宽度 拉伸指的是广告宽度以 container4 宽度600px进行拉伸 -->
        <script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap5.js"></script>
    </div>
</body>
</html>

TIP

注意：

如案例中所示，按照父容器宽度拉伸的广告尺寸，是根据广告容器外层容器（container2 和 container4）的宽度计算广告宽度。
WAP插屏广告宽高默认屏幕宽高，不受父容器尺寸限制。

5.2 PC拉伸规则案例

<html>
<head>
    <meta charset="utf-8" />
    <title>PC广告拉伸规则</title>
    <!-- 广告投放脚本 -->
<script type="text/javascript" src="https://fpvideo.shenshiads.com/h5tovue/bd/wap.js" async="async" defer="defer"></script>
</head>
<body>
    <div>媒体内容片段1</div>
    <!-- 广告容器1 -->
    <div class="_jnwj3fh9mjo"></div>
    <!-- 广告投放代码 -->
    <!-- 广告宽度按照平台配置宽高 -->
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u6811743',// 拉伸规则：固定像素宽度
            container: '_jnwj3fh9mjo'
        });
    </script>
    <div>媒体内容片段2</div>
    <!-- 广告父容器 -->
    <!-- 注意！！！按照父容器拉伸指的是广告宽度以 container2 宽度600px进行拉伸 -->
    <div id="container2" style="width: 600px">
        <!-- 广告容器2 -->
        <div class="_ace93fh9mkw"></div>
    </div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u6811744', // 拉伸规则：按父容器宽度
            container: '_ace93fh9mkw'
        });
    </script>
    <div>媒体内容片段3</div>
    <div id="container3" style="width: 600px; height: 400px;">
        <!-- 注意！！！按照父容器宽高拉伸指的是广告宽度以 container3 宽度600px高度400px 进行拉伸 -->
        <div class="_208jotaaam8"></div>
    </div>
    <!-- 广告投放代码 -->
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: 'u6811745', // 拉伸规则：按父容器宽 高  pc 屏保代码位
            container: '_208jotaaam8'
        });
    </script>
</body>
</html>

TIP

注意：

如案例中所示，按照父容器拉伸的广告尺寸，是根据广告容器外层容器（container2）的宽度计算广告宽度。
PC屏保广告按照父容器（container3）计算广告的宽高尺寸。需要确保广告绘制的时候，广告容器的宽高尺寸可以正确获取到。

# wap广告对接文档

# 一、投放方式

# 1.1 异步投放

# 1.2 同步投放

# 1.3 反屏蔽投放

# 二、投放方式对比

# 2.1 同步投放 VS 异步投放

# 2.1 反屏蔽投放 VS 非反屏蔽投放

# 三、环境对比

# 3.1 正式环境——浏览器

# 3.2 正式环境——pc客户端

# 3.3 测试环境

# 四、 对外接口

# 4.1 广告关闭接口

# 4.2 无广告返回接口

# 4.3 有广告返回接口

# 五、拉伸规则说明

# 5.1 WAP拉伸规则案例

# 5.2 PC拉伸规则案例

wap广告对接文档

一、投放方式

1.1 异步投放

1.2 同步投放

1.3 反屏蔽投放

二、投放方式对比

2.1 同步投放 VS 异步投放

2.1 反屏蔽投放 VS 非反屏蔽投放

三、环境对比

3.1 正式环境——浏览器

3.2 正式环境——pc客户端

3.3 测试环境

四、对外接口

4.1 广告关闭接口

4.2 无广告返回接口

4.3 有广告返回接口

五、拉伸规则说明

5.1 WAP拉伸规则案例

5.2 PC拉伸规则案例