Anuncios nativos

  • Artículo

Advertencia

A partir del 1 de junio de 2020, se apagará la plataforma de monetización de Microsoft Ad 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, mientras que también 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 los usuarios suelen 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á planeada para una futura versión del SDK de Microsoft Advertising.

Requisitos previos

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

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

  1. En Visual Studio, abre el proyecto o crea uno nuevo.

    Nota:

    Si usa un proyecto existente, abra el archivo Package.appxmanifest en el proyecto y asegúrese de que la funcionalidad Internet (cliente) esté seleccionada. Tu aplicación necesita esta funcionalidad para recibir anuncios de prueba y anuncios en directo.

  2. Si el destino del proyecto es Cualquier CPU, actualiza el proyecto para que use una salida de compilación específica por 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, consulta Errores de referencia derivados de orientar el proyecto a Cualquier CPU.

  3. 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 Administrador de referencias, expande Universal Windows, haz clic en Extensiones y, después, selecciona la casilla junto a Microsoft Advertising SDK for XAML (versión 10.0).
    3. En el Administrador de referencias, haz clic en Aceptar.

  4. En el archivo de código adecuado de la aplicación (por ejemplo, en MainPage.xaml.cs o en 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;

  5. En una ubicación adecuada de la aplicación (por ejemplo, en o en MainPage 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 para anuncios nativos.

    Nota

    Cada NativeAdsManagerV2 tiene una unidad de anuncio correspondiente que usan nuestros servicios para proporcionar anuncios al control de anuncios nativo, y cada unidad de anuncios consta de un identificador de unidad de anuncio e id. de aplicación. En estos pasos, se asignan valores de identificador de unidad de anuncio de prueba y de 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";

  6. 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;

  7. Cuando esté listo para mostrar un anuncio nativo, llame al método RequestAd para capturar un anuncio.

    myNativeAdsManager.RequestAd();

  8. 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, incluidos 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);
}

  9. 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());
}

  10. Compile y ejecute la aplicación para verla con un anuncio de prueba.

Publicación de la aplicación con anuncios en directo

Después de confirmar que la implementación nativa de anuncios 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.

  1. Asegúrese de que la implementación de anuncios nativo sigue nuestras directrices para anuncios nativos.

  2. En el Centro de partners, vaya a la página Anuncios desde la aplicación y cree una unidad de anuncios. Para el tipo de unidad de anuncio, especifique Native. Anota el identificador de unidad de anuncio y el identificador de la aplicación.

    Nota

    Los valores de identificador de aplicación para unidades de anuncios de prueba y unidades de anuncios para UWP activos tienen distintos 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 tu aplicación (un valor de id. de la Tienda de ejemplo es similar a 9NBLGGH4R315).

  3. Opcionalmente, puedes habilitar la mediación de anuncios para el anuncio nativo mediante la configuración de la sección Configuración de mediación de 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 de anuncios.

  4. En el código, reemplace los valores de unidad de anuncio 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.

  5. Envíe la aplicación a la Tienda mediante el Centro de partners.

  6. Revise los informes de rendimiento de publicidad en el Centro de partners.

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

Puedes 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 le permite configurar por separado las opciones de mediación y obtener datos de informes discretos para cada control. Esto también permite a nuestros servicios optimizar mejor los anuncios que atienden a su aplicación.

Importante

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