Put clickable hotspots and product cards on a video ad, each between two seconds of the video, each with its own link. A click is the ad's click and is counted per overlay too.
Below: one ad of the made-up outdoor brand Fjellpeak, with products from its product feed, as a pre-roll and mid-roll in a publisher's own video player, on live zones of the demo account.
The publisher's own HTML5 player with its own video. Press play: Fjellpeak's 15-second ad runs first, with a hotspot and product cards from its product feed at the seconds the advertiser chose. Click a card: the video pauses, the shop opens on that product, and the ad plays on when you come back. Then the publisher's video starts, and at 10 seconds a mid-roll runs with the same overlays.
| When | Type | Shows |
|---|---|---|
| 1–5 s | Hotspot | Shop the Fjellpeak range |
| 3–7.5 s | Product card |  Ridgeline 2 backpacking tent · 249.00 EUR |
| 8–11.5 s | Product card |  Summit 38 L hiking pack · 139.00 EUR |
| 9–14 s | Hotspot | Free returns for 60 days |
| 11.5–15 s | Product card |  Stormline 3-layer rain jacket · 179.00 EUR |
The zone's code wraps your existing HTML5 player. The pre-roll and mid-roll slots, and which video zone fills them, are set on the zone; the overlays come with the ad.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- around your own player -->
<div id="video_wrap">
<video id="my_player" src="your-video.mp4" controls playsinline></video>
</div>
<script>
goCtrl.add({"plugin":"invideo","playerwrapper":"video_wrap","sid":12512926,"playertype":"video","advertise":"Advertisement","close_play":"Close & Play","skip_banner_when_video":true});
</script>
<style>
#video_wrap{position:relative;width:100%;aspect-ratio:16/9}
#vid_wrapper_video_wrap{z-index:5000;position:absolute;top:0;left:0}
#vid_state_video_wrap{position:absolute;left:8px;bottom:8px;padding:5px 8px;z-index:5000;background:rgba(0,0,0,.7);color:#fff;font:12px Arial;border-radius:5px}
#vid_skip_video_wrap{position:absolute;right:8px;bottom:8px;padding:5px 8px;z-index:5000;background:rgba(0,0,0,.7);color:#fff;font:12px Arial;border-radius:5px}
</style>In the panel: the video ad form, Shoppable video: overlays, where a product card can be filled from a product feed. Through the API: video_overlays on the ad.
PUT /api/v1/campaigns/ron/{campaignId}/ads/{adId}
{
"video_overlays": [
{
"type": "hotspot",
"start": 1,
"end": 5,
"pos": "tl",
"label": "Shop the Fjellpeak range",
"url": "https://shop.example/range"
},
{
"type": "product",
"start": 3,
"end": 7.5,
"pos": "br",
"title": "Ridgeline 2 backpacking tent",
"price": "249.00 EUR",
"image": "https://shop.example/img/tent.jpg",
"url": "https://shop.example/tent",
"label": "Shop"
}
]
}Publishers who use another video player (their own, or a third-party one) take the zone's VAST tag. It carries the same overlays as a SIMID interactive layer, the IAB standard for interactive video ads: a player that supports SIMID loads it over the ad and keeps it in step with the video. This small test player does exactly that: press play.
Press play: the player fetches the VAST, plays the ad and runs its interactive layer.
For your player's ad tag setting.
https://g2.gsrv.dev/vast.go?spaceid=12512837&subid=&keywords=&altxml=
Next to the video file: a SIMID InteractiveCreativeFile with the overlays as its AdParameters, and the same overlays as an Extension that our own players read. Every link goes through the ad server, so each overlay's shows and clicks are counted on their own.
Loading…
The overlays work in every goCtrl video unit, also without a player of the publisher's: here the same ad as an in-page video in an article.
<!-- once per page, in <head> -->
<script src="https://g2.gsrv.dev/ctrl/19460.js"></script>
<!-- where it goes -->
<div id="id_12512836" style="max-width:426px;max-height:240px;display:none"></div>
<script>
goCtrl.add({"plugin":"inpage_video","sid":12512836,"display":"id_12512836","skip_btn":true,"skip_after_sec":5,"show_countdown":true,"skip_position":"top_right","auto_hide":true,"controls":false,"muted":true,"autoplay":true,"loop":true,"advertise":"Advertisement"});
</script>About the format: Shoppable video ads · all ad formats · all live demos
Every format on this page is part of the GoAdserver ad server. Talk to us about your platform.
Contact us