К основному содержимому
Интеграция VAST и MRAID тегов

После прочтения этой статьи, вы узнаете как формировать VAST и MRAID теги и как загружать их на платформу Hybe

Gennadiy Akulov avatar
Автор: Gennadiy Akulov
Обновлено больше недели назад

Содержание

VAST

VAST (Video Ad Serving Template) - это тип видеокреатива, который можно использовать для запуска объявлений типа "видео + конечная карта". Конечная карта может быть статичным изображением, gif или reach media ad. VAST помогает понять, сколько людей просмотрели объявление до конца, или индекс досмотра (полное объявление или только 25%/50%/75%/100%).

Ниже показан пример креатива тега VAST:

<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>

Здесь следует изменить следующие детали:

  1. Click URL. Вместо "https://redirect.appmetrica.yandex.com/serve/819341837035720025?click_id={seanceid}&google_aid_md5={adid}&custom_parameter=5f3e6e8e4d504e2cacb6bc3d" укажите свой Click URL из MMP

  2. Video URL. Вместо "https://content.hybrid.ai/Hybe/09/D5/08D5BABADB8CD0D254C3865C2F08C318.mp4" укажите ссылку на видео со своего ad server;

  3. Энд карта URL (при ее наличии). Вместо "https://content.hybrid.ai/Hybe/39/09/3909342CE1CB96BC0B3C3130714A5773.gif" укажите ссылку на .png/.jpg/.jpeg/.gif энд карту с вашего ad server.

Как загружать VAST tag креативы в интерфейсе Hybe.

Выберите "Объявления" на левой панели интерфейса.

Кликните на кнопку "Создать".

Выберите раздел "Папку".

Затем перейдите в только что созданную папку и выберите в ней опцию "Создать объявление".

После этого вы увидите следующее окно:

Здесь вам нужно выбрать "Vast Tag Banner". Затем выберите опцию "XML-шаблон" и вставьте XML-код вашего объявления в поле ниже. Также дайте название объявлению и нажмите кнопку "Создать объявление".

После нажатия, вы увидите превью созданного объявления.

Как использовать VAST в рекламных кампаниях

Выберете ""Приложения" на левой боковой панели.

Выберете ваше приложение и перейдите к настройкам кампании.

В кампании, в основных настройках выберите тип баннера "3rd-party тег".

Затем перейдите к настройкам рекламы.

Здесь вам нужно выбрать опцию "Выбрать из библиотеки объявлений".

Затем найдите новую папку, которую вы создали ранее, и выберите ваше объявление VAST.

После этого нажмите "Сохранить и закрыть".

MRAID

MRAID, или "Mobile Rich Media Ad Interface Definitions", - это формат медиа объявлений, созданный для мобильных приложений.

Ниже вы можете увидеть пример простого баннера с тегом MRAID:

<!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>

В этом шаблоне вам нужно внести изменения:

  1. Ссылка на изображение (вместо "https://content.hybrid.ai/Hybrid/5E/87/5F87233D9F1310955ECA7C62379D10BA.jpg");

  2. Клик URL (вместо "https://www.google.com/")

Чтобы загрузить тег MRAID в интерфейс Hybe, перейдите в раздел "Объявления" на панели слева, создайте новую папку или используйте уже созданную папку для предыдущих объявлений. Затем нажмите "Создать" и выберите опцию "Новое объявление". После этого вы увидите следующее окно:

Здесь выберите опцию "3-rd Party Tag".

Теперь вы можете выбрать файл с вашим объявлением или нажать "Добавить новую пустую форму" (рекомендуется). Теперь вы можете вставить код вашего шаблона MRAID в определенное поле, как на скриншоте.

Также необходимо выбрать размер объявления, ввести название объявления и поставить галочку в поле "MRAID баннер". После этого нажмите кнопку "Создать объявление".

Вы можете добавить ваше новое объявление MRAID в кампанию, соответственно с объявлением с тегом VAST.

Нашли ответ на свой вопрос?