Condividi tramite


Procedura dettagliata: visualizzazione e rilevamento di annunci pubblicitari con il controllo AdRotator

Aggiornamento: novembre 2007

Spesso nei siti Web vengono visualizzati annunci o contenuto dinamico simile, mediante il quale gli utenti vengono invitati a visitare un altro sito. Il controllo AdRotator fornito in ASP.NET, consente di semplificare questa attività. Il controllo AdRotator consente la visualizzazione di un'immagine che rappresenta un annuncio, selezionandolo in modo casuale da un elenco creato in precedenza. È possibile tenere traccia della frequenza di visualizzazione di un annuncio e della frequenza con cui viene selezionato dagli utenti.

In questa procedura dettagliata viene illustrato come utilizzare il controllo AdRotator per visualizzare annunci e viene fornito un metodo semplice per tenere traccia delle risposte agli annunci. Di seguito sono elencate le attività illustrate nella procedura dettagliata:

  • Creazione di un elenco di annunci da visualizzare.

  • Visualizzazione di annunci in una pagina.

  • Creazione di un metodo di traccia del numero di volte in cui l'annuncio viene selezionato.

  • Visualizzazione delle statistiche relative ai clic sugli annunci.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:

Creazione del sito Web

Se è già stato creato un sito Web in Visual Web Developer completando la Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovosito Web dal menu File.

    Verrà visualizzata la finestra di dialogo Nuovo sito Web.

  3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

  4. Nella casella Percorso, fare clic su File system e digitare il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome cartella C:\WebSites.

  5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.

    Il linguaggio di programmazione scelto sarà quello predefinito per il sito Web; tuttavia è possibile impostare il linguaggio di programmazione per ogni pagina singolarmente.

  6. Scegliere OK.

    Visual Studio crea la cartella e una nuova pagina chiamata Default.aspx.

Creazione di annunci

Gli annunci sono immagini che vengono visualizzate nella pagina con un URL di destinazione; quando l'utente fa clic sull'immagine, viene reindirizzato al sito di destinazione. Pertanto, sono necessari file di immagine che funzionino da annunci.

Nota:

Nelle sezioni successive di questa procedura dettagliata si presume l'utilizzo di immagini denominate in base alla procedura indicata di seguito. Se si utilizzano immagini esistenti, accertarsi di sostituire i nomi file appropriati più avanti nella procedura dettagliata.

Iniziare con la creazione di una cartella per memorizzare le immagini all'interno sito Web.

Per creare una cartella per le immagini

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul sito Web, scegliere Nuova cartella e denominare la cartella Images.

  2. Se si dispone di immagini esistenti da utilizzare come annunci, copiarli nella nuova cartella. In caso contrario, effettuare la procedura successiva per creare alcune immagini.

Se si dispone già di alcune immagini da utilizzare per gli annunci, è possibile utilizzare tali immagini. In caso contrario, nella procedura riportata di seguito viene suggerito un metodo per creare immagini adatte a questa procedura dettagliata.

Per creare immagini che funzionino da annunci

  1. In Microsoft Windows, aprire Paint.

  2. Scegliere Attributi dal menu Immagine.

  3. Nella finestra di dialogo Attributi, impostare Larghezza su 250 e Altezza su 50, quindi scegliere OK.

  4. Dalla Casella degli strumenti, trascinare lo strumento di testo sull'immagine e digitare un testo che consenta di identificare l'annuncio.

  5. Nella cartella <Websitename>\Images, salvare l'immagine come <Websitename>\Images\Contoso_ad.gif.

  6. Creare un'altra immagine e salvarla come <Websitename>\Images\ASPNET_ad.gif.

  7. Chiudere Paint.

Creazione di un elenco di annunci

Non appena si dispone di immagini per gli annunci, è necessario creare un elenco degli annunci che possono essere letti dal controllo AdRotator. L'elenco è in formato file XML.

Per creare un file XML di annunci

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse su App_Data, quindi scegliere Aggiunginuovo elemento.

    Nota:

    Quando viene inserito nella cartella App_Data, il file XML dispone delle autorizzazioni necessarie per consentire ad ASP.NET la lettura e la scrittura del file in fase di esecuzione. L'inserimento del file XML nella cartella App_Data consente di proteggerlo dalla visualizzazione in un browser, in quanto la cartella in questione è contrassegnata come nonbrowsable.

  2. In Modelli Visual Studio installati fare clic su File XML.

  3. Nella casella Nome, digitare Sample.ads.

    Nota:

    Utilizzare l'estensione ads.

  4. Scegliere Aggiungi.

    Viene creato un nuovo file XML contenente solo la direttiva XML.

  5. Copiare il codice XML nel file, sovrascrivendo la direttiva 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:

    Se i file di immagine dispongono di nomi file diversi, modificare i nomi degli elementi <ImageUrl> in modo appropriato.

    Il file XML contiene elementi <Ad> per due annunci, corrispondenti a due file di immagine creati in precedenza. In un'applicazione reale, gli URL negli elementi <href> fanno riferimento ai siti Web degli utenti che hanno inserito gli annunci.

    Nota:

    Per la definizione degli annunci sono disponibili elementi aggiuntivi. Per informazioni dettagliate, vedere AdvertisementFile.

  6. Salvare e chiudere il file.

Visualizzazione degli annunci nella pagina

A questo punto verrà configurata una pagina Web per la visualizzazione degli annunci creati. Nella procedura indicata di seguito verrà eseguita l'associazione di un controllo AdRotator a un controllo XmlDataSource. Quando invece si utilizza un file XML statico, non è necessario un controllo origine dati, in quanto il file XML può essere impostato direttamente con la proprietà AdvertisementFile del controllo AdRotator.

Per visualizzare gli annunci nella pagina

  1. Se è stato creato un nuovo sito Web per questa procedura dettagliata, aprire la pagina Default.aspx.

  2. Se si sta utilizzando un sito Web già esistente prima di iniziare questa procedura dettagliata, aggiungere una nuova pagina mediante la procedura indicata di seguito:

    1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web (ad esempio, C:\WebSites), quindi scegliere Aggiungi nuovo elemento.

    2. In Modelli Visual Studio installati fare clic su Web Form.

    3. Nella casella Nome, digitare TestAds.aspx.

    4. Scegliere Aggiungi.

  3. Aprire la pagina TestAds.aspx e passare alla visualizzazione Progettazione.

  4. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo AdRotator nella pagina.

    Viene visualizzato il menu di scelta rapida Attività AdRotator.

  5. Scegliere Nuova origine dati dall'elenco Scegli origine dati.

    Viene visualizzata la Configurazione guidata origine dati.

  6. Nella finestra Specificare l'origine dei dati utilizzati dall'applicazione, selezionare File XML.

  7. Nella casella Specificare l'ID dell'origine dati, lasciare l'impostazione predefinita, (XmlDataSource1).

  8. Scegliere OK.

    Verrà visualizzata la finestra di dialogo Configura origine dati.

  9. Nella casella File di dati, immettere ~/App_Data/Sample.ads e scegliere OK.

    In alternativa, fare clic su Sfoglia per individuare il file.

    1. Nella finestra di dialogo Seleziona file XML scegliere Tutti i file (*.*) nell'elenco Tipo file.

    2. In Cartelle progetto, fare clic su App_Data.

    3. In Contenuto cartella fare clic su Sample.ads, scegliere OK e quindi nuovamente OK.

  10. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo Button nella pagina.

    Nota:

    Il layout esatto della pagina non è importante.

    Il controllo Button viene collocato sulla pagina solo per fornire un metodo pratico di esecuzione del postback della pagina al server.

A questo punto verrà eseguito il test degli annunci.

Per eseguire il test degli annunci

  1. Premere CTRL+F5 per eseguire la pagina.

    Uno dei due annunci viene visualizzato nella pagina.

  2. Fare clic sul controllo Button diverse volte in modo da eseguire il postback della pagina.

    L'annuncio che viene visualizzato in modo casuale varia.

    Nota:

    Dal momento che sono presenti soltanto due annunci, è possibile che sia necessario fare clic su Button più volte prima di visualizzare un annuncio diverso.

  3. Fare clic su un annuncio.

    L'utente viene reindirizzato alla pagina di destinazione per quell'annuncio.

  4. Chiudere il browser.

Registrazione delle risposte agli annunci

A questo punto, nella pagina vengono visualizzati solo gli annunci sui quali l'utente può fare clic per passare a un'altra pagina. In questa parte della procedura dettagliata, verrà aggiunta una funzionalità per tenere traccia del numero di clic sugli annunci da parte dell'utente. L'URL degli annunci nel file Sample.ads verrà modificato per inviare la risposta all'annuncio a una pagina di reindirizzamento, con le informazioni della stringa di query che consente di identificare l'annuncio e la destinazione finale.

A questo punto verrà creato un secondo file XML per memorizzare le informazioni relative ai contatori degli annunci. In un sito Web di produzione, non è opportuno utilizzare un file XML per tenere traccia dei clic, in quanto questo tipo di file non supporta una grande quantità di traffico. Tuttavia, ai fini di questa procedura dettagliata, per comodità sarà utilizzato un file XML, in modo che non sia necessario configurare l'accesso a un database. Inoltre, è probabile che in un'applicazione di produzione si desideri un sistema di traccia dei clic più complesso, ad esempio la garanzia che si tratti di visitatori univoci, informazioni relative alla data e all'ora dei clic e via di seguito. Tuttavia, la strategia globale di utilizzo di una pagina di reindirizzamento per elaborare i clic è identica, indipendentemente dalla modalità di traccia dei dati scelta.

Infine, verrà creata la pagina di reindirizzamento nella quale saranno riuniti i contatori di diversi annunci e quindi si verrà reindirizzati nuovamente alla pagina di destinazione per la visualizzazione dell'annuncio.

Per reindirizzare gli annunci a una pagina di analisi

  1. Aprire il file Sample.ads.

  2. Impostare href in modo da includere le seguenti informazioni:

    • Il nome della pagina di reindirizzamento (AdRedirector.aspx).

    • Un identificatore per ciascun annuncio.

    • La pagina di destinazione finale dell'annuncio.

    Nel listato di codice riportato di seguito viene mostrato il file XML Sample.ads aggiornato con gli URL che specificano la pagina AdRedirector.aspx. L'identificatore dell'annuncio e la pagina di destinazione sono specificati come stringa di query.

    Nota:

    Poiché in XML la e commerciale (&) è un carattere riservato, nella stringa di query viene sostituita con il riferimento a entità &amp; .

    <?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>
    
  3. Salvare il file Sample.ads e chiuderlo.

Il passaggio successivo consiste nel creare il file XML nel quale memorizzare le informazioni sui contatori relativamente ai clic sugli annunci. È probabile che tale passaggio non sia necessario in un sito Web di produzione, in quanto le informazioni vengono scritte in un database. L'utilizzo di un file XML in questa procedura dettagliata consente di semplificare i passaggi necessari a tenere traccia delle risposte agli annunci.

Per creare il file XML per la traccia della risposta all'annuncio

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data, quindi scegliere Aggiunginuovo elemento.

  2. In Modelli fare clic su File XML.

  3. Nella casella Nome, digitare AdResponses.xml, quindi scegliere Aggiungi.

    Viene creato un nuovo file XML contenente solo la direttiva XML.

  4. Copiare il codice XML nel file, sovrascrivendo la direttiva XML.

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

    Nel file sono contenuti gli elementi che dispongono di due informazioni: l'ID di un annuncio e un contatore.

    Nota:

    Se nella procedura precedente in cui sono state create le stringhe di query gli ID assegnati agli annunci del file Sample.ads sono diversi, accertarsi che gli ID del file AdResponses.xml corrispondano agli ID assegnati.

  5. Salvare e chiudere il file.

    Nota:

    La disponibilità di un'autorizzazione di scrittura in ASP.NET per il file XML dipende dal server Web utilizzato. In questa procedura dettagliata verrà utilizzato ASP.NET Development Server, che è incluso in Visual Web Developer e dispone dell'accesso in scrittura al file XML. Se si utilizza Microsoft Internet Information Services (IIS), è possibile che il processo di lavoro del server Web IIS non disponga di questo tipo di accesso al file XML. Sarà pertanto necessario impostare esplicitamente l'autorizzazione di scrittura. Per informazioni sui server Web in Visual Web Developer, vedere Server Web in Visual Web Developer.

A questo punto verrà creata la pagina di reindirizzamento, nella quale vengono inserite informazioni sull'annuncio selezionato, viene eseguito l'aggiornamento del contatore relativo all'annuncio e viene inviata la richiesta alla pagina associata all'annuncio.

Per creare un gestore Page_Load

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web (ad esempio, C:\WebSites), quindi scegliere Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati fare clic su Web Form.

  3. Nella casella Nome, digitare AdRedirector.aspx, quindi scegliere Aggiungi.

    In tal modo viene creata la pagina alla quale saranno indirizzati tutti gli annunci nel momento in cui vengono selezionati dall'utente. La pagina non sarà visualizzata agli utenti. Pertanto, non verrà inserito alcun controllo nella pagina.

  4. Nella visualizzazione Progettazione, fare doppio clic sulla pagina per creare un gestore Page_Load.

  5. Copiare il codice riportato di seguito nel gestore (non sovrascrivere la struttura della dichiarazione del gestore).

    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);
    }
    

    Il codice ricava l'ID e l'URL dalla stringa di query, quindi utilizza i metodi XML per leggere il file AdResponse.xml in un oggetto XmlDocument. Il codice consente di individuare l'elemento XML appropriato, utilizzando un'espressione XPath, di estrarre il valore hitCounter e di aggiornare il valore hitCounter. Successivamente, crea una copia dell'elemento XML tramite un processo di duplicazione, sostituisce il vecchio elemento con il nuovo e quindi il documento XML aggiornato viene scritto nuovamente sul disco. Infine, il codice viene utilizzato per il reindirizzamento all'URL dell'annuncio.

A questo punto verrà eseguito il test per confermare il funzionamento dei contatori degli annunci.

Per eseguire il test della traccia delle risposte agli annunci

  1. Aprire la pagina in cui è contenuto il controllo AdRotator e premere CTRL+F5.

  2. Fare clic sull'annuncio.

    L'utente viene reindirizzato alla pagina di destinazione per quell'annuncio.

  3. Nel browser, fare clic su Indietro per ritornare alla pagina dell'annuncio.

  4. Fare nuovamente clic sull'annuncio oppure fare clic su Button per visualizzare un annuncio diverso, quindi scegliere l'annuncio.

  5. Continuare fino a quando non è stato fatto clic su ciascun annuncio almeno una volta, e più volte su uno o più annunci.

  6. Chiudere il browser.

  7. In Visual Web Developer, aprire il file AdResponse.xml e verificare che i contatori relativi agli annunci riflettano il numero di clic del test.

  8. Chiudere il file AdResponse.xml.

Visualizzazione dei dati dei contatori degli annunci

Nella parte finale della procedura dettagliata, sarà creata una pagine per visualizzare le informazioni relative ai contatori, un metodo più pratico rispetto all'analisi manuale del file XML.

Per creare una pagina per visualizzare i dati relativi alla risposta agli annunci

  1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web e scegliere Aggiunginuovo elemento.

  2. In Modelli Visual Studio installati fare clic su Web Form.

  3. Nella casella Nome, digitare ViewAdData.aspx.

  4. Scegliere Aggiungi.

  5. Passare alla visualizzazione Progettazione.

  6. Dal gruppo Dati della Casella degli strumenti, trascinare un controllo XmlDataSource nella pagina.

  7. Dal menu AttivitàXmlDataSource, scegliere Configura origine dati.

    Verrà visualizzata la finestra di dialogo Configura origine dati <Datasourcename>.

  8. Nella casella File di dati digitare ~/App_Data/AdResponses.xml.

    In alternativa, fare clic su Sfoglia per individuare il file.

  9. Scegliere OK.

  10. Dal gruppo Dati della Casella degli strumenti, trascinare un controllo GridView nella pagina.

  11. Nell'elenco Scegli origine dati del menu di scelta rapida Attività GridView, fare clic su XmlDataSource1.

  12. Premere CTRL+F5 per eseguire la pagina.

    Nella pagina vengono visualizzati i dati relativi alla risposta all'annuncio all'interno di una griglia.

  13. Chiudere il browser.

Passaggi successivi

Il numero di funzionalità disponibili nel controllo AdRotator è superiore a quello illustrato in questa procedura dettagliata. Per esplorare tali funzionalità effettuare una delle seguenti operazioni:

  • Utilizzare attributi aggiuntivi quando si creano annunci nel file XML.

    Ad esempio, è possibile utilizzare l'elemento Impressions per controllare la frequenza con la quale viene selezionato un annuncio rispetto ad altri annunci nel file degli annunci. Maggiore è il valore, più di frequente verrà selezionato l'annuncio. Per informazioni dettagliate, vedere AdvertisementFile.

  • Utilizzare un database per tenere traccia delle risposte agli annunci.

    Nota:

    In un'applicazione di produzione, non utilizzare un file XML per tenere traccia delle risposte agli annunci, in quanto non sarà in grado di supportare molti utenti. In questa procedura dettagliata viene utilizzato un file XML per le risposte agli annunci solo per semplificare la procedura e per fare in modo che non sia necessario configurare un database.

  • Tenere traccia di informazioni aggiuntive relative ai clic sugli annunci.

    È possibile che si desideri accertarsi che si sta tenendo traccia di visitatori univoci, probabilmente scrivendo un cookie all'interno del browser se l'utente ha fatto clic il giorno precedente oppure tenendo traccia dell'indirizzo IP del browser quando si memorizzano le informazioni relative ai clic. È anche possibile aggregare tali informazioni per data e ora e tenere traccia delle informazioni sugli annunci in base all'altro contenuto dinamico della pagina di origine, in modo da consentire l'analisi degli schemi di traffico.

  • Associare il controllo AdRotator ai relativi dati mediante un controllo origine dati diverso.

    Ad esempio, è possibile memorizzare i dati relativi agli annunci all'interno di un database. In tal modo, è possibile aggiungere alla pagina un controllo origine dati e configurarlo per l'utilizzo di una query per ottenere i dati degli annunci. Successivamente sarà possibile associare il controllo AdRotator al controllo origine dati. Per informazioni dettagliate, vedere Procedura: visualizzare gli annunci da un database utilizzando il controllo server Web AdRotator.

Vedere anche

Riferimenti

Cenni preliminari sul controllo server Web AdRotator