Anuncios nativos

2023-07-13

Advertencia

A partir del 1 de junio de 2020, se cerrará la plataforma de monetización de anuncios de Microsoft para aplicaciones para UWP de Windows. Más información

Un anuncio nativo es un formato de anuncio basado en componentes, donde cada parte del anuncio creativo (por ejemplo, el título, la imagen, la descripción y el texto de llamada a la acción) se entrega a la aplicación como un elemento individual. Puedes integrar estos elementos en tu aplicación con tus propias fuentes, colores, animaciones y otros componentes de la interfaz de usuario para unir una experiencia de usuario discreta que se adapte a la apariencia de tu aplicación, al mismo tiempo que obtiene un alto rendimiento de los anuncios.

Para los anunciantes, los anuncios nativos proporcionan ubicaciones de alto rendimiento, ya que la experiencia de anuncios está estrechamente integrada en la aplicación y, por lo tanto, los usuarios tienden a interactuar más con estos tipos de anuncios.

Nota:

Actualmente, los anuncios nativos solo se admiten para aplicaciones para UWP basadas en XAML para Windows 10 y Windows 11. La compatibilidad con aplicaciones para UWP escritas con HTML y JavaScript está prevista para una futura versión de la SDK de Microsoft Advertising.

Requisitos previos

Instale el SDK de Microsoft Advertising con Visual Studio 2015 o una versión posterior de Visual Studio. Para obtener instrucciones de instalación, consulte este artículo.

Integración de un anuncio nativo en la aplicación

Siga estas instrucciones para integrar un anuncio nativo en la aplicación y confirme que la implementación de anuncios nativa muestra un anuncio de prueba.

En Visual Studio, abra el proyecto o cree un proyecto.

Nota:

Si usa un proyecto existente, abra el archivo Package.appxmanifest en el proyecto y asegúrese de que está seleccionada la funcionalidad internet (cliente ). Tu aplicación necesita esta funcionalidad para recibir anuncios de prueba y anuncios en directo.
Si el proyecto tiene como destino Cualquier CPU, actualice el proyecto para usar una salida de compilación específica de la arquitectura (por ejemplo, x86). Si el proyecto tiene como destino Cualquier CPU, no podrá agregar correctamente una referencia al SDK de Microsoft Advertising en los pasos siguientes. Para obtener más información, consulte Errores de referencia causados por cualquier CPU en el proyecto.
Agregue una referencia al SDK de Microsoft Advertising en el proyecto:
1. En la ventana Explorador de soluciones, haga clic con el botón derecho en Referencias y seleccione Agregar referencia...
2. En el Administrador de referencias, expanda Windows universal, haga clic en Extensiones y, a continuación, active la casilla situada junto a SDK de Microsoft Advertising para XAML (versión 10.0).
3. En el Administrador de referencias, haga clic en Aceptar.
En el archivo de código adecuado de la aplicación (por ejemplo, en MainPage.xaml.cs o un archivo de código para alguna otra página), agregue las siguientes referencias de espacio de nombres.
```
using Microsoft.Advertising.WinRT.UI;
using Windows.UI.Xaml.Media.Imaging;
```
En una ubicación adecuada de la aplicación (por ejemplo, en MainPage o en alguna otra página), declare un objeto NativeAdsManagerV2 y varios campos de cadena que representan el identificador de aplicación y el identificador de unidad de anuncio para el anuncio nativo. En el ejemplo de código siguiente se asignan los myAppId campos y myAdUnitId a los valores de prueba de los anuncios nativos.

Nota:

Cada NativeAdsManagerV2 tiene una unidad de anuncio correspondiente que usan nuestros servicios para servir anuncios en el control de anuncios nativo, y cada unidad de anuncio consta de un identificador de unidad de anuncio e id. de aplicación. En estos pasos, asignará los valores de id. de unidad de anuncio de prueba y id. de aplicación al control. Estos valores de prueba solo se pueden usar en una versión de prueba de la aplicación. Antes de publicar la aplicación en la Tienda, debes reemplazar estos valores de prueba por valores dinámicos del Centro de partners.
```
NativeAdsManagerV2 myNativeAdsManager = null;
string myAppId = "d25517cb-12d4-4699-8bdc-52040c712cab";
string myAdUnitId = "test";
```
En el código que se ejecuta en el inicio (por ejemplo, en el constructor de la página), cree una instancia del objeto NativeAdsManagerV2 y conecte controladores de eventos para los eventos AdReady y ErrorOccurred del objeto .
```
myNativeAdsManager = new NativeAdsManagerV2(myAppId, myAdUnitId);
myNativeAdsManager.AdReady += MyNativeAd_AdReady;
myNativeAdsManager.ErrorOccurred += MyNativeAdsManager_ErrorOccurred;
```
Cuando esté listo para mostrar un anuncio nativo, llame al método RequestAd para capturar un anuncio.
```
myNativeAdsManager.RequestAd();
```

Cuando un anuncio nativo está listo para la aplicación, se llama al controlador de eventos AdReady y se pasa un objeto NativeAdV2 que representa el anuncio nativo al parámetro e . Use las propiedades NativeAdV2 para obtener cada elemento del anuncio nativo y mostrar estos elementos en la página. Asegúrese de llamar también al método RegisterAdContainer para registrar el elemento de interfaz de usuario que actúa como contenedor para el anuncio nativo; esto es necesario para realizar un seguimiento correcto de las impresiones de anuncios y los clics.

Nota:

Algunos elementos del anuncio nativo son necesarios y siempre deben mostrarse en la aplicación. Para obtener más información, consulta nuestras directrices para anuncios nativos.

Por ejemplo, supongamos que la aplicación contiene una MainPage (o alguna otra página) con el siguiente StackPanel. Este StackPanel contiene una serie de controles que muestran diferentes elementos de un anuncio nativo, incluido el título, la descripción, las imágenes, patrocinados por texto y un botón que mostrará el texto de la llamada a la acción .

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

En el ejemplo de código siguiente se muestra un controlador de eventos AdReady que muestra cada elemento del anuncio nativo en los controles de StackPanel y, a continuación, llama al método RegisterAdContainer para registrar stackPanel. Este código supone que se ejecuta desde el archivo de código subyacente de la página que contiene 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);
}

Defina un controlador de eventos para el evento ErrorOccurred para controlar los errores relacionados con el anuncio nativo. En el ejemplo siguiente se escribe información de error en la ventana Salida de Visual Studio durante las pruebas.
```
private void MyNativeAdsManager_ErrorOccurred(object sender, NativeAdErrorEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("NativeAd error " + e.ErrorMessage +
        " ErrorCode: " + e.ErrorCode.ToString());
}
```
Compile y ejecute la aplicación para verlo con un anuncio de prueba.

Liberar la aplicación con anuncios en directo

Después de confirmar que la implementación de anuncios nativa muestra correctamente un anuncio de prueba, siga estas instrucciones para configurar la aplicación para mostrar anuncios reales y enviar la aplicación actualizada a la Tienda.

Asegúrese de que su implementación de anuncios nativa sigue nuestras directrices para anuncios nativos.
En el Centro de partners, vaya a la página Anuncios en la aplicación y cree una unidad de anuncios. Para el tipo de unidad de anuncio, especifique Native. Anote tanto el identificador de unidad de anuncios como el identificador de la aplicación.

Nota:

Los valores de identificador de aplicación para las unidades de anuncios de prueba y las unidades de anuncios para UWP en directo tienen diferentes formatos. Los valores de identificador de aplicación de prueba son GUID. Cuando creas una unidad de anuncios para UWP activa en el Centro de partners, el valor de id. de aplicación de la unidad de anuncios siempre coincide con el id. de la Tienda para la aplicación (un valor de id. de la Tienda de ejemplo es similar a 9NBLGGH4R315).
Opcionalmente, puedes habilitar la mediación de anuncios para el anuncio nativo configurando los valores de la sección Configuración de mediación en la página Anuncios desde la aplicación. La mediación de anuncios le permite maximizar los ingresos de anuncios y las funcionalidades de promoción de aplicaciones mostrando anuncios de varias redes publicitarias.
En el código, reemplace los valores de unidad de anuncios de prueba (es decir, los parámetros applicationId y adUnitId del constructor NativeAdsManagerV2) por los valores dinámicos que generó en el Centro de partners.
Envíe la aplicación a la Tienda mediante el Centro de partners.
Revise los informes de rendimiento de publicidad en el Centro de partners.

Administrar unidades de anuncios para varios anuncios nativos en la aplicación

Puede usar varias ubicaciones de anuncios nativas en una sola aplicación. En este escenario, se recomienda asignar una unidad de anuncio diferente a cada ubicación de anuncio nativa. El uso de diferentes unidades de anuncios para anuncios nativos permite configurar por separado las opciones de mediación y obtener datos de informes discretos para cada control. Esto también permite que nuestros servicios optimicen mejor los anuncios que servimos a su aplicación.

Importante

Puede usar cada unidad de anuncio en una sola aplicación. Si usas una unidad de anuncios en más de una aplicación, los anuncios no se atenderán para esa unidad de anuncios.

Compartir a través de

Anuncios nativos

Requisitos previos

Integración de un anuncio nativo en la aplicación

Liberar la aplicación con anuncios en directo

Administrar unidades de anuncios para varios anuncios nativos en la aplicación

Temas relacionados

Comentarios

Recursos adicionales