Native ads come as data (image, headline, text, link) and a template turns them into HTML, so they look like the rest of your page.
You don't have to design anything: pick one of the ready-made layouts in the zone's Code tab and paste the code. Every box below is a live native zone on a demo account with 15 made-up advertisers. Reload the page to see other ads.
Three ads in a row under an article: image, headline, short text, the advertiser's link and a Sponsored label. This is the ready-made Cards layout, picked in the zone's Code tab: the code below is exactly what the panel gives you, styles included.
More from around the web
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512464 .gnl, #id_12512464 .gnl *{box-sizing:border-box}
#id_12512464 .gnl{font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1d1b33}
#id_12512464 .gnl a{text-decoration:none;color:inherit}
#id_12512464 .gnl img{display:block;max-width:100%;border:0}
#id_12512464 .gnl-title{display:block;font-weight:700;font-size:15px;line-height:1.3}
#id_12512464 .gnl-desc{display:block;color:#5d5b73;font-size:13px;line-height:1.45}
#id_12512464 .gnl-url{color:#8a88a0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#id_12512464 .gnl-ad{flex:none;font-size:11px;color:#5d5b73;border:1px solid #e3e2ec;border-radius:4px;padding:1px 6px}
#id_12512464 .gnl-cards .gnl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0 0 16px}
#id_12512464 .gnl-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #e6e5ee;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px -12px rgba(29,27,51,.25)}
#id_12512464 .gnl-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
#id_12512464 .gnl-txt{display:flex;flex-direction:column;flex:1;gap:6px;padding:12px 14px 14px}
#id_12512464 .gnl-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
</style>
<div id="id_12512464"></div>
<script>
goCtrl.add({"plugin":"native","sid":12512464,"display":"id_12512464",
"tpl_body":'<div class="gnl gnl-cards">{body}</div>',
"tpl_row":'<div class="gnl-row">{items}</div>',
"tpl_item":'<a class="{href_itemid} gnl-card" href="#">{image}<span class="gnl-txt"><span class="gnl-title">{title}</span><span class="gnl-desc">{description}</span><span class="gnl-foot"><span class="gnl-url">{displayurl}</span><span class="gnl-ad">Sponsored</span></span></span></a>'
});
</script>Small thumbnails with a headline, stacked in a sidebar or at the end of an article. The ready-made Sidebar list layout.
Sponsored
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512466 .gnl, #id_12512466 .gnl *{box-sizing:border-box}
#id_12512466 .gnl{font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1d1b33}
#id_12512466 .gnl a{text-decoration:none;color:inherit}
#id_12512466 .gnl img{display:block;max-width:100%;border:0}
#id_12512466 .gnl-title{display:block;font-weight:700;font-size:15px;line-height:1.3}
#id_12512466 .gnl-desc{display:block;color:#5d5b73;font-size:13px;line-height:1.45}
#id_12512466 .gnl-url{color:#8a88a0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#id_12512466 .gnl-ad{flex:none;font-size:11px;color:#5d5b73;border:1px solid #e3e2ec;border-radius:4px;padding:1px 6px}
#id_12512466 .gnl-list{display:flex;flex-direction:column;gap:12px}
#id_12512466 .gnl-li{display:flex;align-items:center;gap:12px}
#id_12512466 .gnl-li img{flex:none;width:96px;height:64px;object-fit:cover;border-radius:8px}
#id_12512466 .gnl-li .gnl-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
#id_12512466 .gnl-li .gnl-title{font-size:14px}
</style>
<div id="id_12512466"></div>
<script>
goCtrl.add({"plugin":"native","sid":12512466,"display":"id_12512466",
"tpl_body":'<div class="gnl gnl-list">{body}</div>',
"tpl_row":'{items}',
"tpl_item":'<a class="{href_itemid} gnl-li" href="#">{image}<span class="gnl-txt"><span class="gnl-title">{title}</span><span class="gnl-url">{displayurl} · Sponsored</span></span></a>'
});
</script>Square photos with the headline on the image, four in a row; on a phone they wrap. The ready-made Image tiles layout: eye-catching, best with good photos and short headlines.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512467 .gnl, #id_12512467 .gnl *{box-sizing:border-box}
#id_12512467 .gnl{font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1d1b33}
#id_12512467 .gnl a{text-decoration:none;color:inherit}
#id_12512467 .gnl img{display:block;max-width:100%;border:0}
#id_12512467 .gnl-title{display:block;font-weight:700;font-size:15px;line-height:1.3}
#id_12512467 .gnl-desc{display:block;color:#5d5b73;font-size:13px;line-height:1.45}
#id_12512467 .gnl-url{color:#8a88a0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#id_12512467 .gnl-ad{flex:none;font-size:11px;color:#5d5b73;border:1px solid #e3e2ec;border-radius:4px;padding:1px 6px}
#id_12512467 .gnl-tiles .gnl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 12px}
#id_12512467 .gnl-tile{position:relative;display:block;border-radius:12px;overflow:hidden}
#id_12512467 .gnl-tile img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
#id_12512467 .gnl-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:32px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
#id_12512467 .gnl-cap .gnl-title{font-size:14px;color:#fff}
#id_12512467 .gnl-cap .gnl-ad{color:#fff;border-color:rgba(255,255,255,.6)}
</style>
<div id="id_12512467"></div>
<script>
goCtrl.add({"plugin":"native","sid":12512467,"display":"id_12512467",
"tpl_body":'<div class="gnl gnl-tiles">{body}</div>',
"tpl_row":'<div class="gnl-row">{items}</div>',
"tpl_item":'<a class="{href_itemid} gnl-tile" href="#">{image}<span class="gnl-cap"><span class="gnl-title">{title}</span><span class="gnl-ad">Sponsored</span></span></a>'
});
</script>One wide row per ad, image left and text right, like the articles in a news feed. On a phone the image moves above the text. The ready-made Feed layout.
Latest
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512617 .gnl, #id_12512617 .gnl *{box-sizing:border-box}
#id_12512617 .gnl{font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1d1b33}
#id_12512617 .gnl a{text-decoration:none;color:inherit}
#id_12512617 .gnl img{display:block;max-width:100%;border:0}
#id_12512617 .gnl-title{display:block;font-weight:700;font-size:15px;line-height:1.3}
#id_12512617 .gnl-desc{display:block;color:#5d5b73;font-size:13px;line-height:1.45}
#id_12512617 .gnl-url{color:#8a88a0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#id_12512617 .gnl-ad{flex:none;font-size:11px;color:#5d5b73;border:1px solid #e3e2ec;border-radius:4px;padding:1px 6px}
#id_12512617 .gnl-feed{display:flex;flex-direction:column;gap:16px}
#id_12512617 .gnl-fi{display:flex;gap:16px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid #ecebf2}
#id_12512617 .gnl-fi img{flex:none;width:38%;max-width:260px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
#id_12512617 .gnl-fi .gnl-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
#id_12512617 .gnl-fi .gnl-title{font-size:17px}
@media (max-width:520px){#id_12512617 .gnl-fi{flex-direction:column}#id_12512617 .gnl-fi img{width:100%;max-width:none}}
</style>
<div id="id_12512617"></div>
<script>
goCtrl.add({"plugin":"native","sid":12512617,"display":"id_12512617",
"tpl_body":'<div class="gnl gnl-feed">{body}</div>',
"tpl_row":'{items}',
"tpl_item":'<a class="{href_itemid} gnl-fi" href="#">{image}<span class="gnl-txt"><span class="gnl-ad">Sponsored</span><span class="gnl-title">{title}</span><span class="gnl-desc">{description}</span><span class="gnl-url">{displayurl}</span></span></a>'
});
</script>Headlines with their link and no images: a light, text-only block for under an article or a narrow column. The ready-made Sponsored links layout.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<style>
#id_12512619 .gnl, #id_12512619 .gnl *{box-sizing:border-box}
#id_12512619 .gnl{font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1d1b33}
#id_12512619 .gnl a{text-decoration:none;color:inherit}
#id_12512619 .gnl img{display:block;max-width:100%;border:0}
#id_12512619 .gnl-title{display:block;font-weight:700;font-size:15px;line-height:1.3}
#id_12512619 .gnl-desc{display:block;color:#5d5b73;font-size:13px;line-height:1.45}
#id_12512619 .gnl-url{color:#8a88a0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#id_12512619 .gnl-ad{flex:none;font-size:11px;color:#5d5b73;border:1px solid #e3e2ec;border-radius:4px;padding:1px 6px}
#id_12512619 .gnl-links{display:flex;flex-direction:column;border:1px solid #e6e5ee;border-radius:12px;padding:6px 16px;background:#fff}
#id_12512619 .gnl-hd{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a88a0;padding:8px 0 4px}
#id_12512619 .gnl-lk{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid #f0eff5}
#id_12512619 .gnl-lk:first-of-type{border-top:0}
#id_12512619 .gnl-lk .gnl-title{font-size:15px;color:#1a0dab}
#id_12512619 .gnl-lk:hover .gnl-title{text-decoration:underline}
</style>
<div id="id_12512619"></div>
<script>
goCtrl.add({"plugin":"native","sid":12512619,"display":"id_12512619",
"tpl_body":'<div class="gnl gnl-links"><span class="gnl-hd">Sponsored links</span>{body}</div>',
"tpl_row":'{items}',
"tpl_item":'<a class="{href_itemid} gnl-lk" href="#"><span class="gnl-title">{title}</span><span class="gnl-url">{displayurl}</span></a>'
});
</script>Every layout is just three small templates (body, row, item) with placeholders for the image, headline, text and link, so you can change any of them or write your own. Here: cards in a 2 × 2 grid, styled by the page's own CSS.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<div id="id_12512465"></div>
<script>
goCtrl.add({"plugin":"native","sid":12512465,"display":"id_12512465",
"tpl_body":'<div class="nt-grid">{body}</div>',
"tpl_row":'<div class="nt-row">{items}</div>',
"tpl_item":'<a class="{href_itemid} nt-card" href="#">{image}<span class="c"><b>{title}</b><p>{description}</p><small><em style="font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{displayurl}</em><span>Sponsored</span></small></span></a>'
});
</script>A slim column of round ad thumbnails docked to the edge of the screen; pointing at one opens the ad. Look at the right side of this page: that bar is this zone. Position, number of items and colours are zone settings, no placeholder needed.
→ The native bar is live on the right edge of your screen. Point at a thumbnail.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<script>
goCtrl.add({"plugin":"native_bar","sid":12512468});
</script>Every format on this page is part of the GoAdserver ad server. Talk to us about your platform.
Contact us