原生模板广告接入

一、模板广告简介

原生模板广告（又称自定义模板广告）支持支持GIF、视频、图片、图文 、文字链、H5富媒体；既能够满足您对大量曝光的需求，也支持应用直达，满足您对用户转化的需求。同时模板广告开放自定义编辑能力，开发者可以在优量汇平台调整广告文字、图片、宽高比、边距、渐变色等编辑，更好的满足开发者自身需求。

二、模板广告创建和示例

2.1 广告创建示例

登录优量汇平台，创建广告 >> 选择媒体 >> 广告位类型：原生 >> 渲染方式：模板 >> 选择广告样式。

2.2 广告样式编辑

登录优量汇平台，我的广告位 >> 选择“模板广告” >> 编辑

• 模板广告样式编辑请参考《模板广告自定义样式说明》

2.3 广告播放示例（节选）

广告类型	广告效果
左右图文
上下图文
三小图
双图双文
图文遮罩
纯图广告

三、广告属性

四、接入方式

4.1 接入准备

准备阶段，请先访问和参考：“H5广告接入流程指导” ，完成广告创建。

4.2 接入H5 SDK

具体的H5 SDK接入方式请访问和查看：“H5广告接入流程”。

4.3 初始化API

H5 SDK接入完成后，按下列顺序即可调用模板广告API。

1. 请先在联盟平台（adnet.qq.com）广告位准备好：placement_id，app_id
2. 页面中全局申明

   window.TencentGDT = window.TencentGDT || [];
   

3. 初始化API

TencentGDT.push({
    placement_id: '11**99', // 广告位id
    type: 'native',
    count: 1, //拉取广告的数量，选填，默认是3，最高支持10
    onComplete: function(res) {
        if (res && res.constructor === Array) {
            // 原生模板广告位调用 window.TencentGDT.NATIVE.renderAd(res[0], 'containerId') 进行模板广告的渲染
            // res[0] 代表取广告数组第一个数据
            window.TencentGDT.NATIVE.renderAd(res[0], 'containerId')
        } else {
            // 加载广告API，当广告使用完成，或无广告，可使用loadAd再次拉取广告
            // 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
            setTimeout(function() {
                TencentGDT.NATIVE.loadAd(placement_id)
            }, 3000)
        }
    }
});

API说明：

4.4 渲染接口

• renderAd

window.TencentGDT.NATIVE.renderAd( data, containerId)

4.5 请求接口

• loadAd

loadAd方法需要在广告初始化onComplete后调用，否则会报找不到此方法。

window.TencentGDT.NATIVE.loadAd(placement_id);

此方法在初始化会默认调用一次，请勿重复调用。

• 完整的接入代码示例

// 腾讯广告全局申明只需运行一次
window.TencentGDT = window.TencentGDT || [];

// 广告示例声明
TencentGDT.push({
    placement_id: '11**99', // 广告位id
    app_id: '11**99', // appid
    type: 'native',
    count: 1, //拉取广告的数量，必填，默认是3，最高支持10
    onComplete: function(res) {
        if (res && res.constructor === Array) { 
            // 原生模板广告位调用 window.TencentGDT.NATIVE.renderAd(res[0], 'containerId') 进行模板广告的渲染
            // res[0] 代表取广告数组第一个数据
            window.TencentGDT.NATIVE.renderAd(res[0], 'containerId')
        } else {
            // 加载广告API，当广告使用完成，或无广告，可使用loadAd再次拉取广告
            // 注意：拉取广告频率每分钟不要超过20次，否则会被广告接口过滤，影响广告位填充率
            setTimeout(function() {
                TencentGDT.NATIVE.loadAd(placement_id)
            }, 3000)
        }
    }
});



// H5 SDK接入全局只需运行一次
(function () {
    var doc = document,
        h = doc.getElementsByTagName('head')[0],
        s = doc.createElement('script');
    s.async = true;
    s.src = 'https://qzs.gdtimg.com/union/res/union_sdk/page/h5_sdk/i.js';
    h && h.insertBefore(s, h.firstChild)
})();