HTML & CSS editor for native

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.

The resulting native creatives can serve as traditional ads (Publisher-managed creatives for Programmatic Guaranteed are the only supported programmatic ads). To serve native creatives as both traditional ads and all types of programmatic ads, please select the "Customizable for in-feed" option in the Guided design editor.

Navigate to the HTML & CSS editor

  1. Sign in to Google Ad Manager.
  2. Click Delivery and then Native
  3. Click New native ad.
  4. Click Select in the "HTML & CSS editor" box.
    The "Define ad settings" page appears.

Define ad settings

  1. 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.
  2. 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:
    1. 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.
    2. (Optional) Enter your app name in the "Open Measurement partner" field to enable secure cross-publisher mobile app viewability measurement for supported third-party viewability providers.
    3. Click Add variable.
    4. Select the type and settings for the variable.
    5. In the "Variable" pop-up, click Continue.
    6. Add as many variables as needed.
    To use a standard, system-defined format, choose the Guided design editor option on the previous page.
  3. In the lower right corner of the main page, click Continue.
    The “Style your native ad” page appears.

Style your native ad

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.

  1. 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.
  2. Under “Rendering type," select whether to create native ads that are optimized for 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.
    If you selected the “Fluid” size in the ad settings, you won’t be able to change the “Standard” default setting here.
  3. In the right panel, toggle between HTML and CSS and update accordingly. Learn more
  4. Click Continue.
    The “Target your native ad” page appears.

Target your native ad

To serve your native ad, the targeting on this page needs to match the line item’s targeting.

  1. Expand the “Inventory” dropdown and 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.
  2. Expand “Geography”, “Device category”, “Operating system,” and "Custom targeting" as needed for additional targeting.
  3. Click Save and activate or Save.
    With either option, you'll be prompted to name your native style, and it will appear in the table of existing native styles.
    • If you click Save and activate, the native style will have a status of “Active” and will be eligible to serve ads.
    • If you click Save, the style will have a status of “Inactive.” You'll need to activate the style later to serve ads. To do this, from the table, select the style and click Activate from the bar that appears.
Was this helpful?
How can we improve it?