Anúncios nativos

Um anúncio nativo é um formato de anúncio com base em componente em que cada parte do criativo do anúncio (como título, imagem, descrição e texto do plano de ação) é entregue ao aplicativo como um elemento individual. Você pode integrar esses elementos ao seu aplicativo usando suas próprias fontes, cores, animações e outros componentes da interface do usuário para criar uma experiência de usuário discreta que se adapte à aparência do seu aplicativo e, ao mesmo tempo, obtenha alto rendimento dos anúncios.

Para os anunciantes, os anúncios nativos fornecem canais de alto desempenho, porque a experiência do anúncio está totalmente integrada ao aplicativo e, portanto, os usuários tendem a interagir mais com esses tipos de anúncios.

Pré-requisitos

• Instale o SDK do Microsoft Advertising com o Visual Studio 2015 ou uma versão posterior do Visual Studio. Para obter instruções de instalação, consulte este artigo.

Integrar um anúncio nativo ao seu aplicativo

Siga estas instruções para integrar um anúncio nativo ao seu aplicativo e confirme se a implementação do anúncio nativo mostra um anúncio de teste.

1. No Visual Studio, abra seu projeto ou crie um novo projeto.

   Observação

   Se você estiver usando um projeto existente, abra o arquivo Package.appxmanifest em seu projeto e verifique se a funcionalidade Internet (Cliente) está selecionada. Seu aplicativo precisa desse recurso para receber anúncios de teste e anúncios ao vivo.

2. Se o projeto for direcionado a Qualquer CPU, atualize seu projeto para usar uma saída de build específica da arquitetura (por exemplo, x86). Se o seu projeto for direcionado a Qualquer CPU, você não poderá adicionar com êxito uma referência ao SDK do Microsoft Advertising nas etapas a seguir. Para obter mais informações, consulte Erros de referência causados pelo direcionamento de qualquer CPU em seu projeto.

3. Adicione uma referência ao SDK do Microsoft Advertising em seu projeto:

   1. Na janela Gerenciador de Soluções, clique com o botão direito do mouse em Referências e selecione Adicionar Referência...
   2. No Gerenciador de Referências, expanda Universal do Windows, clique em Extensões e marque a caixa de seleção ao lado de SDK do Microsoft Advertising para XAML (versão 10.0).
   3. No Gerenciador de referências, clique em OK.

4. No arquivo de código apropriado em seu aplicativo (por exemplo, em MainPage.xaml.cs ou em um arquivo de código para alguma outra página), adicione as seguintes referências de namespace.

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

5. Em um local apropriado em seu aplicativo (por exemplo, em MainPage ou em alguma outra página), declare um objeto NativeAdsManagerV2 e vários campos de string que representam o ID do aplicativo e o ID do bloco de anúncios do seu anúncio nativo. O exemplo de código a seguir atribui os myAppId campos and myAdUnitId aos valores de teste para anúncios nativos.

   Observação

   Cada NativeAdsManagerV2 tem um bloco de anúncios correspondente que é usado por nossos serviços para veicular anúncios no controle de anúncios nativo, e cada bloco de anúncios consiste em um ID de bloco de anúncios e um ID de aplicativo. Nestas etapas, você atribui valores de ID de unidade de anúncio de teste e ID de aplicativo ao seu controle. Esses valores de teste só podem ser usados em uma versão de teste do seu aplicativo. Antes de publicar seu aplicativo na Loja, você deve substituir esses valores de teste por valores dinâmicos do Partner Center.

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

6. No código executado na inicialização (por exemplo, no construtor da página), instancie o objeto NativeAdsManagerV2 e conecte manipuladores de eventos para os eventos AdReady e ErrorOccurred do objeto.

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

7. Quando estiver pronto para exibir um anúncio nativo, chame o método RequestAd para buscar um anúncio.

   myNativeAdsManager.RequestAd();
   

8. Quando um anúncio nativo está pronto para seu aplicativo, o manipulador de eventos AdReady é chamado e um objeto NativeAdV2 que representa o anúncio nativo é passado para o parâmetro e . Use as propriedades NativeAdV2 para obter cada elemento do anúncio nativo e exibir esses elementos em sua página. Certifique-se também de chamar o método RegisterAdContainer para registrar o elemento da interface do usuário que atua como um contêiner para o anúncio nativo; isso é necessário para rastrear corretamente as impressões e os cliques do anúncio.

   Observação

   Alguns elementos do anúncio nativo são obrigatórios e devem sempre ser exibidos em seu aplicativo. Para mais informações, consulte nossas diretrizes para anúncios nativos.

   Por exemplo, suponha que seu aplicativo contenha uma MainPage (ou alguma outra página) com o seguinte StackPanel. Este StackPanel contém uma série de controles que exibem diferentes elementos de um anúncio nativo, incluindo o título, a descrição, as imagens, patrocinado por texto e um botão que mostrará o texto da chamada para ação .

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

   O exemplo de código a seguir demonstra um manipulador de eventos AdReady que exibe cada elemento do anúncio nativo nos controles no StackPanel e, em seguida, chama o método RegisterAdContainer para registrar o StackPanel. Esse código pressupõe que ele seja executado a partir do arquivo code-behind da página que contém o 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. Defina um manipulador de eventos para o evento ErrorOccurred para lidar com erros relacionados ao anúncio nativo. O exemplo a seguir grava informações de erro na janela Saída do Visual Studio durante o teste.

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

10. Compile e execute o aplicativo para vê-lo com um anúncio de teste.

Libere seu aplicativo com anúncios ativos

Depois de confirmar que sua implementação de anúncio nativo mostra com êxito um anúncio de teste, siga estas instruções para configurar seu aplicativo para exibir anúncios reais e enviar seu aplicativo atualizado para a Loja.

1. Verifique se a implementação do anúncio nativo segue nossas diretrizes para anúncios nativos.

2. No Partner Center, acesse a página Anúncios no aplicativo e crie uma unidade de anúncio. Para o tipo de bloco de anúncios, especifique Nativo. Anote o ID do bloco de anúncios e o ID do aplicativo.

   Observação

   Os valores de ID do aplicativo para unidades de anúncio de teste e unidades de anúncio UWP ao vivo têm formatos diferentes. Os valores de ID do aplicativo de teste são GUIDs. Quando você cria uma unidade de anúncio UWP dinâmica no Partner Center, o valor da ID do aplicativo para a unidade de anúncio sempre corresponde à ID da Loja do seu aplicativo (um exemplo de valor da ID da Loja é semelhante a 9NBLGGH4R315).

3. Opcionalmente, você pode ativar o controle de anúncios para o anúncio nativo definindo as configurações na seção Configurações de controle na página Anúncios no aplicativo. O controle de anúncios permite que você maximize sua receita de anúncios e recursos de promoção de aplicativos exibindo anúncios de várias redes de anúncios.

4. Em seu código, substitua os valores de unidade de anúncio de teste (ou seja, os parâmetros applicationId e adUnitId do construtor NativeAdsManagerV2 ) pelos valores dinâmicos gerados no Partner Center.

5. Envie seu aplicativo para a Loja usando o Partner Center.

6. Examine seus relatórios de desempenho de publicidade no Partner Center.

Gerenciar blocos de anúncios para vários anúncios nativos no seu aplicativo

Você pode usar vários canais de anúncios nativos em um único aplicativo. Nesse cenário, recomendamos que você atribua um bloco de anúncios diferente a cada posicionamento de anúncio nativo. O uso de blocos de anúncios diferentes para anúncios nativos permite que você defina separadamente as configurações de controle e obtenha dados de relatórios discretos para cada controle. Isso também permite que nossos serviços otimizem melhor os anúncios que veiculamos em seu aplicativo.

Tópicos relacionados

• Diretrizes para anúncios nativos
• Anúncios no aplicativo
• Configurar blocos de anúncios para seu aplicativo