Создание объявлений с использованием Google Mobile Ads SDK

В этой статье рассказывается, как генерируются объявления с использованием Google Mobile Ads SDK, какая информация необходима разработчику и как на основе этой информации создаются теги, определяющие параметры показа объявлений.

Вам доступны разные форматы объявлений, например баннеры в приложениях, расширяемые баннеры и полноэкранные объявления. У каждого формата объявлений есть свои объекты креативов и функции. Например, расширяемые баннеры при клике могут менять цвет фона и размер. Google Mobile Ads SDK соответствует стандартам MRAID.

Чтобы можно было использовать Google Mobile Ads SDK, вам необходимо сообщить сотрудничающему с вами разработчику идентификатор приложения, а также идентификаторы и размеры рекламных блоков.

Содержание

Как найти идентификатор приложения

  1. Войдите в Google Менеджер рекламы.
  2. Нажмите Инвентарь > Приложения.
  3. Найдите в списке или добавьте нужное мобильное приложение.
  4. Нажмите на значок копирования Нажмите, чтобы скопировать в столбце "Идентификатор приложения". Пример идентификатора: ca-app-pub-3940256099942544~3347511713.
  5. Отправьте скопированную информацию разработчику.

Как найти идентификатор и размеры рекламного блока

  1. Нажмите Инвентарь > Рекламные блоки.
  2. Нажмите на название нужного рекламного блока или создайте новый.
  3. Откройте вкладку Теги.
  4. В качестве типа тега укажите вариант "Тег для мобильных приложений" и нажмите Продолжить.
  5. На странице "Просмотр тега" скопируйте идентификатор и размеры рекламного блока. Отправьте скопированную информацию разработчику.

Дополнительные функции JavaScript

Чтобы получить максимальную пользу от возможностей Google Mobile Ads SDK, ознакомьтесь с материалами для разработчиков.

Ниже перечислены некоторые функции, настройка которых связана с изменением раздела <head> в коде креатива.

Развернуть все  Свернуть все

Доступ к функциям устройства

SDK предоставляет доступ к возможностям встроенных в приложения браузеров, которые есть в iOS и Android. Это позволяет разработчикам через HTML5 обращаться к поддерживаемым инструментам на устройстве, таким как акселерометр, гироскоп и компас.

документация для разработчиковПодробнее об этих функциях на устройствах Android и iOS…
События в приложениях

С помощью этой функции креатив может сообщать приложению о событии, запуская определенный код, и тем самым взаимодействовать с программой (например, менять цвет фона).

документация для разработчиков Подробнее об использовании событий в приложениях…
Развертывание изображений на весь экран

Если в полноэкранном режиме объявление занимает лишь часть экрана, вставьте следующий код в разделе <head> креатива:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>.

Образец кода для рекламы в приложении: открытие календаря по клику (с использованием MRAID 2.0)

Это шаблон баннера, который вначале отображается в нижней части экрана. Если пользователь нажимает на него, приложение календаря создает новое мероприятие, запрашивая на это разрешение.

Поведение и элементы пользовательского интерфейса

Креатив включает следующие элементы интерфейса:

  • Графический файл баннера, значения его высоты и ширины.
  • Сведения о мероприятии: сводка, описание, место проведения, дата начала и окончания.
Название Тип Обязательно Описание
Графический файл баннера Файл Да Графический файл баннера.
Ширина баннера Число Да Ширина баннера.
Высота баннера Число Да Высота баннера.
Сведения о мероприятии Текст Да Сводные данные о мероприятии.
Описание мероприятия Текст Да Информация о мероприятии.
Место проведения мероприятия Текст Нет Где будет проходить мероприятие.
Дата начала мероприятия Текст Да Дата начала мероприятия. Дата должна иметь следующий вид: "2016-10-22T00:00-05:00". Это означает, что мероприятие будет проходить 22 октября 2016 г. с 00:00 до 05:00.
Дата окончания мероприятия Текст Да Дата окончания мероприятия. Дата должна иметь следующий вид: "2016-10-22T00:00-05:00". Это означает, что мероприятие будет проходить 22 октября 2016 г. с 00:00 до 05:00.
  

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a href="#" onClick="addToCalendar()"; return false;>
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<script>

// Check whether mraid is ready by adding event listener
function doReadyCheck(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  }else{
    showMyAd();
  }
}

// Once mraid is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Only show Ad when mraid is ready
function showMyAd(){
  var advertElement = document.getElementById("normal");
  advertElement.style.display = 'block';
}

// Add event to the calendar using appropriate input if the device supports calendar manipulation
function addToCalendar(){

  // Register the click by creating an image
  var x = document.createElement("IMG");
  x.setAttribute("src", "%%CLICK_URL_ESC%%");
  window.top.document.body.appendChild(x);

  if(mraid.getVersion()=="2.0"){
    mraid.createCalendarEvent({summary: "[%EventSummary%]", description: "[%EventDescription%]", location: "[%EventLocation%]", start: "[%EventStartDate%]", end: "[%EventEndDate%]"}); 
  } 
  return false;
}

doReadyCheck();
</script>
</body>
</html>

Название тестового рекламного блока: ali_Calendar.

Образец кода для медийной рекламы: шаблон расширяемого объявления внизу экрана (с использованием MRAID 2.0)

Это шаблон рекламного блока из двух компонентов, который исходно имеет вид баннера и показывается в нижней части экрана. Когда пользователь нажимает на такой баннер, объявление расширяется, принимая заданный размер. Пользователь, нажавший на раскрывшееся объявление, переадресуется на URL перехода по клику.

Ширина объявления может соответствовать размеру баннера или определяться параметром FullWidthResize (когда он имеет значение "Yes", увеличенное объявление занимает всю ширину экрана).

Поведение и элементы пользовательского интерфейса

Ниже описаны элементы интерфейса, входящие в креатив.

  • Объекты креатива (для каждого из них необходимо добавить файл, а также указать ширину и высоту):
    • графический компонент баннера;
    • компонент баннера другого размера;
    • значок кнопки "Закрыть".
  • Кнопка закрытия может отображаться в правом или левом верхнем углу экрана.
  • Можно менять цвет фона объявления.
Название Тип Обязательно Описание
Графический файл баннера Файл Да Изображение, которое будет показываться в качестве баннера.
Высота баннера Число Да Значение высоты баннера.
Ширина баннера Число Да Значение ширины баннера.
Цвет фона Текст Да Цвет фона для области, занимаемой увеличенным объявлением и баннером.
URL перехода по клику URL Да URL, на который будут перенаправляться пользователи, нажавшие на увеличенное объявление.
Файл увеличенного изображения Файл Да Изображение, которое будет показываться при нажатии на баннер.
Высота увеличенного изображения Число Да Значение высоты увеличенного изображения.
Значение ширины увеличенного изображения Число Да Ширина увеличенного изображения.
Значок "Закрыть" Файл Да Графический файл для кнопки "Закрыть".
Ширина значка "Закрыть" Число Да Значение ширины кнопки "Закрыть" (как правило, 30).
Высота значка "Закрыть" Число Да Значение высоты кнопки "Закрыть" (как правило, 30).
Положение кнопки "Закрыть" Список Нет Кнопку "Закрыть" можно расположить в правом или левом верхнем углу экрана. Возможные значения: "Right" и "Left". Если ничего не указано, кнопка будет отображаться в правом верхнем углу экрана.
Раскрытие объявления на всю ширину экрана Список Нет Если указано значение "Yes", увеличенное объявление будет занимать всю ширину экрана Если указано значение "No", то ширина будет такой же, как у исходного баннера. Возможные значения: "No" (установлено по умолчанию) и "Yes".
  

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
<style>
#close_button {
  position: absolute;
  top: 4px;
  right: 4px;
  display:block;
}

#resized img {
  display : block;
  margin : auto;
}
</style>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="resize();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]"  />
</a>
</div>

<div id="resized" style="display:none; top:0px;">
<a onClick="openURL()">
<img width="[%ResizedImageWidth%]"  height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]"/>
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/> 
</div>
</div>

<script>
<!--
// Variables
var closeButton = document.getElementById("close_button");
var bodyElement = document.body;
var advertElement = document.getElementById("normal");
var resizedElement = document.getElementById("resized");
var resizeBannerWidth;

function changeBodyElementStyle() {
  // Change background color
  if ("[%ResizedBackgroundColor%]") {
    bodyElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
    resizedElement.style.backgroundColor = "[%ResizedBackgroundColor%]";	
  }
}

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

//Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

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

// Set resizing properties and resize
function resize(){
	// If FullWidthResize is "Yes", then the resized advert takes up the whole width. Otherwise takes up the width of the original banner
	if ("[%FullWidthResize%]" == "Yes") {
	    resizeBannerWidth = screen.width;
	} else {
	    resizeBannerWidth = mraid.getDefaultPosition().width;
	}	
	
  if(mraid.getVersion()=="2.0"){
    if ("[%PositionOfCloseButton%]" === "Left") {
	  closeButton.style.left = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-left", "allowOffscreen":false});
	} else {
	  closeButton.style.right = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-right", "allowOffscreen":false});
	}
    mraid.resize();
	return false;
  }
  else{
    return true;
  }
}

// Displays the advert and add an event listener to it to detect whether to resize
function showMyAd(){
  advertElement.style.display = "inline";
  mraid.addEventListener("stateChange",updateAd); 
}

// updateAd is called when MRAID changes state - calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "resized"){
    toggleLayer('normal', 'resized');
  }else if(state == "default"){
    toggleLayer('resized', 'normal');
  }
}

// Goes to the other state (either resized or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = 'block';
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

Название тестового рекламного блока: ali_resizeBanner.

Это шаблон рекламного блока из двух компонентов, который исходно имеет вид баннера и показывается в нижней части экрана. Когда пользователь нажимает на такой баннер, объявление расширяется на весь экран. Пользователь, нажавший на раскрывшееся объявление, переадресуется на URL перехода по клику.

Этот шаблон включает стандартную для MRAID кнопку закрытия.

Поведение и элементы пользовательского интерфейса

Ниже описаны элементы интерфейса, входящие в креатив.

  • Объекты креатива:
    • графический компонент баннера (необходимо также указать высоту и ширину);
    • компонент расширенного баннера.
  • Можно менять цвет фона баннера (как исходного, так и расширенного).
Название Тип Обязательно Описание
Графический файл баннера Файл Да Изображение, которое будет показываться в качестве баннера.
Высота баннера Число Да Значение высоты баннера.
Ширина баннера Число Да Значение ширины баннера.
Цвет фона Текст Да Цвет фона для области, занимаемой баннером.
URL перехода по клику URL Да URL, на который будут перенаправляться пользователи, нажавшие на увеличенное объявление.
Расширенный графический файл Файл Да Изображение, которое будет показываться при нажатии на баннер.
Высота расширенного изображения Число Да Значение высоты расширенного изображения.
Ширина расширенного изображения Число Да Значение ширины расширенного изображения.
  

       
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="expand();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<div id="expanded" style="display:none;top:0px;text-align:center">
<a onClick="openURL()">
<img width="[%ExpandedImageWidth%]"  height="[%ExpandedImageHeight%]" src="[%ExpandedImageFile%]" />
</a>
</div>

<script>
<!--

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

// Change background color if present
function changeBodyElementStyle() {
  if ("[%BackgroundColor%]") {
    var bodyElement = document.body;
    bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }
}	

// Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

// Once MRAID is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

function showMyAd(){
  // Displays the advert
  var advertElement = document.getElementById("normal");
  advertElement.style.display = "inline";

  // Add event listener to detect whether to expand or not
  mraid.addEventListener("stateChange",updateAd); 

  // Change background color of the expanded advert
  var expandedDiv = document.getElementById("expanded");
  if ("[%BackgroundColor%]") {
    expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
  }
}

function expand() {
  if(mraid.getVersion()=="2.0"){
    mraid.expand();
    return false;
  }
  else {
    return true;
  }
}

// updateAd is called when mraid changes state
// Calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "expanded"){
    toggleLayer('normal', 'expanded');
  }else if(state == "default"){
    toggleLayer('expanded', 'normal');
  }
}

// Goes to the other state (either expands or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = "block";
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

Название тестового рекламного блока: ali_expandDefaultClose.

Пример кода, обеспечивающего автоматическое закрытие межстраничного объявления
Функция автоматического закрытия используется только для межстраничных объявлений с прямым резервированием. Если для показа межстраничного объявления применяется динамическое размещение (т. е. Ad Exchange, AdSense или AdMob), то закрыть его может только сам пользователь.

Как сделать так, чтобы межстраничное объявление закрывалось автоматически:

  • Используйте в объявлении код, закрывающий его через указанное время. Образец кода приведен ниже.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
      <script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
      <script>
        <!--
          function
          _admStartCountDown(){setTimeout('admob.opener.close()',parseInt('[%displayTime%]')*1000)}
          function
          _admOnload(){if(admob.opener.isOverlayShowing()){_admStartCountDown()}else{admob.events.addEventListener('onshow',
          _admStartCountDown)}}
          if(window.addEventListener){window.addEventListener("load",_admOnload,false)}else{window.attachEvent("onload",_admOnload)}
        //-->
      </script>
  </head>
  <body>
    [Your_AdCode_Goes_Here]
  </body>
</html>
Целевое окно-оверлей в приложении

Функция admob.opener.openOverlay() открывает полноэкранный браузер, всплывающий из нижней части экрана. У этого браузера нет строки состояния, а в его верхнем левом углу всегда показывается кнопка закрытия. Указанная функция подходит для расширяемых объявлений в случаях, когда полноэкранный креатив может размещаться на отдельной странице.

Ниже приведен образец кода простого баннера, при показе которого полноэкранный элемент загружается во всплывающем окне браузера. Подставьте в код свои значения вместо плейсхолдеров. Этот код можно использовать при создании шаблона креатива (если это допустимо в вашей сети).

  • [BANNER_UNIT] – URL баннера.
  • [WIDTH] – ширина баннера.
  • [HEIGHT] – высота баннера.
  • [FULLSCREEN_UNIT] – URL полноэкранного креатива. Полноэкранный элемент должен содержать код JavaScript, который при нажатии на объявление выполняет синтаксический анализ целевого URL и перенаправляет пользователя на целевую страницу. Более подробную информацию вы найдете в разделе Обработка целевого URL для полноэкранного элемента.
  • [DESTINATION_URL] – URL целевой страницы.
  • [FALLBACK_CLICKURL] – резервный целевой URL, который используется, если функция JavaScript не будет вызвана.
  • [ORIENTATION] – допустимая ориентация для целевого URL ("p" – вертикальная, "l" – горизонтальная, а в случае отсутствия значения ориентация может быть любой).

Образец кода креатива:


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
</head>

<body>
<a href="[FALLBACK_CLICKURL]" 
onClick="admob.opener.openOverlay('%%CLICK_URL_ESC%%[FULLSCREEN_UNIT]?destination=[DESTINATION_URL]', 
'[ORIENTATION]'); return false;"><img border="0" 
src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>
</html>

Обработка целевого URL для полноэкранного элемента

Функция admob.opener.openOverlay() не позволяет указывать целевой URL необходимой HTML-страницы.

Предположим, при определении полноэкранного элемента нужный URL задан в форме пары "ключ-значение" (например, "https://ssylka.na.polnoekrannij.element?destination=https://vash.tselevoj.url"). В этом случае для регистрации кликов и перенаправления пользователей на целевую страницу можно создать функцию JavaScript и добавить фрагмент HTML-кода.

Образец кода страницы:


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>

<script type="text/javascript">
function destinationUrl() {
  // Получить текущий URL после ?
  var destinationUrl = window.location.search;

  // Убрать начальный ?
  destinationUrl = destinationUrl.substring(1);
  // Проанализировать пару destination=url
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // ключ: destination
  var value = kvPair[1]; // значение: url
 var url = decodeURIComponent(value);

  // Открыть целевую страницу внутри оверлея
  window.location = url;

  // Открыть целевую страницу во внешнем браузере
  // admob.opener.openUrl(url, true);
}
</script>
</head>

<body>
<div style="position:relative;">
<!-- Загрузить источник контента в окно iframe -->
<iframe src="https://creative.admob.com/t1/bestBuy/tradeinJul/gi/" 
align="middle" frameborder=0 width=320 height=480 marginheight=0 marginwidth=0 scrolling=no></iframe>
<!-- Создать активную область -->
<a href="#" onClick="destinationUrl(); return false;" style="position:absolute; top:0; left:0; 
display:inline-block; width:320px; height:480px; z-index:5;"></a>
</div>
</body>
</html>

Совместимость с MRAID

Google Mobile Ads SDK позволяет использовать для рекламы в мобильных приложениях стандарт IAB MRAID. Вы можете выбрать вариант "MRAID v1" или "MRAID v2" в настройках таргетинга позиции, а именно в разделе Добавить таргетинг > Возможности устройства.

Требования MRAID:

  • Стандарт MRAID 2 требует наличия сервисов Google Play версии 7.8 или более поздней для Android и наличия Google Mobile Ads SDK версии 7.4.0 или более поздней для iOS.
  • Стандарт MRAID 3 требует наличия сервисов Google Play версии 15.0.0 или более поздней для Android и наличия Google Mobile Ads SDK версии 7.30.0 или более поздней для iOS.

Чтобы использовать функции MRAID, необходимо импортировать в креатив файл mraid.js. Для этого нужно добавить в код креатива фрагмент <script src="mraid.js">. Google Mobile Ads SDK, совместимый с MRAID, заменит адрес в этом фрагменте фактическим URL, указывающим на экземпляр кода MRAID. То же самое сделает любой другой SDK с поддержкой MRAID, только фактический URL будет отличаться.

При желании вы можете использовать в креативе одновременно библиотеки MRAID и функции Google Mobile Ads SDK.

Функция mraid.resize() и другие похожие на нее срабатывают только после нажатия на объявление. Благодаря этому вредоносный креатив не может автоматически изменить размер и занять весь экран.
документация для разработчиковПодробнее о поддержке MRAID для Android или iOS…

Эта информация оказалась полезной?

Как можно улучшить эту статью?

Требуется помощь?

Попробуйте следующее:

Опубликовать на справочном форуме Получите ответы от участников сообщества
Связаться с нами Расскажите о своей проблеме нашим сотрудникам
true
Примечания к выпускам

Ознакомьтесь с новостями Менеджера рекламы и изменениями в Справочном центре.

Подробнее…

Поиск
Очистить поле поиска
Закрыть поиск
Главное меню
12640874361814325555
true
Поиск по Справочному центру
true
true
true
true
true
148
false
false