Native Anzeigen

  • Artikel

Warnung

Ab dem 1. Juni 2020 wird die Microsoft Ad Monetization Platform für Windows UWP-Apps heruntergefahren. 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 mit Ihren eigenen Schriftarten, Farben, Animationen und anderen UI-Komponenten in Ihre App integrieren, um eine unauffällige Benutzeroberfläche zusammenzufügen, die dem Aussehen und Verhalten Ihrer App entspricht und gleichzeitig hohe Erträge aus den Anzeigen erzielt.

Für Werbetreibende bieten native Anzeigen leistungsstarke Platzierungen, da die Anzeigenerfahrung eng in die App integriert ist und Benutzer daher dazu neigen, mehr mit diesen Arten von Anzeigen zu 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 des Microsoft Advertising SDK geplant.

Voraussetzungen

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

  2. Sollte in Ihrem Projekt die Zielplattform ANYCPU definiert sein, müssen Sie eine architekturspezifische Buildausgabe verwenden (z. B. X86) und das Projekt entsprechend aktualisieren. Wenn Ihr Projekt auf Beliebige CPU abzielt, können Sie in den folgenden Schritten keinen Verweis auf das Microsoft Advertising SDK hinzufügen. Weitere Informationen finden Sie unter Referenzfehler, die durch die Ausrichtung auf eine beliebige CPU (Any CPU) in Ihrem Projekt verursacht werden.

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

    1. Klicken Sie im Projektmappen-Explorer Fenster mit der rechten Maustaste auf Verweise, und wählen Sie Verweis hinzufügen...
    2. 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 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 einem geeigneten Speicherort 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 Felder und myAdUnitId den Testwerten für native Anzeigen zugewiesen.

    Hinweis

    Jeder NativeAdsManagerV2 verfügt über eine entsprechende Anzeigeneinheit , die von unseren Diensten zum Bereitstellen von Anzeigen für das native Anzeigensteuerelement verwendet wird, 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.

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

  6. Instanziieren Sie in 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 AdReady- und ErrorOccurred-Ereignisse 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 (oder eine MainPage 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, die durch Text gesponsert werden , und eine Schaltfläche, die den Aufruf des Aktionstexts 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>

    Im folgenden Codebeispiel wird ein AdReady-Ereignishandler veranschaulicht, der jedes Element der nativen Anzeige in den Steuerelementen im StackPanel anzeigt und dann die RegisterAdContainer-Methode aufruft, um das StackPanel zu registrieren. Bei diesem Code wird davon ausgegangen, 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.

Freigeben 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 sie echte Anzeigen anzeigt und Ihre aktualisierte App an den Store übermittelt.

  1. Stellen Sie sicher, dass Ihre native Anzeigenimplementierung unseren Richtlinien für native Anzeigen entspricht.

  2. Wechseln Sie in Partner Center zur Seite In-App-Anzeigen , und erstellen Sie eine Anzeigeneinheit. Geben Sie für den Anzeigeneinheitstyp Native 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).

  3. Optional können Sie 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 Anzeigenumsatz- und App-Promotion-Funktionen maximieren, indem Sie Anzeigen aus mehreren Anzeigennetzwerken anzeigen.

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

  5. Übermitteln Sie Ihre App mithilfe von Partner Center an den Store.

  6. Überprüfen Sie Ihre Werbeleistungsberichte in 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. Mithilfe verschiedener Anzeigeneinheiten für native Anzeigen 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.