Set up Standard Banners and Native Ads in Google Ad Manager – Videos

Set up standard banners and native ads in Google Ad Manager can be challenging and error prone. Here, I separate these steps into several videos so that you can follow more easily.

  1. Create an ad unit. This ad unit is for both banner ads and native ads.

2. Create a native style for native ads.

Here is the complete HTML code.

<a href="%%CLICK_URL_UNESC%%##hb_native_linkurl##" target="_blank" class="pb-click">
  <div class="card">
    <div class="title">
        <h1>##hb_native_title##</h1>
    </div>
    <div class="attribution">
        <h1>##hb_native_brand##</h1>
    </div>
    </div>
</a>
<script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/native-render.js"></script>
<script>
    var pbNativeTagData = {};
    pbNativeTagData.pubUrl = "%%PATTERN:url%%";
    pbNativeTagData.adId = "%%PATTERN:hb_adid%%";
    // if you're using 'Send All Bids' mode, you should use %%PATTERN:hb_adid_BIDDER%%
    pbNativeTagData.requestAllAssets = true;
    window.pbNativeTag.renderNativeAd(pbNativeTagData);
</script>

Here is the complete CSS code.

.card { 
  width: 100vw; 
  height: 100vw; 
  background: url(##hb_native_image##) no-repeat; 
  background-size: cover; 
  background-position: center; 
}
.title { 
  color: rgba(0, 0, 0, 0.7); 
  padding: 4px; 
}
.title h1 { 
  background-color: #F8F8FF; 
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 
  font-size: 5vw; 
}
a { 
  text-decoration: none; 
}
.attribution { 
  color: rgba(0, 0, 0, 0.7); 
  padding: 4px; 
}
.attribution h1 { 
  background-color: #ffd724; 
  display: inline; 
  font-weight: bold; 
  font-size: 6vw; 
}

3. Create an order and its line items. There are two line items for this order: one is for banner and the other is for native ads.

Create the order and a line item for banner
Create a line item for native ads

Finally, go to the order and approve the line items. That finishes setting up the Google Ad Manager.

Any questions? Contact us at info@adrelevantis.com.

To understand what the Content-Driven Advertising is and how it works, please read the following posts:

Content-Relevant Native Product Ads Make Different

Content-Driven Native Ads with Google Ad Manager – Part 2

Leave a comment