Publicités natives

  • Article

Avertissement

À compter du 1er juin 2020, la plateforme Microsoft Ad Monetization pour les applications Windows UWP sera arrêtée. En savoir plus

Une publicité native est un format de publicité basée sur un composant où chaque élément de l’annonce publicitaire (par exemple, titre, image, description et texte de l’appel à l’action) est fourni à votre application sous forme d’élément individuel. Vous pouvez intégrer ces éléments à votre application à l’aide de vos propres polices, couleurs, animations et autres composants d’interface utilisateur pour assembler une expérience utilisateur discrète qui correspond à l’apparence de votre application tout en obtenant un rendement élevé grâce aux publicités.

Pour les annonceurs, les publicités natives offrent des placements très performants, car l’expérience publicitaire est étroitement intégrée dans l’application et les utilisateurs ont donc tendance à interagir davantage avec ces types de publicités.

Notes

Les publicités natives sont actuellement prises en charge uniquement pour les applications UWP XAML pour les Windows 10 et les Windows 11. La prise en charge des applications UWP écrites au format HTML et JavaScript est prévue pour une prochaine version du Kit de développement logiciel (SDK) Microsoft Advertising.

Prérequis

Intégrer une publicité native à votre application

Suivez ces instructions pour intégrer une publicité native à votre application et vérifiez que votre implémentation de publicité native affiche une annonce de test.

  1. Dans Visual Studio, ouvrez votre projet ou créez-en un.

    Notes

    Si vous utilisez un projet existant, ouvrez le fichier Package.appxmanifest dans votre projet et vérifiez que la fonctionnalité Internet (client) est sélectionnée. Votre application a besoin de cette fonctionnalité pour recevoir des annonces de test et des publicités en direct.

  2. Si votre projet cible Toute UC, mettez-le à jour pour utiliser une sortie de génération propre à l’architecture (par exemple, x86). Si votre projet cible n’importe quel processeur, vous ne serez pas en mesure d’ajouter une référence au Kit de développement logiciel (SDK) Microsoft Advertising dans les étapes suivantes. Pour plus d’informations, consultez Erreurs de référence provoquées par le ciblage de Toute UC dans votre projet.

  3. Ajoutez une référence au Kit de développement logiciel (SDK) Microsoft Advertising dans votre projet :

    1. Dans la fenêtre Explorateur de solutions, cliquez avec le bouton droit sur Références, puis sélectionnez Ajouter une référence...
    2. Dans Gestionnaire de références, développez Windows universel, cliquez sur Extensions, puis cochez la case en regard de Kit de développement logiciel (SDK) Microsoft Advertising pour XAML (version 10.0).
    3. Dans Gestionnaire de références, cliquez sur OK.

  4. Dans le fichier de code approprié dans votre application (par exemple, dans MainPage.xaml.cs ou un fichier de code pour une autre page), ajoutez les références d’espace de noms suivantes.

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

  5. Dans un emplacement approprié dans votre application (par exemple, dans ou une MainPage autre page), déclarez un objet NativeAdsManagerV2 et plusieurs champs de chaîne qui représentent l’ID d’application et l’ID d’unité publicitaire pour votre publicité native. L’exemple de code suivant affecte les myAppId champs et myAdUnitId aux valeurs de test pour les publicités natives.

    Notes

    Chaque NativeAdsManagerV2 a une unité publicitaire correspondante qui est utilisée par nos services pour diffuser des publicités sur le contrôle publicitaire natif, et chaque unité publicitaire se compose d’un ID d’unité publicitaire et d’un IDd’application. Dans ces étapes, vous affectez des valeurs d’ID d’unité publicitaire et d’ID d’application de test à votre contrôle. Ces valeurs de test ne peuvent être utilisées que dans une version de test de votre application. Avant de publier votre application dans le Store, vous devez remplacer ces valeurs de test par des valeurs actives de l’Espace partenaires.

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

  6. Dans le code qui s’exécute au démarrage (par exemple, dans le constructeur de la page), instanciez l’objet NativeAdsManagerV2 et reliez les gestionnaires d’événements pour les événements AdReady et ErrorOccurred de l’objet.

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

  7. Lorsque vous êtes prêt à afficher une publicité native, appelez la méthode RequestAd pour extraire une publicité.

    myNativeAdsManager.RequestAd();

  8. Lorsqu’une publicité native est prête pour votre application, votre gestionnaire d’événements AdReady est appelé et un objet NativeAdV2 qui représente l’annonce native est passé au paramètre e . Utilisez les propriétés NativeAdV2 pour obtenir chaque élément de la publicité native et afficher ces éléments sur votre page. Veillez également à appeler la méthode RegisterAdContainer pour inscrire l’élément d’interface utilisateur qui fait office de conteneur pour l’annonce native ; cela est nécessaire pour suivre correctement les impressions et les clics publicitaires.

    Notes

    Certains éléments de la publicité native sont obligatoires et doivent toujours être affichés dans votre application. Pour plus d’informations, consultez nos recommandations pour les publicités natives.

    Par exemple, supposons que votre application contient une MainPage (ou une autre page) avec le StackPanel suivant. Ce StackPanel contient une série de contrôles qui affichent différents éléments d’une publicité native, notamment le titre, la description, les images, sponsorisés par le texte et un bouton qui affiche le texte d’appel à l’action .

    <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>

    L’exemple de code suivant illustre un gestionnaire d’événements AdReady qui affiche chaque élément de l’annonce native dans les contrôles de StackPanel , puis appelle la méthode RegisterAdContainer pour inscrire le StackPanel. Ce code suppose qu’il est exécuté à partir du fichier code-behind de la page qui contient le StackPanel.

    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. Définissez un gestionnaire d’événements pour l’événement ErrorOccurred afin de gérer les erreurs liées à la publicité native. L’exemple suivant écrit des informations d’erreur dans la fenêtre Sortie de Visual Studio pendant le test.

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

  10. Compilez et exécutez l’application pour la voir avec une annonce de test.

Publier votre application avec des publicités en direct

Une fois que vous avez confirmé que votre implémentation de publicité native affiche correctement une annonce de test, suivez ces instructions pour configurer votre application afin qu’elle affiche des annonces réelles et soumettez votre application mise à jour au Windows Store.

  1. Assurez-vous que votre implémentation d’annonces natives respecte nos instructions pour les publicités natives.

  2. Dans l’Espace partenaires, accédez à la page Annonces in-app et créez une unité publicitaire. Pour le type d’unité publicitaire, spécifiez Native. Prenez note de l’ID d’unité publicitaire et de l’ID de l’application.

    Notes

    Les valeurs d’ID d’application pour les unités d’annonces de test et les unités publicitaires UWP actives ont différents formats. Les valeurs d’ID d’application de test sont des GUID. Lorsque vous créez une unité publicitaire UWP en direct dans l’Espace partenaires, la valeur de l’ID d’application pour l’unité publicitaire correspond toujours à l’ID du Store pour votre application (un exemple de valeur d’ID du Store ressemble à 9NBLGGH4R315).

  3. Vous pouvez éventuellement activer la médiation publicitaire pour la publicité native en configurant les paramètres dans la section Paramètres de médiation de la page Annonces dans l’application . La médiation publicitaire vous permet d’optimiser vos revenus publicitaires et vos fonctionnalités de promotion d’applications en affichant des publicités provenant de plusieurs réseaux publicitaires.

  4. Dans votre code, remplacez les valeurs d’unité d’annonce de test (c’est-à-dire les paramètres applicationId et adUnitId du constructeur NativeAdsManagerV2 ) par les valeurs actives que vous avez générées dans l’Espace partenaires.

  5. Envoyez votre application au Windows Store à l’aide de l’Espace partenaires.

  6. Passez en revue vos rapports de performances publicitaires dans l’Espace partenaires.

Gérer les unités publicitaires pour plusieurs annonces natives dans votre application

Vous pouvez utiliser plusieurs emplacements publicitaires natifs dans une seule application. Dans ce scénario, nous vous recommandons d’affecter une unité publicitaire différente à chaque placement publicitaire natif. L’utilisation de différentes unités publicitaires pour la publicité native vous permet de configurer séparément les paramètres de médiation et d’obtenir des données de création de rapports discrètes pour chaque contrôle. Cela permet également à nos services de mieux optimiser les publicités que nous proposons à votre application.

Important

Vous pouvez utiliser chaque unité publicitaire dans une seule application. Si vous utilisez une unité publicitaire dans plusieurs applications, les annonces ne seront pas diffusées pour cette unité publicitaire.