„AdControl“ in HTML 5 und JavaScript
Warnung
Ab dem 1. Juni 2020 wird die Microsoft Ad Monetization Platform für Windows UWP-Apps heruntergefahren. Weitere Informationen
In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie die AdControl-Klasse verwenden, um Banneranzeigen in einer Universelle Windows-Plattform JavaScript/HTML-App (UWP) für Windows 10 und Windows 11 anzuzeigen.
Ein vollständiges Beispiel-Projekt mit einer Veranschaulichung, wie Sie mithilfe von C# und C++ Werbebanner einer JavaScript/HTML-App hinzufügen, finden Sie unter den Anzeigenbeispielen auf GitHub.
Voraussetzungen
- Installieren Sie die Microsoft Advertising-SDK mit Visual Studio 2015 oder einer höheren Version von Visual Studio. Installationsanweisungen finden Sie in diesem Artikel.
Hinweis
Wenn Sie die Windows 10 SDK-Version 10.0.14393 (Anniversary Update) oder eine höhere Version des Windows SDK installiert haben, müssen Sie auch die WinJS-Bibliothek installieren. Diese Bibliothek war früher in früheren Versionen des Windows SDK für Windows 10 enthalten, aber ab der Windows 10 SDK-Version 10.0.14393 (Anniversary Update) muss diese Bibliothek separat installiert werden.
Integrieren einer Banneranzeige in Ihre App
Öffnen Sie in Visual Studio Ihr Projekt, oder erstellen Sie ein neues Projekt.
Hinweis
Wenn Sie ein vorhandenes Projekt verwenden, öffnen Sie die Datei Package.appxmanifest in Ihrem Projekt, und stellen Sie sicher, dass die Funktion Internet (Client) ausgewählt ist. Ihre App benötigt diese Funktion, um Testanzeigen und Liveanzeigen zu empfangen.
Sollte in Ihrem Projekt die Zielplattform ANYCPU definiert sein, müssen Sie eine architekturspezifische Buildausgabe verwenden (z. B. X86) und das Projekt entsprechend aktualisieren. Sollte in Ihrem Projekt die Zielplattform ANYCPU definiert sein, können Sie bei den folgenden Schritten keinen Verweis auf die Microsoft Advertising-Bibliotheken hinzufügen. Weitere Informationen finden Sie unter Referenzfehler, die durch die Ausrichtung auf eine beliebige CPU (Any CPU) in Ihrem Projekt verursacht werden.
Fügen Sie einen Verweis auf die Microsoft Advertising-SDK in Ihrem Projekt hinzu:
- Klicken Sie im Projektmappen-Explorer Fenster mit der rechten Maustaste auf Verweise, und wählen Sie Verweis hinzufügen...
- Erweitern Sie im Verweis-Manager den Knoten Universal Windows, klicken Sie auf Erweiterungen, und wählen Sie dann das Kontrollkästchen neben Microsoft Advertising SDK für JavaScript (Version 10.0).
- Klicken Sie im Verweis-Manager auf „OK“.
Öffnen Sie die Datei „index.html“ (oder je nach Projekt eine andere HTML-Datei).
Fügen Sie im <Kopfabschnitt> nach den JavaScript-Verweisen des Projekts default.css und main.js den Verweis auf ad.js hinzu.
<!-- Advertising required references --> <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>Hinweis
Diese Zeile muss nach dem <Einschließen von main.js im Hauptabschnitt> platziert werden. Andernfalls tritt beim Erstellen des Projekts ein Fehler auf.
Ändern Sie den <Textabschnitt> in der default.html-Datei (oder einer anderen HTML-Datei, die für Ihr Projekt geeignet ist), um das div für adControl einzuschließen. Weisen Sie die Eigenschaften applicationId und adUnitId des AdControl den Werten der Testanzeigeeinheit zu. Passen Sie auch die Höhe und Breite an, sodass das Steuerelement eine der unterstützten Anzeigengrößen für Banneranzeigen ist.
Hinweis
Jedes AdControl verfügt über eine entsprechende Anzeigeneinheit , die von unseren Diensten verwendet wird, um Anzeigen für das Steuerelement bereitzustellen, und jede Anzeigeneinheit besteht aus einer Anzeigeneinheits-ID und einer Anwendungs-ID. In diesen Schritten weisen Sie Dem Steuerelement Test ad unit-ID und Anwendungs-ID-Werte zu. Diese Testwerte können nur in einer Testversion Ihrer App verwendet werden. Bevor Sie Ihre App im Store veröffentlichen, müssen Sie diese Testwerte durch Livewerte aus Partner Center ersetzen.
<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>Kompilieren und Ausführen der App, um sie mit einer Anzeige zu sehen
Das folgende Beispiel zeigt die vollständige index.html für eine einfache App.
<!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>
Programmgesteuertes Erstellen eines AdControl-Objekts in JavaScript
Die vorherigen Schritte zeigen, wie Sie ein AdControl-Steuerelement in Ihrem HTML-Markup deklarieren. Alternativ können Sie ein AdControl-Steuerelement programmgesteuert mit JavaScript erstellen. In diesem Beispiel wird davon ausgegangen, dass Sie ein vorhandenes div in Ihrem HTML-Code mit der ID myAd verwenden.
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;
In diesem Beispiel wird davon ausgegangen, dass Sie die Ereignishandlermethoden myAdError, myAdRefreshed und myAdEngagedChanged bereits deklariert haben.
Wenn Sie diesen Code verwenden und keine Anzeigen angezeigt werden, können Sie versuchen, ein position:relativ-Attribut im div-Element einzufügen, das das AdControl enthält. Dadurch wird die Standardeinstellung von IFrame überschrieben. Anzeigen werden ordnungsgemäß angezeigt, sofern sie nicht aufgrund des Werts dieses Attributs nicht angezeigt werden. Beachten Sie, dass neue Anzeigeeinheiten unter Umständen bis zu 30 Minuten nicht verfügbar sind.
Hinweis
Die in diesem Beispiel gezeigten Werte applicationId und adUnitId sind Werte im Testmodus. Sie müssen diese Werte durch Livewerte aus Partner Center ersetzen, bevor Sie Ihre App zur Übermittlung übermitteln.
Freigeben Ihrer App mit Liveanzeigen
Stellen Sie sicher, dass Ihre Verwendung von Banneranzeigen in Ihrer App unseren Richtlinien für Banneranzeigen entspricht.
Wechseln Sie in Partner Center zur Seite In-App-Anzeigen , und erstellen Sie eine Anzeigeneinheit. Geben Sie als Einheitentyp Banner an. Notieren Sie sich die Anzeigeneinheits-ID und die Anwendungs-ID.
Hinweis
Die Anwendungs-ID-Werte für Testanzeigeeinheiten und Live-UWP-Anzeigeneinheiten weisen unterschiedliche Formate auf. Testanwendungs-ID-Werte sind GUIDs. Wenn Sie eine Live-UWP-Anzeigeneinheit in Partner Center erstellen, stimmt der Anwendungs-ID-Wert für die Anzeigeneinheit immer mit der Store-ID für Ihre App überein (ein Beispielwert für die Store-ID sieht wie 9NBLGGH4R315 aus).
Optional können Sie die Anzeigenvermittlung für adControl aktivieren, indem Sie die Einstellungen im Abschnitt Vermittlungseinstellungen auf der Seite In-App-Anzeigen konfigurieren. Mit der Anzeigenvermittlung können Sie Ihre Anzeigeneinnahmen und App-Promotion-Funktionen maximieren, indem Sie Anzeigen aus mehreren Anzeigennetzwerken anzeigen, einschließlich Anzeigen aus anderen kostenpflichtigen Werbenetzwerken wie Taboola und Smaato und Anzeigen für Microsoft-App-Promotionkampagnen.
Ersetzen Sie in Ihrem Code die Test ad Unit-Werte (applicationId und adUnitId) durch die Livewerte, die Sie in Partner Center generiert haben.
Übermitteln Sie Ihre App mithilfe von Partner Center an den Store.
Überprüfen Sie Ihre Werbeleistungsberichte in Partner Center.
Verwalten von Anzeigeneinheiten für mehrere Anzeigensteuerelemente in Ihrer App
Sie können mehrere AdControl-Objekte in einer einzelnen App verwenden (z. B. kann jede Seite in Ihrer App ein anderes AdControl-Objekt hosten ). In diesem Szenario wird empfohlen, jedem Steuerelement eine andere Anzeigeneinheit zuzuweisen. Mithilfe unterschiedlicher Anzeigeneinheiten für jedes Steuerelement können Sie die Vermittlungseinstellungen separat konfigurieren und diskrete Berichtsdaten für jedes Steuerelement abrufen. Dies ermöglicht es unseren Diensten auch, die Anzeigen, die wir für Ihre App bereitstellen, besser zu optimieren.
Wichtig
Sie können jede Anzeigeneinheit nur in einer App verwenden. Wenn Sie eine Anzeigeneinheit in mehr als einer App verwenden, werden keine Anzeigen für diese Anzeigeneinheit geschaltet.
Zugehörige Themen
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für