为原生广告添加代码

为原生广告选择 HTML 和 CSS 编辑器选项后，您可以添加 HTML 和 CSS 代码来自定义原生广告并为其设置样式。本文提供了一些有关添加代码的提示和示例。

所生成的原生广告素材可作为传统广告投放（可供有保证程序化交易使用的发布商管理型广告素材是唯一受支持的程序化广告）。若要将原生广告素材同时作为传统广告和所有类型的程序化广告投放，请在引导式设计编辑器中选择“从模板入手并进行自定义”选项。

下面是针对 Feed 内自适应展示位置的原生样式 HTML 和 CSS 示例。此原生样式基于“赞助文章”原生广告格式，包含标题、图片和正文变量。

代码类型示例代码

HTML（包含变量）

代码类型	示例代码
HTML（包含变量）	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS（包含变量）	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS（包含变量）


.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

此原生样式将对原生广告素材组件进行转换，如下所示：

组件	示例
标题	The 30 Fastest Growing Jobs
图片	jobs.jpg
正文	According to the U.S Bureau of Labor Statistics, these occupations will grow the most in the next 10 years. The list might surprise you.

转换为如下所示的原生广告：

原生广告示例

HTML

添加一个 HTML 代码段，指明您的原生广告会以何种方式呈现。

您可能需要与您的网站或应用开发者合作，共同创建此代码。
您的 HTML 可以在 <script> 标记中包含 JavaScript。
请仅添加与广告相关的代码段，因为添加完整的 HTML 文件会导致某些浏览器（包括 Internet Explorer）无法显示广告。例如，不要添加 <doctype> 或 <html> 标记（详见上文中的示例）。
虽然原生广告不沿用父级页面的样式，但您可以使用 HTML 中的 <link> 标记导入外部样式表和网络字体。

目标窗口设置可以控制原生广告在被点击后是会在同一标签页中打开，还是会在新窗口中打开。

传统广告会沿用广告单元级设置。
程序化广告会沿用广告联盟级设置。

插入宏

您可以点击插入宏并使用以下按钮来帮助您构建 HTML：

CacheBuster：确保系统在每次执行代码时都会向广告服务器发送新的调用，以便您准确统计展示次数。详细了解CacheBuster。
Click 宏（推荐）：在代码段不包含特殊字符时跟踪点击。详细了解 Click 宏。
点击后到达网址宏：指定广告素材的着陆页，当有人点击广告时该网页就会出现。详细了解点击后到达网址宏。
转义的 Click 宏：在代码段的点击后到达网址中包含特殊字符（如“&”、“?”、“%”）时跟踪点击。详细了解转义的 Click 宏。
视频封装容器：包含用于播放原生广告的视频播放器的封装容器。详细了解如何配置原生视频广告样式。

CSS

输入用于指明原生广告展示方式的 CSS 代码。详见上文中的示例。

如果您是对自适应尺寸原生广告进行投放管理，请不要使用绝对定位 CSS。

该内容对您有帮助吗？

您有什么改进建议？

为原生广告添加代码

HTML

插入宏

CSS

该内容对您有帮助吗？

需要更多帮助？

请尝试以下步骤：