HTML & CSS editor
You have fully manual control over the content and styling of your native ad using HTML & CSS. You can create custom native formats that allow you to define new variables for ad content. You can select fluid or any other ad size.
- Sign in to Google Ad Manager.
- Click Delivery Native
- Click Create native ad.
- Click Select in the "HTML & CSS editor" box.
The "Define ad settings" page appears.
- Ad size: The HTML & CSS editor supports the Fluid size and all fixed ad sizes.
- We recommend the Fluid size because it allows more flexibility when styling your ad. With the Fluid size, Ad Manager will automatically size the ad by filling the width of the enclosing column and adjusting the height as appropriate (just like a regular HTML div on your site). This size works in combination with the fluid slot type in Google Publisher Tags or the Google Mobile Ads SDK (Android / iOS).
- Fixed sizes, such as 300x250, require no tag changes or app updates. A fixed size style enables native creatives to flow to your existing ad slots.
- Custom format: Formats contain the variables that make up the content of your ad. For example, if you operate a real estate site and sell native ads directly to brokers, you might create a native format with variables for neighborhood, number of bedrooms, number of bathrooms, and monthly rent. Select an Existing format from the dropdown or create a New format:
To use a standard, system-defined format, choose the Guided design editor option on the previous page.
- Enter an internal Name and Description for the new custom native ad format. This is the name that will appear as an option when selecting a native ad format for a new creative.
- Click Add variable.
- Select the type and settings for the variable.
- In the "Variable" pop-up, click Continue.
- Add as many variables as needed.
- In the lower right corner of the main page, click Continue.
The “Style your native ad” page appears.
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 easy experimentation.
- Update the “Preview width” setting to see how your ad looks on different screen sizes.
You can also drag the blue bar to change width. Height is updated automatically.
- Under “Rendering type," select whether to create native ads that are optimized for Accelerated Mobile Pages (AMP).
- 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 AMPHTML option.
- AMPHTML: AMPHTML ads are specifically designed to be faster on AMP content, but they will also serve on standard content.
- Standard & AMPHTML: Add separate code to produce either version of the native ad. Ad Manager will serve the AMPHTML version on AMP content and the standard version on standard content.
- In the right panel, toggle between HTML and CSS and update accordingly. Learn more
- Click Continue.
The “Target your native ad” page appears.
To serve your native ad, the targeting on this page needs to match the line item’s targeting.
- Expand the “Inventory” dropdown to target inventory.
- Native ads will only run where you have targeted valid native styles.
- Ensure that the inventory targeted can display the native ad as desired. One native style, for example, might look appropriate on your homepage but unsuitable on your sports page.
- Expand “Geography”, “Device category”, and “Operating system” as needed for additional targeting.
- Click Save and finish.
If you haven't already done so, name your style and click Save. The new style appears in the list of existing native styles.