Publicités natives

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 dans 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é des publicités.

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

Prérequis

• Installez le SDK Microsoft Advertising avec Visual Studio 2015 ou une version ultérieure de Visual Studio. Pour obtenir des instructions d’installation, consultez cet article.

Intégrer une publicité native dans votre application

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

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

   Remarque

   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 publicités de test et des publicités en direct.

2. Si votre projet cible n’importe quel processeur, mettez à jour votre projet pour utiliser une sortie de build spécifique à l’architecture (par exemple, x86). Si votre projet cible n’importe quel processeur, vous ne pourrez pas ajouter une référence au SDK Microsoft Advertising dans les étapes suivantes. Pour plus d’informations, consultez Les erreurs de référence provoquées par le ciblage de n’importe quel processeur dans votre projet.

3. Ajoutez une référence au 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 le Gestionnaire de références, développez Windows universel, cliquez sur Extensions, puis cochez la case en regard de SDK Microsoft Advertising pour XAML (version 10.0).
   3. Dans le 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 MainPage ou une 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 aux myAdUnitId valeurs de test pour les publicités natives.

   Remarque

   Chaque NativeAdsManagerV2 a une unité publicitaire correspondante utilisée par nos services pour servir des publicités au contrôle de publicité natif, et chaque unité publicitaire se compose d’un ID d’unité publicitaire et d’un ID d’application. Dans ces étapes, vous affectez l’ID d’unité publicitaire de test et les valeurs d’ID d’application à 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 Windows Store, vous devez remplacer ces valeurs de test par des valeurs actives à partir 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 récupérer 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 la publicité 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 agit en tant que conteneur pour la publicité native. Cela est nécessaire pour suivre correctement les impressions publicitaires et les clics.

   Remarque

   Certains éléments de la publicité native sont obligatoires et doivent toujours être affichés dans votre application. Pour plus d’informations, consultez nos instructions 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, y compris le titre, la description, les images, parrainées par le texte et un bouton qui affiche l’appel au texte d’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 la publicité native dans les contrôles dans 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 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 pour 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 publicité 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 publicité de test, suivez ces instructions pour configurer votre application pour afficher des publicités réelles et envoyer votre application mise à jour au Store.

1. Assurez-vous que votre implémentation de publicité native suit nos instructions pour les publicités natives.

2. Dans l’Espace partenaires, accédez à la page publicités dans l’application et créez une unité publicitaire. Pour le type d’unité publicitaire, spécifiez Native. Notez à la fois l’ID d’unité publicitaire et l’ID d’application.

   Remarque

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

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

4. Dans votre code, remplacez les valeurs d’unité publicitaire de test (autrement dit, 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 publicités natives dans votre application

Vous pouvez utiliser plusieurs placements publicitaires natifs dans une seule application. Dans ce scénario, nous vous recommandons d’attribuer une unité publicitaire différente à chaque placements publicitaires natifs. L’utilisation d’unités publicitaires différentes 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 d’optimiser les publicités que nous servons à votre application.

Rubriques connexes

• Recommandations en matière de publicités natives
• Publicités dans l’application
• Configurer des unités publicitaires pour votre application