This page walks you through the steps required to create a native ad template and a native creative to attach to your Prebid line items in Google Ad Manager (GAM).
For complete instructions on setting up Prebid line items in Google Ad Manager, see Google Ad Manager with Prebid Step by Step.
For more information about Google Ad Manager native ad setup, see the Google Ad Manager native ads documentation.
For information on the Multiplex ad option, see the Traffic Multiplex ads GAM documentation.
pb-native-fluid
.Every format needs at least one variable. Don’t worry, you can add more later. GAM requires at least one variable in order to move on to the next step.
title
.7.Click Continue.
Any link that needs to fire a click tracker must include class='pb-click'
.
If this creative is served, it will fire impression trackers on load. Clicking the link will fire the click tracker and the link will work as normal, in this case going to the hb_native_linkurl
destination.
The creative template HTML will depend on which of the three scenarios you’re implementing. You can choose to manage the native template:
For engineering instructions, see Native Implementation Guide.
There are three key aspects of the native template:
##hb_native_assetname##
. Note that macros can be placed in the body (HTML) and/or head (CSS) of the native creative.Example creative HTML:
<div class="sponsored-post">
<div class="thumbnail" style="background-image: url(##hb_native_image##);"></div>
<div class="content">
<h1><a href="%%CLICK_URL_UNESC%%##hb_native_linkurl##" target="_blank" class="pb-click">##hb_native_title##</a></h1>
<p>##hb_native_body##</p>
<div class="attribution">##hb_native_brand##</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/%%PATTERN:hb_format%%.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_BIDDERCODE%%;
pbNativeTagData.requestAllAssets = true;
window.ucTag.renderAd(document, pbNativeTagData);
</script>
When using Send All Bids, use pbNativeTagData.adId = "%%PATTERN:hb_adid_BIDDERCODE%%";
rather than pbNativeTagData.adId = "%%PATTERN:hb_adid%%";
for each bidder’s creative, replacing BIDDERCODE
with the actual bidder code, such as %%PATTERN:hb_adid_BidderA%%
.
Example CSS:
.sponsored-post {
background-color: #fffdeb;
font-family: sans-serif;
padding: 10px 20px 10px 20px;
}
.content {
overflow: hidden;
}
.thumbnail {
width: 120px;
height: 100px;
float: left;
margin: 0 20px 10px 0;
background-image: url(##native_image##);
background-size: cover;
}
h1 {
font-size: 18px;
margin: 0;
}
a {
color: #0086b3;
text-decoration: none;
}
p {
font-size: 16px;
color: #444;
margin: 10px 0 10px 0;
}
.attribution {
color: #fff;
font-size: 9px;
font-weight: bold;
display: inline-block;
letter-spacing: 2px;
background-color: #ffd724;
border-radius: 2px;
padding: 4px;
}
The GAM creative is identical whether the template is defined in the AdUnit or the external render JavaScript. There are two key aspects of the native creative in this scenario:
Example creative HTML:
<script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/%%PATTERN:hb_format%%.js"></script>
<script>
var ucTagData = {};
ucTagData.pubUrl = "%%PATTERN:url%%";
ucTagData.adId = "%%PATTERN:hb_adid%%";
// if you're using 'Send All Bids' mode, you should use %%PATTERN:hb_adid_BIDDER%%
ucTagData.requestAllAssets = true;
// if you want to track clicks in GAM, add the following variable
ucTagData.clickUrlUnesc = "%%CLICK_URL_UNESC%%";
window.uctag.renderAd(document, ucTagData);
</script>
When using Send All Bids, use ucTagData.adId = "%%PATTERN:hb_adid_BIDDERCODE%%";
rather than ucTagData.adId = "%%PATTERN:hb_adid%%";
for each bidder’s creative, replacing BIDDERCODE
with the actual bidder code, such as %%PATTERN:hb_adid_BidderA%%
.
The example CSS in the previous section applies here as well.
Now that you’ve defined your native template you can create your native creatives.
As of August 2020, privacy regulations have changed such that new creatives entered in GAM may require a declaration of the ad technology provider. The first step is to note the domain you serve the creative from. The examples above offer the use of the jsdelvr CDN. However, you may obtain the creative from a managed service or you may host it yourself. If you receive a warning from ad manager about “declaring self-created ad technology”, you should be able to work around this by editing the creative and filling out the “Associated ad technology providers” section as shown in this screen capture:
Follow the instructions in Google Ad Manager with Prebid Step by Step to duplicate your creative and attach it to your line item.