Skip to main content
All CollectionsUser's guides
VAST and MRAID tags configuration
VAST and MRAID tags configuration

In this article, you'll learn how to configure VAST and MRAID tags and how to upload them to the Hybe platform.

Gennadiy Akulov avatar
Written by Gennadiy Akulov
Updated over 3 years ago

Content

VAST

VAST (Video Ad Serving Template) is a video creative type, that you can use to run video + end card ads. The end card can be a static image, gif, or a rich media ad. VAST helps to understand how many people watched the ad to its end, or the completion rate (full ad or only 25%/50%/75%/100%).

Below you can see an example of VAST tag creative:

<VAST version="2.0">

<Error id="to-track-error"><![CDATA[{error_event_url}]]></Error>
<Ad id="ad_id">
<InLine>
<AdSystem>2.0</AdSystem>
<AdTitle>ad title</AdTitle>
<Impression id="to-track-impression"><![CDATA[http://impression-url]]></Impression>
<Error id="to-track-error"><![CDATA[{error_event_url}]]></Error>
<Creatives>
<Creative>
<Linear>
<Duration>00:00:30</Duration>
<TrackingEvents>
<Tracking event='start'><![CDATA[]]></Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough><![CDATA[https://redirect.appmetrica.yandex.com/serve/819341837035720025?click_id={seanceid}&google_aid_md5={adid}&custom_parameter=5f3e6e8e4d504e2cacb6bc3d]]></ClickThrough>
<ClickTracking><![CDATA[]]></ClickTracking>
</VideoClicks>
<MediaFiles>
<MediaFile delivery='progressive' width='1080' height='1920' type='video/mp4' bitrate='600' apiFramework='NONE'><![CDATA[https://content.hybrid.ai/Hybe/09/D5/08D5BABADB8CD0D254C3865C2F08C318.mp4]]>
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative>
<CompanionAds>
<Companion width="1080" height="1920">
<StaticResource creativeType="image/gif"><![CDATA[https://content.hybrid.ai/Hybe/39/09/3909342CE1CB96BC0B3C3130714A5773.gif]]></StaticResource>
<TrackingEvents>
<Tracking event='creativeView'><![CDATA[{companion_view_event_url}]]></Tracking>
</TrackingEvents>
<CompanionClickThrough><![CDATA[https://redirect.appmetrica.yandex.com/serve/819341837035720025?click_id={seanceid}&google_aid_md5={adid}&custom_parameter=5f3e6e8e4d504e2cacb6bc3d]]></CompanionClickThrough>
<CompanionClickTracking><![CDATA[%%CLICK_URL_UNESC%%]]></CompanionClickTracking>
</Companion>
</CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>

Here you need to change the next parts:

  1. Click URL. Instead of "https://redirect.appmetrica.yandex.com/serve/819341837035720025?click_id={seanceid}&google_aid_md5={adid}&custom_parameter=5f3e6e8e4d504e2cacb6bc3d" enter the click URL from your MMP;

  2. Video URL. Instead of "https://content.hybrid.ai/Hybe/09/D5/08D5BABADB8CD0D254C3865C2F08C318.mp4" enter a link to the video stored on your ad server;

  3. End card URL (if you have an end card). Instead of "https://content.hybrid.ai/Hybe/39/09/3909342CE1CB96BC0B3C3130714A5773.gif" enter a link to the .png/.jpg/.jpeg/.gif end card stored on your ad server.

How to Upload your VAST tag creative in Hybe interface

Select "Ads" on the left-side panel.

Click "Create" button.

Select "A new folder" option.

Then go to the newly created folder and select the "Create an ad" option inside it.

After that, you will see the next window:

Here you need to choose "Vast Tag Banner". Then select "XML-template" option and paste an XML-code of your ad in the field below. Also, give a name to the ad and click "Create an ad".

After clicking the button, you will see the newly created ad.

How to use VAST ads in campaigns

Select "Apps" on the left-side panel.

Choose your app and go to campaign settings.

In the campaign, basic settings choose Banner type "Third-party tag".

Then go to Ads settings.

Here you need to select the "Choose from ad Library" option.

Then find a new folder that you created before and select your VAST ad.

After that click "Save & Close".

MRAID

MRAID, or “Mobile Rich Media Ad Interface Definitions,” is a rich media ads format that is made for mobile apps.

Below you can see an example of a simple MRAID tag banner:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Advertisement</title>
<style type="text/css">
body
{
margin: 0;
width: 100%;
height: 100%;
}
#tx_ad
{
display: inline-block;
line-height: 0;
vertical-align: bottom;
}
#tx_ad *
{
line-height: normal;
}
</style>
<script src="mraid.js"></script>
</head>
<body>
<span id="tx_ad">
<img src="https://content.hybrid.ai/Hybrid/5E/87/5F87233D9F1310955ECA7C62379D10BA.jpg"
width="320"
height="480"
alt=""
title=""
border="0" />
</span>
<script>
var doClickViaMraid = function (elementId, clickUrl) {
function doReadyCheck() {
if (mraid.getState() == "loading") {
mraid.addEventListener("ready", mraidIsReady);
}
else {
showAd();
}
};

function showAd() {
var adContainer = document.querySelector("#" + elementId);

addEvent("click", adContainer, function (e) {
e.preventDefault();
mraid.open(clickUrl);
return false;
});
};

function mraidIsReady() {
mraid.removeEventListener("ready", mraidIsReady);
showAd();
};

function addEvent(evnt, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(evnt, func, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + evnt, func);
} else {
elem[evnt] = func;
}
};

doReadyCheck();
};
doClickViaMraid("tx_ad", "%%CLICK_URL_UNESC%%https://www.google.com/");
</script>
</body>
</html>

In this template, you need to change:

To upload your MRAID tag in the Hybe interface, go to "Ads" on the left-side panel, create a new folder, or use an already created folder for previous ads. Then click "Create" and select option "a new ad". After that, you will see the next window:

Here select "3-rd Party Tag" option.

Now you can choose a file with your ad or click "Add a new empty form" (recommended). Now you can paste a code of your MRAID template to a specific field as on the screenshot.

Also, you need to choose the size of your ad, enter the ad name and check the box "MRAID banner". After that, click "Create an ad".

You can add your new MRAID ad to the campaign accordingly with the VAST tag ad.

Did this answer your question?