AdControl в HTML 5 и JavaScript
Предупреждение
По состоянию на 1 июня 2020 г. платформа Монетизации Microsoft Ad для приложений Windows UWP будет закрыта. Подробнее
В этом пошаговом руководстве показано, как использовать класс AdControl для отображения рекламных баннеров в приложении JavaScript или HTML универсальная платформа Windows (UWP) для Windows 10 и Windows 11.
Полный пример проекта, демонстрирующий добавление рекламных баннеров в приложение JavaScript/HTML, см. в примерах рекламы на сайте GitHub.
Необходимые компоненты
- Установите пакет SDK Microsoft Advertising с Visual Studio 2015 или более поздней версией Visual Studio. Инструкции по установке см . в этой статье.
Примечание.
Если вы установили пакет SDK для Windows 10 версии 10.0.14393 (юбилейное обновление) или более позднюю версию пакета SDK для Windows, необходимо также установить библиотеку WinJS . Эта библиотека используется для включения в предыдущие версии пакета SDK для Windows 10, но начиная с пакета SDK для Windows 10 версии 10.0.14393 (юбилейное обновление) эта библиотека должна быть установлена отдельно.
Интеграция баннерного объявления в приложение
В Visual Studio откройте проект или создайте новый проект.
Примечание.
Если вы используете существующий проект, откройте файл Package.appxmanifest в проекте и убедитесь, что выбрана возможность Интернета (клиента ). Вашему приложению нужна эта возможность для получения тестовой рекламы и живой рекламы.
Если проект предназначен для любого ЦП, обновите проект, чтобы использовать выходные данные сборки для конкретной архитектуры (например, x86). Если проект предназначен для любого ЦП, вы не сможете успешно добавить ссылку на библиотеку Microsoft Advertising в следующих шагах. Дополнительные сведения см. в статье Об ошибках ссылок, вызванных назначением любого ЦП в проекте.
Добавьте ссылку на пакет SDK Microsoft Advertising в проекте:
- В окне Обозреватель решений щелкните правой кнопкой мыши ссылки и выберите "Добавить ссылку...
- В диспетчере ссылок разверните универсальные окна, щелкните расширения и установите флажок рядом с пакетом SDK Microsoft Advertising для JavaScript (версия 10.0).
- В диспетчере ссылок нажмите кнопку "ОК".
Откройте файл index.html (или другой html-файл, соответствующий проекту).
<В разделе головы> после ссылок на JavaScript проекта default.css и main.js добавьте ссылку на ad.js.
<!-- Advertising required references --> <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>Примечание.
Эта строка должна быть помещена в <раздел головы> после включения main.js; в противном случае при сборке проекта возникает ошибка.
Измените <раздел текста> в файле default.html (или другой html-файл, соответствующий проекту), чтобы включить div для AdControl. Назначьте свойства applicationId и adUnitId adUnitId adControl тестовой единице рекламы. Кроме того, настройте высоту и ширину , чтобы элемент управления был одним из поддерживаемых размеров рекламы для баннеров.
Примечание.
Каждый adControl имеет соответствующий рекламный блок, используемый нашими службами для обслуживания рекламы в элементе управления, и каждый рекламный блок состоит из идентификатора и идентификатора приложения. В этих шагах вы назначите тестовый идентификатор и значения идентификатора приложения элементу управления. Эти значения теста можно использовать только в тестовой версии приложения. Перед публикацией приложения в Магазине необходимо заменить эти тестовые значения динамическими значениями из Центра партнеров.
<div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}"> </div>Скомпилируйте и запустите приложение, чтобы увидеть его с рекламой.
В следующем примере показан полный index.html для простого приложения.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AdControlExampleApp</title>
<!-- WinJS references -->
<link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
<script src="lib/winjs-4.0.1/js/base.js"></script>
<script src="lib/winjs-4.0.1/js/ui.js"></script>
<!-- AdControlExampleApp references -->
<link href="css/default.css" rel="stylesheet" />
<script src="js/main.js"></script>
<!-- Required reference for AdControl -->
<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
</head>
<body>
<div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1"
data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
</div>
<p>Content goes here</p>
</body>
</html>
Создание AdControl программным способом в JavaScript
В предыдущих шагах показано, как объявить AdControl в разметке HTML. Кроме того, вы можете программно создать AdControl с помощью JavaScript. В этом примере предполагается, что вы используете существующий div в HTML-коде с идентификатором myAd.
var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
applicationId: "3f83fe91-d6be-434d-a0ae-7351c5a997f1",
adUnitId: "test",
});
myAdControl.isAutoRefreshEnabled = false;
myAdControl.onErrorOccurred = myAdError;
myAdControl.onAdRefreshed = myAdRefreshed;
myAdControl.onEngagedChanged = myAdEngagedChanged;
В этом примере предполагается, что вы уже объявили методы обработчика событий с именем myAdError, myAdRefreshed и myAdEngagedChanged.
Если вы используете этот код и не видите рекламу, попробуйте вставить атрибут position:relative в div , содержащий AdControl. Это переопределит параметр по умолчанию IFrame. Объявления будут отображаться правильно, если они не отображаются из-за значения этого атрибута. Обратите внимание, что новые рекламные единицы могут быть недоступны до 30 минут.
Примечание.
Значения applicationId и adUnitId , отображаемые в этом примере, являются значениями тестового режима. Перед отправкой приложения необходимо заменить эти значения динамическими значениями из Центра партнеров.
Выпуск приложения с помощью динамических объявлений
Убедитесь, что вы используете баннерную рекламу в приложении, следуя нашим рекомендациям по рекламным баннерам.
В Центре партнеров перейдите на страницу рекламы в приложении и создайте рекламный блок. Для типа рекламного блока укажите Баннер. Запишите идентификатор рекламного блока и идентификатор приложения.
Примечание.
Значения идентификатора приложения для тестовых рекламных единиц и динамических рекламных единиц UWP имеют разные форматы. Тестовые значения идентификаторов приложения — это идентификаторы GUID. При создании динамического рекламного блока UWP в Центре партнеров значение идентификатора приложения для рекламного блока всегда совпадает с идентификатором Магазина для вашего приложения (например, значение идентификатора магазина выглядит как 9NBLGGH4R315).
При необходимости можно включить рекламное посреднико для AdControl, настроив параметры в разделе "Параметры посредника" на странице рекламы в приложении. Рекламный посредник позволяет максимально увеличить доход от рекламы и возможности продвижения приложений, отображая рекламу из нескольких рекламных сетей, включая рекламу из других платных рекламных сетей, таких как Taboola и Smaato, а также объявления для рекламных кампаний по продвижению приложений Майкрософт.
В коде замените тестовые значения единиц рекламы (applicationId и adUnitId) динамическими значениями, созданными в Центре партнеров.
Отправьте приложение в Магазин с помощью Центра партнеров.
Просмотрите отчеты о производительности рекламы в Центре партнеров.
Управление рекламными единицами для нескольких элементов управления рекламой в приложении
Можно использовать несколько объектов AdControl в одном приложении (например, каждая страница в приложении может размещать другой объект AdControl ). В этом сценарии рекомендуется назначить каждому элементу управления разные рекламные блоки. Использование разных рекламных блоков для каждого элемента управления позволяет отдельно настроить параметры посредника и получить дискретные данные отчетов для каждого элемента управления. Это также позволяет нашим службам лучше оптимизировать рекламу, которая мы обслуживаем вашему приложению.
Внимание
Каждый рекламный блок можно использовать только в одном приложении. Если вы используете рекламный блок в нескольких приложениях, объявления не будут обслуживаться для этого рекламного блока.