Native Anzeigen

Warnung

Ab dem 1. Juni 2020 wird die Microsoft Ad Monetization-Plattform für Windows UWP-Apps abgeschaltet. Weitere Informationen

Eine native Anzeige ist ein komponentenbasiertes Anzeigenformat, in denen jedes Element der Anzeige (wie Titel, Bild, Beschreibung und Handlungsaufforderungstext) als einzelnes Element übermittelt wird, das Sie in Ihre App integrieren können. Sie können diese Elemente mithilfe Ihrer eigenen Schriftarten, Farben, Animationen und anderen UI-Komponenten in Ihre App integrieren, um eine unauffällige Benutzeroberfläche zusammenzufügen, die das Erscheinungsbild Ihrer App einfügt und gleichzeitig eine hohe Rendite aus den Anzeigen erzielt.

Für Werbekunden bieten native Anzeigen leistungsstarke Platzierungen, da die Anzeigenerfahrung eng in die App integriert ist und Benutzer daher eher mit diesen Arten von Anzeigen interagieren.

Hinweis

Native Anzeigen werden derzeit nur für XAML-basierte UWP-Apps für Windows 10 und Windows 11 unterstützt. Die Unterstützung für UWP-Apps, die mit HTML und JavaScript geschrieben wurden, ist für eine zukünftige Version der Microsoft Advertising-SDK geplant.

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.

Integrieren einer nativen Anzeige in Ihre App

Befolgen Sie diese Anweisungen, um eine native Anzeige in Ihre App zu integrieren und zu bestätigen, dass ihre native Anzeigenimplementierung eine Testanzeige anzeigt.

1. Ö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 Internetfunktion (Client) ausgewählt ist. Ihre App benötigt diese Funktion, um Testanzeigen und Liveanzeigen zu erhalten.

2. Wenn Ihr Projekt auf eine beliebige CPU ausgerichtet ist, aktualisieren Sie Ihr Projekt so, dass eine architekturspezifische Buildausgabe verwendet wird (z. B. x86). Wenn Ihr Projekt auf "Any CPU" ausgerichtet ist, können Sie in den folgenden Schritten keinen Verweis auf die Microsoft Advertising-SDK hinzufügen. Weitere Informationen finden Sie unter Referenzfehler, die durch die Ausrichtung von Any CPU in Ihrem Projekt verursacht werden.

3. Fügen Sie einen Verweis auf die Microsoft Advertising-SDK in Ihrem Projekt hinzu:

   1. Klicken Sie im fenster Projektmappen-Explorer mit der rechten Maustaste auf "Verweise", und wählen Sie "Verweis hinzufügen" aus...
   2. Erweitern Sie im Verweis-Manager universelles Windows, klicken Sie auf Erweiterungen, und aktivieren Sie dann das Kontrollkästchen neben Microsoft Advertising-SDK für XAML (Version 10.0).
   3. Klicken Sie im Verweis-Manager auf "OK".

4. Fügen Sie in der entsprechenden Codedatei in Ihrer App (z. B. in MainPage.xaml.cs oder einer Codedatei für eine andere Seite) die folgenden Namespaceverweise hinzu.

   using Microsoft.Advertising.WinRT.UI;
   using Windows.UI.Xaml.Media.Imaging;
   

5. Deklarieren Sie an einer geeigneten Stelle in Ihrer App (z. B. auf MainPage oder auf einer anderen Seite) ein NativeAdsManagerV2-Objekt und mehrere Zeichenfolgenfelder, die die Anwendungs-ID und die Anzeigeneinheits-ID für Ihre native Anzeige darstellen. Im folgenden Codebeispiel werden die myAppId Testwerte für native Anzeigen und myAdUnitId Felder zugewiesen.

   Hinweis

   Jeder NativeAdsManagerV2 verfügt über eine entsprechende Anzeigeneinheit , die von unseren Diensten zum Bereitstellen von Anzeigen an das systemeigene Anzeigensteuerelement verwendet wird, und jede Anzeigeneinheit besteht aus einer Anzeigeneinheits-ID und Anwendungs-ID. In diesen Schritten weisen Sie Ihrem Steuerelement Testanzeigeneinheits-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.

   NativeAdsManagerV2 myNativeAdsManager = null;
   string myAppId = "d25517cb-12d4-4699-8bdc-52040c712cab";
   string myAdUnitId = "test";
   

6. Instanziieren Sie im Code, der beim Start ausgeführt wird (z. B. im Konstruktor für die Seite), das NativeAdsManagerV2-Objekt , und verknüpfen Sie Ereignishandler für die Ereignisse AdReady und ErrorOccurred des Objekts.

   myNativeAdsManager = new NativeAdsManagerV2(myAppId, myAdUnitId);
   myNativeAdsManager.AdReady += MyNativeAd_AdReady;
   myNativeAdsManager.ErrorOccurred += MyNativeAdsManager_ErrorOccurred;
   

7. Wenn Sie bereit sind, eine native Anzeige anzuzeigen, rufen Sie die RequestAd-Methode auf, um eine Anzeige abzurufen.

   myNativeAdsManager.RequestAd();
   

8. Wenn eine native Anzeige für Ihre App bereit ist, wird Ihr AdReady-Ereignishandler aufgerufen, und ein NativeAdV2-Objekt , das die native Anzeige darstellt, wird an den e-Parameter übergeben. Verwenden Sie die NativeAdV2-Eigenschaften , um jedes Element der nativen Anzeige abzurufen und diese Elemente auf Ihrer Seite anzuzeigen. Rufen Sie auch die RegisterAdContainer-Methode auf, um das UI-Element zu registrieren, das als Container für die native Anzeige fungiert. Dies ist erforderlich, um Anzeigenaufrufe und Klicks ordnungsgemäß nachzuverfolgen.

   Hinweis

   Einige Elemente der nativen Anzeige sind erforderlich und müssen immer in Ihrer App angezeigt werden. Weitere Informationen finden Sie in unseren Richtlinien für native Anzeigen.

   Angenommen, Ihre App enthält eine MainPage (oder eine andere Seite) mit dem folgenden StackPanel. Dieses StackPanel enthält eine Reihe von Steuerelementen, die verschiedene Elemente einer nativen Anzeige anzeigen, einschließlich Titel, Beschreibung, Bilder, gesponsert durch Text und eine Schaltfläche, die den Aktionstext anzeigt.

   <StackPanel x:Name="NativeAdContainer" Background="#555555" Width="Auto" Height="Auto"
               Orientation="Vertical">
       <Image x:Name="AdIconImage" HorizontalAlignment="Left" VerticalAlignment="Center"
              Margin="20,20,20,20"/>
       <TextBlock x:Name="TitleTextBlock" HorizontalAlignment="Left" VerticalAlignment="Center"
              Text="The ad title will go here" FontSize="24" Foreground="White" Margin="20,0,0,10"/>
       <TextBlock x:Name="DescriptionTextBlock" HorizontalAlignment="Left" VerticalAlignment="Center"
                  Foreground="White" TextWrapping="Wrap" Text="The ad description will go here"
                  Margin="20,0,0,0" Visibility="Collapsed"/>
       <Image x:Name="MainImageImage" HorizontalAlignment="Left"
              VerticalAlignment="Center" Margin="20,20,20,20" Visibility="Collapsed"/>
       <Button x:Name="CallToActionButton" Background="Gray" Foreground="White"
               HorizontalAlignment="Left" VerticalAlignment="Center" Width="Auto" Height="Auto"
               Content="The call to action text will go here" Margin="20,20,20,20"
               Visibility="Collapsed"/>
       <StackPanel x:Name="SponsoredByStackPanel" Orientation="Horizontal" Margin="20,20,20,20">
           <TextBlock x:Name="SponsoredByTextBlock" Text="The ad sponsored by text will go here"
                      FontSize="24" Foreground="White" Margin="20,0,0,0" HorizontalAlignment="Left"
                      VerticalAlignment="Center" Visibility="Collapsed"/>
           <Image x:Name="IconImageImage" Margin="40,20,20,20" HorizontalAlignment="Left"
                  VerticalAlignment="Center" Visibility="Collapsed"/>
       </StackPanel>
   </StackPanel>
   

   Das folgende Codebeispiel veranschaulicht einen AdReady-Ereignishandler, der jedes Element der nativen Anzeige in den Steuerelementen in StackPanel anzeigt und dann die RegisterAdContainer-Methode aufruft, um stackPanel zu registrieren. Dieser Code geht davon aus, dass er aus der CodeBehind-Datei für die Seite ausgeführt wird, die das StackPanel enthält.

   void MyNativeAd_AdReady(object sender, NativeAdReadyEventArgs e)
   {
       NativeAdV2 nativeAd = e.NativeAd;
   
       // Show the ad icon.
       if (nativeAd.AdIcon != null)
       {
           AdIconImage.Source = nativeAd.AdIcon.Source;
   
           // Adjust the Image control to the height and width of the 
           // provided ad icon.
           AdIconImage.Height = nativeAd.AdIcon.Height;
           AdIconImage.Width = nativeAd.AdIcon.Width;
       }
   
       // Show the ad title.
       TitleTextBlock.Text = nativeAd.Title;
   
       // Show the ad description.
       if (!string.IsNullOrEmpty(nativeAd.Description))
       {
           DescriptionTextBlock.Text = nativeAd.Description;
           DescriptionTextBlock.Visibility = Visibility.Visible;
       }
   
       // Display the first main image for the ad. Note that the service
       // might provide multiple main images. 
       if (nativeAd.MainImages.Count > 0)
       {
           NativeImage mainImage = nativeAd.MainImages[0];
           BitmapImage bitmapImage = new BitmapImage();
           bitmapImage.UriSource = new Uri(mainImage.Url);
           MainImageImage.Source = bitmapImage;
   
           // Adjust the Image control to the height and width of the 
           // main image.
           MainImageImage.Height = mainImage.Height;
           MainImageImage.Width = mainImage.Width;
           MainImageImage.Visibility = Visibility.Visible;
       }
   
       // Add the call to action string to the button.
       if (!string.IsNullOrEmpty(nativeAd.CallToActionText))
       {
           CallToActionButton.Content = nativeAd.CallToActionText;
           CallToActionButton.Visibility = Visibility.Visible;
       }
   
       // Show the ad sponsored by value.
       if (!string.IsNullOrEmpty(nativeAd.SponsoredBy))
       {
           SponsoredByTextBlock.Text = nativeAd.SponsoredBy;
           SponsoredByTextBlock.Visibility = Visibility.Visible;
       }
   
       // Show the icon image for the ad.
       if (nativeAd.IconImage != null)
       {
           BitmapImage bitmapImage = new BitmapImage();
           bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
           IconImageImage.Source = bitmapImage;
   
           // Adjust the Image control to the height and width of the 
           // icon image.
           IconImageImage.Height = nativeAd.IconImage.Height;
           IconImageImage.Width = nativeAd.IconImage.Width;
           IconImageImage.Visibility = Visibility.Visible;
       }
   
       // Register the container of the controls that display
       // the native ad elements for clicks/impressions.
       nativeAd.RegisterAdContainer(NativeAdContainer);
   }
   

9. Definieren Sie einen Ereignishandler für das ErrorOccurred-Ereignis , um Fehler im Zusammenhang mit der nativen Anzeige zu behandeln. Im folgenden Beispiel werden während des Tests Fehlerinformationen in das Visual Studio-Ausgabefenster geschrieben.

   private void MyNativeAdsManager_ErrorOccurred(object sender, NativeAdErrorEventArgs e)
   {
       System.Diagnostics.Debug.WriteLine("NativeAd error " + e.ErrorMessage +
           " ErrorCode: " + e.ErrorCode.ToString());
   }
   

10. Kompilieren Sie die App, und führen Sie sie aus, um sie mit einer Testanzeige anzuzeigen.

Veröffentlichen Ihrer App mit Liveanzeigen

Nachdem Sie bestätigt haben, dass ihre native Anzeigenimplementierung erfolgreich eine Testanzeige anzeigt, befolgen Sie diese Anweisungen, um Ihre App so zu konfigurieren, dass echte Anzeigen angezeigt und Ihre aktualisierte App an den Store übermittelt wird.

1. Stellen Sie sicher, dass Ihre native Anzeigenimplementierung unsere Richtlinien für native Anzeigen befolgt.

2. Wechseln Sie im Partner Center zur Seite "In-App-Anzeigen ", und erstellen Sie eine Anzeigeneinheit. Geben Sie für den Anzeigeneinheitstyp "Native" an. Notieren Sie sich sowohl die Anzeigeneinheits-ID als auch 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 im Partner Center erstellen, entspricht der Anwendungs-ID-Wert für die Anzeigeneinheit immer der Store-ID für Ihre App (ein Beispiel für den Store-ID-Wert sieht wie 9NBLGGH4R315 aus).

3. Sie können optional die Anzeigenvermittlung für die native Anzeige aktivieren, indem Sie die Einstellungen im Abschnitt "Vermittlungseinstellungen " auf der Seite "In-App-Anzeigen" konfigurieren. Mit der Anzeigenvermittlung können Sie Ihre Werbeeinnahmen und App-Werbungsfunktionen maximieren, indem Sie Anzeigen aus mehreren Anzeigennetzwerken anzeigen.

4. Ersetzen Sie in Ihrem Code die Testanzeigeneinheitswerte (d. h. die ApplicationId - und adUnitId-Parameter des NativeAdsManagerV2-Konstruktors ) durch die Livewerte, die Sie in Partner Center generiert haben.

5. Übermitteln Sie Ihre App über das Partner Center an den Store.

6. Überprüfen Sie Ihre Anzeigenleistungsberichte im Partner Center.

Verwalten von Anzeigeneinheiten für mehrere native Anzeigen in Ihrer App

Sie können mehrere native Anzeigenplatzierungen in einer einzelnen App verwenden. In diesem Szenario wird empfohlen, jeder nativen Anzeigenplatzierung eine andere Anzeigeneinheit zuzuweisen. Durch die Verwendung unterschiedlicher Anzeigeneinheiten für systemeigene Anzeigen können Sie die Vermittlungseinstellungen separat konfigurieren und diskrete Berichtsdaten für jedes Steuerelement abrufen. Dies ermöglicht es unseren Diensten auch, die Werbung, die wir ihrer App anbieten, 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 Anzeigen für diese Anzeigeneinheit nicht bereitgestellt.

Zugehörige Themen

• Richtlinien für native Anzeigen
• In-App-Anzeigen
• Einrichten von Anzeigeneinheiten für Ihre App