Once you've defined your native ad settings, you can style your native ad. This article explains the required and optional settings you need to configure.
Style your native ad using:
Guided design editor
When you select the Guided design editor to create a native style, you can use the controls to style your native ad to match the look and feel of your website or app. Updates are automatically applied to the ad preview, which allows for experimentation.
Tips to using the Guided design editor
Preview size
When creating a style with a "Fluid" size, you can update the "Preview width" setting to see how your ad looks on different screen sizes. You can also manually resize the width using the blue blue bar next to the preview. The height is updated automatically.
Reorder elements
Click Reorder elements to show or hide the elements within each card on the right panel and rearrange them. For example, you could move the call to action above the advertiser name and remove the advertiser logo.
"Style native ad" panel
The "Style native ad" panel allows you to update settings as needed. For example, if you expand "Title", you can select whether you want your ad's title, or headline, to have a maximum of 30 characters (Short) or 90 characters (Long).
- Archivo
- Arial
- Arimo
- Bitter
- Comic sans
- EB Garamond
- Geneva
- Georgia
- Helvetica
- Lato
- Libre Baskerville
- Libre Franklin
- Lora
- Merriweather
- Montserrat
- Mukta
- Muli
- Nunito
- Open Sans
- Open Sans Condensed
- Oswald
- Playfair Display
- Poppins
- Raleway
- Roboto
- Roboto Condensed
- Roboto Slab
- Slabo 27px
- Source Sans Pro
- Times New Roman
- Trebuchet
- Ubuntu
- Verdana
- Volkhov
Style in CSS editor
- You won't be able to make additional changes through UI controls once you do so.
- If you introduce policy errors when editing the CSS, the native style will lose Ad Exchange auction eligibility but can still serve through Programmatic Guaranteed.
- HTML is not editable in the Guided design editor. For more customization, you can choose the HTML & CSS editor option, but you'll lose programmatic eligibility.
To edit the CSS directly, turn on the Style in CSS editor switch.
If you edit CSS, click Validate to ensure the style complies with Ad Exchange policies.
HTML & CSS
When you select the "HTML & CSS editor" option to create a native style, you use HTML and CSS to style your native ad to match the look and feel of your website or app. Updates are automatically applied to the ad preview on this page, which allows for experimentation.
Tips to using the HTML & CSS editor
Preview size
When creating a style with a "Fluid" size, you can update the "Preview width" setting to see how your ad looks on different screen sizes. You can also manually resize the width using the blue blue bar next to the preview. The height is updated automatically.
Rendering type
Select whether to create native ads that are optimized for Accelerated Mobile Pages (AMP). Note that if you selected the "Fluid"size in the ad settings, you won't be able to change the "Standard" default setting here.
- Standard: Native ads will work across desktop web, mobile web, and mobile apps. Standard native ads will also work on AMP content but won't be as fast as selecting an AMP option.
- AMP: AMP ads are specifically designed to be faster on AMP content, but they will also serve on standard content.
- Standard and AMP: Add separate code to produce either version of the native ad. Ad Manager will serve the AMP version on AMP content and the standard version on standard content. Learn about using creative wrappers to add snippets of code to an ad.
"Style native ad" panel
In the right panel, you can toggle between HTML and CSS and update accordingly. Learn more about adding code for native ads.
Add the iOS "self universal link" to the HTML
A self universal link is an iOS universal link used in an iOS app for in-app navigation. To use self universal link on a native creative, add the %%ONE_CLICK_HANDLER_TARGET%% macro to its HTML as in this example:
Next step
Once you've completed configuring your style, click one of the 2 options to save your changes:
- Save and activate updates the status of the style to "Active" and allows it to serve ads.
- Save updates the status to "Inactive" and doesn't allow it to serve ads yet. To activate later, go to the table of saved native styles, select the style, and click Activate.
To use the native style for a specific line item, Apply a native style to a specific line item.
