Search
Clear search
Close search
Google apps
Main menu

Learn more about the new AdMob rewarded ads

Sample HTML for native ads express

The following is a list of the HTML elements used to display native express ad unit assets, with accompanying CSS classes. You can use the list to understand how the CSS classes you define for native ads express templates will be applied to the HTML that makes up the final ad content.

For example, as seen below, a CSS rule of .app-icon > img will apply to the image element displaying the app icon asset.

While you can define CSS classes when you customize a template, the HTML code generated by the template cannot be modified.
Available CSS classes as HTML elements

The following are samples of the different HTML classes you can use:

Ad Attribution

<div class="attribution"></div>

Title

<div class="title">
      <a class="title-link"></a>
</div>

App icon

<div class="app-icon"><a><img></a></div>

Button

<div class="button">
      <a class="button-link">
        <span class="button-text">
        <svg class="button-icon">
          <path class="button-icon-element"></path">
	        (...more svg elements with class="button-icon-element")
        <svg>
      </a>
</div>

Body

<div class="body">
      <a class="body-link"></a>
</div>

App store icon

<div class="app-store"><a><img></a></div>

Reviews

<div class="reviews">
      <div class="rating-stars">
	<svg class=”rating-star rating-star-full”></svg>
	<svg class=”rating-star rating-star-full”></svg>
	<svg class=”rating-star rating-star-full”></svg>
	<svg class=”rating-star rating-star-half”></svg>
	<svg class=”rating-star rating-star-empty”></svg>
      </div>
      <div class="reviews-count"></div>
</div>

Price

<div class=”price”></div>

URL

 <div class="url">
      <a class="url-link"></a>
 </div>

Image

<div class="image">
      <a class="image-link"><img></a>
</div>

Image gallery

<div class="image-gallery">
      <div class="scrollcontainer"></div>
</div>

Video

<div class="video"></div>
Sample HTML layout

The following is a sample HTML layout that demonstrates how the CSS classes you define in your ad unit’s CSS code will be used to generate the ad unit. It can also be used to help you locate them in a preview ad’s HTML code when you inspect it:


<body>
  <div class="ads">
    <div class="ad ad-1">
      <div class="attribution"></div>
      <div class="app-icon"><img></div>
<div class="button">
      <a class="button-link">
        <span class="button-text">
        <svg>
      </a>
</div>
      <div class="title">
        <a class="title-link"></a>
      </div>
    <div class="price"></div>
<div class="reviews">
      <div class="rating-stars">
	  <svg class="rating-star rating-star-full"></svg>
	  <svg class="rating-star rating-star-full"></svg>
	  <svg class="rating-star rating-star-full"></svg>
	  <svg class="rating-star rating-star-full"></svg>
	  <svg class="rating-star rating-star-empty"></svg>
      </div>
      <div class="reviews-count"></div>
</div>
    <div class="body">
      <a class="body-link"></a>
    </div>
    <div class="app-store"><img></div>
<div class="image-gallery">
      <div class="scrollcontainer"></div>
</div>
  </div>
</div>
</body>

Was this article helpful?
How can we improve it?
Sign in to AdMob

Sign in to see help for your AdMob account Sign in Don't have an AdMob account? Sign up today! Sign up for AdMob