Tutorial: Mostrar y realizar un seguimiento de los anuncios con el control AdRotator

Artículo
10/22/2014

Actualización: noviembre 2007

Los sitios Web con frecuencia muestran anuncios o un contenido dinámico similar que invita a los usuarios a que visiten otro sitio. ASP.NET proporciona el control AdRotator, que simplifica esta tarea. El control AdRotator muestra un gráfico que representa un anuncio, seleccionado aleatoriamente de una lista que ha creado. Así podrá llevar un seguimiento de la frecuencia con que se ve un anuncio y cuántos usuarios lo seleccionan.

Este tutorial explica cómo utilizar el control AdRotator para mostrar anuncios y proporciona una forma sencilla de llevar un seguimiento de las respuestas a los anuncios. Las tareas ilustradas en este tutorial incluyen lo siguiente:

Crear una lista de anuncios para mostrarlos.
Mostrar anuncios en una página.
Crear una manera de dar seguimiento al número de veces que se selecciona el anuncio.
Mostrar estadísticas sobre las veces que se selecciona el anuncio.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

Herramienta de desarrollo de sitios Web Microsoft Visual Web Developer.
.NET Framework.
Descripción general de Visual Web Developer. Para obtener una introducción, vea Tutorial: Crear una página Web básica en Visual Web Developer.

Crear el sitio Web

Si ya ha creado un sitio web en Visual Web Developer siguiendo los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizarlo y pasar a la sección siguiente. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo y después en Sitio Web.

Aparecerá el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
En el cuadro Ubicación, haga clic en Sistema de archivos y a continuación escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio Web.

Por ejemplo, escriba el nombre de carpeta C:\WebSite.
En la lista Lenguajes, haga clic en el lenguaje de programación con el que desee trabajar.

El lenguaje de programación que escoja será el valor predeterminado para el sitio Web, sin embargo, puede establecer el lenguaje de programación para cada página de forma individual.
Haga clic en Aceptar.

Visual Studio crea la carpeta y una nueva página denominada Default.aspx.

Crear anuncios

Los anuncios son gráficos que se muestran en la página con una dirección URL de destino; cuando los usuarios hacen clic en el gráfico son redirigidos al sitio de destino. Por lo tanto, hacen falta archivos de gráficos que funcionen como anuncios.

Nota:
En secciones posteriores de este tutorial se da por sentado que está utilizando gráficos que se nombran según el siguiente procedimiento. Si utiliza gráficos existentes, asegúrese de sustituir los nombre de los archivos adecuados más adelante en este tutorial.

Comience creando una carpeta en el sitio Web para almacenar los gráficos.

Para crear una carpeta de imágenes

En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web, haga clic en Nueva carpeta y, a continuación, llame la carpeta Imágenes.
Si tiene gráficos que pueda utilizar como anuncios, cópielos en la carpeta nueva. De lo contrario, siga el siguiente procedimiento para crear algunas imágenes.

Si ya cuenta con algunos gráficos que puede utilizar para representar anuncios, puede utilizarlos. Si no tiene, el siguiente procedimiento le sugiere una manera de crear gráficos para este tutorial.

Para crear gráficos que funcionen como anuncios

En Microsoft Windows, abra Paint.
En el menú Imagen, haga clic en Atributos.
En el cuadro de diálogo Atributos, establezcaAncho en 250 y Alto en 50 y después haga clic en Aceptar.
Desde la Cuadro de herramientas, arrastre la herramienta de texto hasta el gráfico y después escriba algún texto que le ayude a identificar el anuncio.
En la carpeta <NombreSitioWeb>\Images, guarde el gráfico como <NombreSitioWeb>\Images\Contoso_ad.gif.
Cree un segundo gráfico y guárdelo como <NombreSitioWeb>\Images\ASPNET_ad.gif.
Cierre Paint.

Crear una Lista de anuncios

En cuanto tenga gráficos para los anuncios, debe crear una lista de los anuncios que el control AdRotator puede leer. La lista tiene la forma de un archivo XML.

Para crear un archivo XML de anuncios

En el Explorador de soluciones, haga clic con el botón secundario del mouse en App_Data y después haga clic en AgregarNuevo elemento.

Nota:
Al poner el archivo XML en la carpeta App_Data, el archivo recibe automáticamente los permisos correctos para que ASP.NET pueda leer el archivo en tiempo de ejecución. Colocar el archivo XML en la carpeta App_Data ayuda a evitar que el archivo se vea en un explorador, ya que la carpeta App_Data está marcada como nonbrowsable (no explorable).

Debajo de Plantillas instaladas de Visual Studio, haga clic en Archivo XML.
En el cuadro Nombre, escriba Sample.ads.

Nota:

Utilice la extensión .ads.
Haga clic en Agregar.

Se crear un nuevo archivo XML que solo contiene la directiva XML.
Copie el siguiente XML en el archivo, reemplazando la directiva XML.
```
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/images/Contoso_ad.gif</ImageUrl>
    <href>https://www.contoso.com</href>
    <AlternateText>Ad for Contoso.com</AlternateText>
  </Ad>
  <Ad>
    <ImageUrl>~/images/ASPNET_ad.gif</ImageUrl>
    <href>https://www.asp.net</href>
    <AlternateText>Ad for ASP.NET Web site</AlternateText>
  </Ad>
</Advertisements>
```
Nota:

Si sus archivos de gráficos tienen nombres diferentes, cambie los nombres en los elementos <ImageUrl> en consecuencia.

Este archivo XML contiene elementos <Ad> para dos anuncios que corresponden a los dos archivos de gráficos que ha creado. En una aplicación real, las direcciones URL en los elementos <href> harían referencia a los sitios Web de los anuncios.

Nota:

Existen elementos adicionales para definir anuncios. Para obtener información detallada, vea AdvertisementFile.
Guarde el archivo y ciérrelo.

Nota:
Utilice la extensión .ads.

Nota:
Si sus archivos de gráficos tienen nombres diferentes, cambie los nombres en los elementos <ImageUrl> en consecuencia.

Nota:
Existen elementos adicionales para definir anuncios. Para obtener información detallada, vea AdvertisementFile.

Mostrar anuncios en la página

Ahora configurará una página Web para mostrar los anuncios que ha creado. En el siguiente procedimiento, se va a enlazar un control AdRotator a un control XmlDataSource. Sin embargo, cuando se utiliza un archivo XML estático, no se requiere ningún control de origen de datos ya que el archivo XML puede configurarse directamente con la propiedad AdvertisementFile del control AdRotator.

Para mostrar anuncios en la página

Si creó un sitio Web nuevo para este tutorial, abra la página Default.aspx.
Si está utilizando un sitio Web que existía antes de iniciar este tutorial, agregue una página nueva siguiendo estos pasos:
1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web (por ejemplo, C:\WebSites) y, a continuación, seleccione Agregar nuevo elemento.
2. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
3. En el cuadro Nombre, escriba TestAds.aspx.
4. Haga clic en Agregar.
Abra TestAds.aspx y cambie a la vista Diseño.
Desde el grupo Estándar del Cuadro de herramientas, arrastre un control AdRotator a la página.

Aparece el menú de acceso directo Tareas de AdRotator.
En la lista Elegir origen de datos, haga clic en Nuevo origen de datos.

Aparece el Asistente para la configuración de orígenes de datos.
Debajo de ¿De dónde obtendrá la aplicación los datos?, haga clic en Archivo XML.
En el cuadro Especificar un id. para el origen de datos, deje el valor (XmlDataSource1) predeterminado.
Haga clic en Aceptar.

Aparece el cuadro de diálogo Configurar origen de datos.
En el cuadro Archivo de datos, escriba ~/App_Data/Sample.ads, y después haga clic en Aceptar.

O bien, puede utilizar Examinar para localizar el archivo:
1. En el cuadro de diálogo Seleccionar archivo XML, en la lista Tipo de archivo, haga clic en Todos los archivos (*.*).
2. Debajo de Carpetas de proyecto, haga clic en App_Data.
3. Debajo de Contenido de la carpeta, haga clic en Sample.ads, después en Aceptar y otra vez en Aceptar.
Desde el grupo Estándar del Cuadro de herramientas, arrastre un control Button a la página.

Nota:

El diseño exacto de la página no es importante.

El control Button sólo está en la página para ofrecerle una forma sencilla de devolver la página al servidor.

Nota:
El diseño exacto de la página no es importante.

Ahora puede probar los controles.

Para probar los anuncios

Presione CTRL+F5 para ejecutar la página.

Uno de los dos anuncios aparece en la página.
Haga clic en Botón varias veces para hacer que la página devuelva los datos.

El anuncio que aparece varia de forma aleatoria.

Nota:

Al haber sólo dos anuncios, tal vez necesite hacer clic en Botón varias veces para ver un anuncio diferente.
Haga clic en un anuncio.

Se le redireccionará a la página de destino para dicho anuncio.
Cierre el explorador.

Nota:
Al haber sólo dos anuncios, tal vez necesite hacer clic en Botón varias veces para ver un anuncio diferente.

Hacer un seguimiento de las respuestas a los anuncios

En este momento, su página solo muestra anuncios en los que los usuarios pueden hacer clic para saltar a otra página. En esta parte del tutorial, agregará funcionalidad para llevar un control de cuántas veces los usuarios hacen clic en los anuncios. Cambiará la dirección URL de los anuncios en el archivo Sample.ads para enviar la respuesta del anuncio a una página de redirección, con información en la cadena de consulta que identifica el anuncio y el destino final.

Entonces creará un segundo archivo XML para almacenar la información del contador de anuncios. En un sitio Web de producción, no debería utilizar un archivo XML para dar seguimiento a las veces que se ha hecho clic en un anuncio, porque el archivo XML no admitiría mucho tráfico. Sin embargo, en este tutorial utilizará un archivo XML por comodidad, para no tener que configurar el acceso a la base de datos. Además, en una aplicación de producción, posiblemente quiera realizar un seguimiento más sofisticado, por ejemplo, para saber si los usuarios repiten la selección del anuncio, de la información de hora y fecha en la que se hace clic, etc. No obstante, la estrategia general de utilizar una página de redirección para procesar cada vez que se hace clic en un anuncio es la misma independientemente del método que seleccione para dar seguimiento a los datos.

Finalmente, creará la página de redirección, en la que acumulará los contadores para los distintos anuncios y luego volverá a redirigir el anuncio a la página de destino en la que desea mostrarlo.

Para redirigir anuncios a una página de seguimiento

Abra el archivo Sample.ads.
Establezca href para que incluya lo siguiente:
- El nombre de su página de redirección (AdRedirector.aspx).
- Un identificador para cada anuncio.
- La página a la que señala el anuncio.
La siguiente lista de código muestra el archivo XML Sample.ads actualizado con direcciones URL que especifiquen la página AdRedirector.aspx. El identificador de anuncios y la página final se especifican como una cadena de consulta.

Nota:

Puesto que el signo & es un carácter reservado en XML, la cadena de consulta incluye en su lugar la referencia de la entidad & .
```
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/images/Contoso_ad.gif</ImageUrl>
    <href>AdRedirector.aspx?ad=Widgets&amp;target=https://www.contoso.com/widgets/</href>
    <AlternateText>Ad for Contoso.com</AlternateText>
  </Ad>
  <Ad>
    <ImageUrl>~/images/ASPNET_ad.gif</ImageUrl>
    <href>AdRedirector.aspx?ad=ASPNET&amp;target=https://www.asp.net</href>
    <AlternateText>Ad for ASP.NET Web site</AlternateText>
  </Ad>
</Advertisements>
```
Guarde el archivo Sample.ads y ciérrelo.

Nota:
Puesto que el signo & es un carácter reservado en XML, la cadena de consulta incluye en su lugar la referencia de la entidad & .

El siguiente paso es crear un archivo XML en el que pueda almacenar la información de los contadores de los clics del anuncio. En un sitio Web de producción, no necesitaría este paso porque escribiría la información directamente en una base de datos. Se utiliza un archivo XML en este tutorial para simplificar los pasos necesarios para hacer un seguimiento de las respuestas a los anuncios.

Para crear el archivo XML para el seguimiento de las respuestas a los anuncios

En el Explorador de soluciones, haga clic con el botón secundario del mouse en la carpeta App_Data y después haga clic en AgregarNuevo elemento.
Debajo de Plantillas, haga clic en Archivo XML.
En el cuadro Nombre, escriba AdResponses.xml y, a continuación, haga clic en Agregar.

Se crear un nuevo archivo XML que solo contiene la directiva XML.

Copie el siguiente XML en el archivo, reemplazando la directiva XML.

<?xml version="1.0" standalone="yes"?>
<adResponses>
  <ad adname="Widgets" hitCount="0" />
  <ad adname="ASPNET" hitCount="0" />
</adResponses>

El archivo contiene elementos que tienen dos datos: el identificador de un anuncio y un contador.

Nota:
Si asignó diferentes identificadores a los anuncios en el archivo Sample.ads en el procedimiento anterior cuando creó las cadenas de consulta, asegúrese de que los identificadores en el archivo AdResponses.xml coincidan con ellos.

Guarde el archivo y ciérrelo.

Nota:
El servidor Web utilizado determina si ASP.NET dispone de permiso de escritura para el archivo XML. En este tutorial, se va a utilizar el servidor de desarrollo de ASP.NET, que está incluido con Visual Web Developer y dispone de acceso de escritura al archivo XML. Si utiliza Microsoft Internet Information Services (IIS), puede que el proceso de trabajo del servidor Web de IIS no tenga acceso de escritura al archivo XML, por lo que habría que configurar explícitamente el permiso de escritura. Para obtener más información sobre los servidores Web en Visual Web Developer, vea Servidores Web en Visual Web Developer.

El servidor Web utilizado determina si ASP.NET dispone de permiso de escritura para el archivo XML. En este tutorial, se va a utilizar el servidor de desarrollo de ASP.NET, que está incluido con Visual Web Developer y dispone de acceso de escritura al archivo XML. Si utiliza Microsoft Internet Information Services (IIS), puede que el proceso de trabajo del servidor Web de IIS no tenga acceso de escritura al archivo XML, por lo que habría que configurar explícitamente el permiso de escritura. Para obtener más información sobre los servidores Web en Visual Web Developer, vea Servidores Web en Visual Web Developer.

Ahora creará la página de redirección, que recoge la información sobre el anuncio seleccionado, actualiza el contador para el anuncio y, a continuación, envía la solicitud de la página que está asociada con el anuncio.

Para crear un controlador Page_Load

En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web (por ejemplo, C:\WebSites) y, a continuación, seleccione Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Form.
En el cuadro Nombre, escriba AdRedirector.aspx y, a continuación, haga clic en Agregar.

De este modo se crea la página a la que se redirigirán todos los anuncios cuando los usuarios los seleccionen. La página no se mostrará a los usuarios. Por lo tanto, no pondrá ningún control en ella.
En la vista Diseño, haga doble clic en la página para crear un controlador Page_Load.

Copie el siguiente código en el controlador (no reemplace la declaración del controlador del esqueleto).

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim adName As String = Request.QueryString("ad")
    Dim redirect As String = Request.QueryString("target")
    If (adName Is Nothing Or redirect Is Nothing) Then
        redirect = "TestAds.aspx"
    End If

    Dim doc As System.Xml.XmlDocument
    Dim docPath As String = "~/App_Data/AdResponses.xml"

    doc = New System.Xml.XmlDocument()
    doc.Load(Server.MapPath(docPath))
    Dim root As System.Xml.XmlNode = doc.DocumentElement
    Dim xpathExpr As String
    xpathExpr = "descendant::ad[@adname='" & adName & "']"
    Dim adNode As System.Xml.XmlNode = _
        root.SelectSingleNode(xpathExpr)
    If adNode IsNot Nothing Then
        Dim ctr As Integer = _
            CInt(adNode.Attributes("hitCount").Value)
        ctr += 1
        Dim newAdNode As System.Xml.XmlNode = _
            adNode.CloneNode(False)
        newAdNode.Attributes("hitCount").Value = ctr.ToString()
        root.ReplaceChild(newAdNode, adNode)
        doc.Save(Server.MapPath(docPath))
    End If
    Response.Redirect(redirect)

End Sub

protected void Page_Load(object sender, EventArgs e)
{
    String adName = Request.QueryString["ad"];
    String redirect = Request.QueryString["target"];
    if (adName == null | redirect == null)
        redirect = "TestAds.aspx";

    System.Xml.XmlDocument doc = new System.Xml.XmlDocument();
    String docPath = @"~/App_Data/AdResponses.xml";
    doc.Load(Server.MapPath(docPath));
    System.Xml.XmlNode root = doc.DocumentElement;
    System.Xml.XmlNode adNode =
        root.SelectSingleNode(
        @"descendant::ad[@adname='" + adName + "']");
    if (adNode != null)
    {
        int ctr =
            int.Parse(adNode.Attributes["hitCount"].Value);
        ctr += 1;
        System.Xml.XmlNode newAdNode = adNode.CloneNode(false);
        newAdNode.Attributes["hitCount"].Value = ctr.ToString();
        root.ReplaceChild(newAdNode, adNode);
        doc.Save(Server.MapPath(docPath));
    }
    Response.Redirect(redirect);
}

El código lee el identificador y la dirección URL del anuncio desde la cadena de consulta. Después utiliza métodos XML para leer el archivo AdResponse.xml en un objeto XmlDocument. El código localiza el elemento XML apropiado mediante la expresión XPath, extrae el valor hitCounter y, a continuación, actualiza el valor hitCounter. Después, el código crea una copia del elemento XML mediante clonación, reemplaza el elemento antiguo con el nuevo y luego vuelve a escribir el documento XML actualizado en el disco. Por último, el código redirecciona a la dirección URL para el anuncio.

Ahora realizará una prueba para confirmar que los contadores de los anuncios funcionan.

Para probar el seguimiento de la respuesta del anuncio

Abra la página que contiene el control AdRotator y presione CTRL+F5.
Haga clic en un anuncio.

Se le redireccionará a la página de destino para dicho anuncio.
En el explorador, haga clic en Atrás para volver a la página del anuncio.
Vuelva a hacer clic en el anuncio o haga clic en Botón para mostrar un anuncio diferente y luego haga clic en el anuncio.
Continúe hasta que haya seleccionado cada anuncio al menos una vez y uno o más anuncios más de una vez.
Cierre el explorador.
En Visual Web Developer, abra el archivo AdResponse.xml y compruebe que el contador de los anuncios refleja el número de clics de la prueba.
Cierre el archivo AdResponse.xml.

Mostrar datos del contador de anuncios

Para la parte final del tutorial, creará una página que muestra la información del contador del anuncio, que es más práctico que examinar el archivo XML de forma manual.

Para crear una página que muestre los datos de respuesta del anuncio

En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en AgregarNuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba ViewAdData.aspx.
Haga clic en Agregar.
Cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control XmlDataSource a la página.
En el menú de acceso directo XmlDataSourceTareas, haga clic en Configurar origen de datos.

Aparecerá el cuadro de diálogo Configurar origen de datos<NombreDelOrigenDeDatos>.
En el cuadro Archivo de datos, escriba ~/App_Data/AdResponses.xml.

O bien, puede utilizar Examinar para localizar el archivo.
Haga clic en Aceptar.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú de acceso directo Tareas de GridView, en la lista Elegir origen de datos, haga clic en XmlDataSource1.
Presione CTRL+F5 para ejecutar la página.

La página muestra los datos de respuesta del anuncio en una cuadrícula.
Cierre el explorador.

Pasos siguientes

Existen más características disponibles en el control AdRotator de las que se han mostrado en este tutorial. Tal vez desee explorar estas características de las siguientes maneras:

Utilice atributos adicionales cuando cree anuncios en el archivo XML.

Por ejemplo, puede utilizar el elemento Impressions para controlar con qué frecuencia se selecciona un anuncio en relación con los demás en el archivo de anuncios. Cuanto mayor sea el valor, más probabilidad hay de que se seleccione. Para obtener información detallada, vea AdvertisementFile.

Utilice una base de datos para hacer un seguimiento de las respuestas.

Nota:
En una aplicación de producción, no utilice un archivo XML para hacer un seguimiento de las respuestas de los anuncios, porque no se ajustará para admitir muchos usuarios. Este tutorial utiliza un archivo XML para las respuestas de los anuncios solamente para simplificar el tutorial y para que no tenga que configurar una base de datos.

Haga un seguimiento de la información adicional sobre las veces que se selecciona un anuncio.

Sería conveniente que controlara a los usuarios diferentes que visitan el anuncio, quizá escribiendo una cookie en el explorador, si el usuario ha hecho clic en el anuncio en las últimas 24 horas, o haciendo un seguimiento de la dirección del identificador del explorador cuando almacena información sobre los clics. También es posible que agregue información de los clics por fecha y hora, y quizá que haga un seguimiento de la información del anuncio según otra información dinámica en la página de código, lo que le puede ayudar a analizar patrones de trafico.
Enlace el control AdRotator con sus datos utilizando un control de origen de datos diferentes.

Por ejemplo, puede almacenar datos de anuncios en una base de datos. Si lo hace, puede agregar un control de origen de datos a la página y configurarla para que utilice una consulta para obtener datos de anuncios. Después puede enlazar el control AdRotator con el control del origen de datos. Para obtener información detallada, vea Cómo: Mostrar anuncios desde una base de datos mediante el control AdRotator de servidor Web.

Vea también

Referencia

Información general sobre AdRotator (Control de servidor Web)

Compartir a través de