When you choose the HTML & CSS editor option for native ads, you add HTML and CSS code to customize and style your native ads. This article provides tips and samples for adding the code.
Native style sample
Here’s an example of HTML and CSS in a native style for a fluid, in-feed placement. This native style is based on a “sponsored post” native ad format with Headline, Image, and Body variables.
Code type | Sample code |
---|---|
HTML with variables |
|
CSS with variables |
|
This native style will convert native creative components like this:
Component | Example |
---|---|
Headline | The 30 Fastest Growing Jobs |
Image | jobs.jpg |
Body | 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. |
Into a native ad that looks like this:
HTML
Add an HTML snippet that indicates how your native ad will appear.
- You may need to collaborate with your web or app developer to create the code.
- Your HTML can include JavaScript in
<script>
tags. - Please include only the snippet relevant to the ad, as including a full HTML document will prevent the display of ads in some browsers, including Internet Explorer. For example, don't include
<doctype>
or<html>
tags — see the example above. - Native ads don’t inherit styles from the parent page, but you can import external stylesheets and web fonts with
<link>
tags in the HTML.
The Target Window setting controls whether native ads open in the same tab or a new window after they’re clicked.
- Traditional ads inherit the ad unit-level setting.
- Programmatic ads inherit the network-level setting.
Insert macros
You can click Insert macro and use the following buttons to help build your HTML:
- CacheBuster: Ensure that a fresh call is made to the ad server every time the code is executed, so you’re accurately counting impressions. Learn more about CacheBuster.
- Click (recommended): Track clicks if your code snippet doesn’t contain special characters. Learn more about click.
- Click-through URL: Specify the creative's landing page that should appear when someone clicks the ad. Learn more about Click-through URLs.
- Escaped click: Track clicks if your code snippet contains special characters (for example, '&', '?', '%') in its click-through URL. Learn more about escaped clicks.
- Video wrapper: The wrapper that contains the video player for the native ad. Learn more about how to configure native video styles.
CSS
Provide CSS code that indicates how your native ad will appear. See the example above.