Demonstra Passo a passo: Exibindo e acompanhamento anúncios com o acompanhamento AdRotator
Sites da Web frequentemente exibem anúncios ou conteúdo dinâmico semelhante que convidam usuários a visitar outro site.ASP.NET provides the AdRotator control, which simplifies this task.The AdRotator control displays a graphic representing an ad, randomly selecting the ad from a list that you create.Em seguida, você pode controlar a frequência com que um anúncio é exibido e com que frequência os usuários clicam nele.
This walkthrough illustrates how to use the AdRotator control to display ads and provides a simple way to track ad responses.Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:
Criar uma lista de anúncios para exibir.
Exibir anúncios em uma página.
Criar uma forma de rastrear o número de vezes em que um anúncio é clicado.
Exibir estatísticas sobre cliques no anúncio.
Pré-requisitos
Para concluir esta explicação passo a passo, será necessário o seguinte:
Ferramenta de desenvolvimento Microsoft Visual Web Developer.
O .NET Framework.
Uma compreensão geral de como trabalhar no Visual Web Developer.Para obter uma introdução, consulte Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer.
Criando o Site Web
Se você já tiver criado um site Web no Visual Web Developer, completando Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer, você pode usar esse site Web e ir para a próxima seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.
Para criar um site do sistema de arquivos
Abra o Visual Web Developer.
No menu File, clique em NewWeb Site.
The Novo site caixa de diálogo é exibida.
Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.
Na caixa Location, clique em File System e digite o nome da pasta onde você deseja manter as páginas do site da Web.
Por exemplo, digite o nome da pasta C:\WebSite.
Na lista Languages, clique na linguagem de programação em que você preferir trabalhar.
A linguagem de programação que você escolher será o padrão do site, mas você pode definir a linguagem de programação para cada página individualmente.
Clique em OK.
O Visual Studio cria a pasta e uma nova página chamada Default.aspx.
Criação de anúncios
Anúncios são elementos gráficos que estejam visíveis na página com uma URL destino; quando os usuários clicarem no elemento gráfico, eles serão redirecionados para o site de destino.Portanto, você precisa de arquivos gráficos para servir como anúncios.
.gif "Observação") Observação: |
|---|
As próximas seções desta explicação passo a passo presumem que você está usando elementos gráficos que são nomeados de acordo com o seguinte procedimento.Se você usar elementos gráficos existentes, certifique-se de substituir os nomes de arquivo apropriados posteriormente na explicação passo a passo. |
Inicie criando uma pasta no site da Web para armazenar os elementos gráficos.
Para criar uma pasta de imagens
No gerenciador de soluções, clicar com o botão direito do mouse no nome do site, clique em Nova pasta e nomeie as pasta imagens.
Se você tiver elementos gráficos existentes para usar como anúncios, copie-os para a nova pasta.Caso contrário, siga o procedimento seguinte para criar algumas imagens.
Se você já tiver alguns elementos gráficos que você pode usar para representar anúncios, você pode usá-los.Caso contrário, o procedimento a seguir sugere uma maneira com a qual você pode criar elementos gráficos que sejam adequado para esta explicação passo a passo.
Para criar gráficos para servir como anúncios
No Microsoft Windows, abra o Paint.
No menu Image, clique em Attributes.
Na caixa de diálogo Attributes, defina Width como 250 e Height como 50, e depois clique OK.
Arraste a ferramenta de texto da Caixa de ferramentas para o elemento gráfico, em seguida, digite um texto que o ajudará a identificar o anúncio.
No <Websitename> Pasta \Images, salvar o elemento gráfico sistema autônomo <Websitename > \Images\Contoso_ad.gif.
Crie uma segunda imagem e, em seguida, salvar-o sistema autônomo <Websitename > \Images\ASPNET_ad.gif.
Feche o Paint.
Criando uma lista de anúncios
As soon as you have graphics for the ads, you must create a list of ads that the AdRotator control can read.A lista é na forma de um arquivo XML.
Para criar um arquivo XML de anúncios
No Solution Explorer, clique com o botão direito em App_Data, e então clique em AddNew Item.
Observação:Quando você coloca o arquivo XML na pasta App_Data, o arquivo tem automaticamente as permissões corretas para permitir ao ASP.NET para ler o arquivo em tempo de execução.Colocar o arquivo XML na pasta App_Data ajuda a proteger o arquivo de ser visualizado em um navegador, pois a pasta App_Data está marcada como não navegável (nonbrowsable).
Em Visual Studio installed templates, clique em XML File.
No Nome caixa, digite Sample.ads.
Observação:Use a extensão.ads.
Clique em Adicionar.
Um novo arquivo XML é criado contendo somente a diretiva XML.
Copie o seguinte XML para o arquivo, substituindo a diretiva 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>Observação:If your graphics files have different file names, change the names in the <ImageUrl> elements accordingly.
This XML file contains <Ad> elements for two advertisements corresponding to the two graphics files that you have created.In a real application, the URLs in the <href> elements would refer to the advertisers' Web sites.
Observação:Elementos adicionais estão disponíveis para definir anúncios.Para informações detalhadas, consulte AdvertisementFile.
Salve o arquivo, e feche-o.
Exibindo anúncios na página
Agora você irá configurar uma página da Web para exibir os anúncios que você tenha criado.No procedimento a seguir, você irá acoplar um AdRotator o controle para um XmlDataSource controle. No entanto, ao usar um arquivo XML estático, um controle de fonte de dados não é necessário, pois o arquivo XML pode ser definido diretamente com o AdvertisementFile propriedade das AdRotator controle.
Para exibir anúncios na página
Se você criou um novo site para esta explicação passo a passo, abra a página Default.aspx.
Se você estiver usando um site que existia antes de iniciar esta explicação passo a passo, adicione uma nova página seguindo estas etapas:
No Solution Explorer, clique com o botão direito do mouse no nome do site (por exemplo, C:\WebSites) e clique Add New Item.
Em Visual Studio installed templates, clique em Web Form.
Na caixa Name, digite TestAds.aspx.
Clique em Adicionar.
Abra TestAds.aspx e alterne para o modo Design.
From the Standard group in the Toolbox, drag an AdRotator control onto the page.
O menu de atalho AdRotator Tasks aparece.
Na lista Choose Data Source, clique New data source.
O assistente Data Source Configuration aparece.
Em Where will the application get data from, clique em XML File.
Na caixa Specify an ID for the data source, deixe o padrão (XmlDataSource1).
Clique em OK.
A caixa de diálogo Configure Data Source aparece.
Na caixa Data file, inserir ~/App_Data/Sample.ads, e clique OK.
Alternativamente, você pode usar Browse para localizar o arquivo:
Na caixa de diálogo Select XML File, na lista Files of type, clique em All Files (*.*).
Em Project Folders, clique em App_Data.
Em Contents of Folder, clique em Sample.ads, clique em OK e clique OK.
From the Standard group in the Toolbox, drag a Button control onto the page.
Observação:O layout exato da página não é importante.
The Button control is on the page only so that you have a convenient way to post back the page to the server.
Agora você testará os anúncios.
Para testar os anúncios
Pressione CTRL+F5 para executar a página.
Um dos dois anúncios aparece na página.
Clique em Button várias vezes para que a página seja carregada novamente.
O anúncio que aparece aleatoriamente varia.
Observação:Devido a só haver dois anúncios, você talvez tenha que clicar Button várias vezes antes de ver um anúncio diferente.
Clique em um anúncio.
Você será redirecionado para a página de destino para esse anúncio.
Feche o navegador.
rastreando respostas a um anúncio
Nesse ponto, sua página apenas exibe anúncios em que os usuários podem clicar para saltar para outra página.Nesta parte da explicação passo a passo, você irá adicionar funcionalidade para controlar quantas vezes os usuários clicam nos anúncios.Você irá alterar a URL dos anúncios no arquivo Sample.ads para enviar a resposta ao anúncio para uma página de redirecionamento, com informações na sequência de caracteres da consulta que identificam o anúncio e o destino final.
Você irá criar um segundo arquivo XML para armazenar informações de contador do anúncio.Em um site de produção você não deveria usar um arquivo XML para reastrear os cliques em um anúncio, pois o arquivo XML não suportaria a quantidade de tráfego.Entretanto, para fins desta explicação passo a passo, você usará um arquivo XML para sua conveniência, para que você não tenha que configurar acesso a banco de dados.Além disso, em um aplicativo de produção, seria conveninet ter um rastreamento de cliques mais sofisticado, como certificando-se de que você está rastreando informações como visitantes únicos, hora e data sobre os cliques, e assim por diante.Entretanto, a estratégia geral de usar uma página de redirecionamento para processar os cliques é a mesma independentemente de como você optar por controlar os dados.
Finalmente, você criará a página de redirecionamento, onde você irá acumular contadores para diferentes anúncios e depois redirecionar novamente para a página de destino que o anúncio tem como destino.
Para redirecionar anúncios para uma página de rastreamento
Abra o arquivo Sample.ads.
Defina href para incluir o seguinte:
O nome da sua página de redirecionamento (AdRedirector.aspx).
Um identificador para cada anúncio.
A página à qual o anúncio aponta.
The following code listing shows the Sample.ads XML file updated with URLs that specify the AdRedirector.aspx page.The ad identifier and target page are specified as a query string.
Observação:Because the ampersand (&) is a reserved character in XML, the query string includes the entity reference & instead.
<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <href>AdRedirector.aspx?ad=Widgets&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&target=https://www.asp.net</href> <AlternateText>Ad for ASP.NET Web site</AlternateText> </Ad> </Advertisements>Salve o arquivo Sample.ads, e feche-lo.
A próxima etapa é criar o arquivo XML local onde você armazena informações sobre o contador para os cliques no anúncio.Em um site de produção, você não precisará desta etapa pois você deve gravar as informações em um banco de dados em vez disso.Usando um arquivo XML nesta explicação passo a passo simplifica as etapas que são exigidas para rastrear a resposta ao anúncio.
Para criar o arquivo XML para controlar a resposta ao anúncio
No Solution Explorer, clique com o botão direito do mouse na pasta App_Data e clique em AddNew Item.
Em Templates, clique em XML File.
Na caixa Name, digite AdResponses.xml e clique Add.
Um novo arquivo XML é criado contendo somente a diretiva XML.
Copie o seguinte XML para o arquivo, substituindo a diretiva XML.
<?xml version="1.0" standalone="yes"?> <adResponses> <ad adname="Widgets" hitCount="0" /> <ad adname="ASPNET" hitCount="0" /> </adResponses>O arquivo contém elementos que têm duas partes de informação, a identificação de um anúncio e um contador.
Observação:Se você atribuiu diferentes identificações aos anúncios no arquivo Sample.ads no procedimento anterior quando você criou as sequências de consulta, certifique-se de que as identificações no arquivo AdResponses.xml correspondem a estas.
Salve o arquivo, e feche-o.
Observação:Se o ASP.NET tem permissão de gravação no arquivo XML depende do servidor Web que você usar.Nesta explicação passo a passo, você usará o ASP.NET Development Server, que está incluído no Visual Web Developer e que possui acesso de gravação no arquivo XML.Se você estivesse usando o Microsoft Internet Information Services (IIS), o processo do servidor Web do IIS não iria ter acesso de gravação no arquivo XML e seria necessário definir explicitamente a permissão de gravação.For more information on Web servers in Visual Web Developer, see Servidores Web no Visual Web Developer.
Agora você criará a página de redirecionamento que captura informações sobre o anúncio que foi clicado, atualiza o contador para o anúncio e, em seguida, envia a solicitação à página que está associada ao anúncio.
Para criar um manipulador Page_Load
No Solution Explorer, clique com o botão direito do mouse no nome do site (por exemplo, C:\WebSites) e clique Add New Item.
Em Visual Studio installed templates, clique em Web Form.
Na caixa Name, digite AdRedirector.aspx e clique Add.
Isso cria a página para a qual todos os anúncios serão direcionados quando usuários clicarem neles.A página não será exibida aos usuários.Portanto, você não colocará nenhum controle nela.
In Design view, double-click the page to create a Page_Load handler.
Copie o código a seguir para o manipulador (não substitua o esqueleto da declaração do manipulador).
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 Subprotected 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); }O código lê a identificação do anúncio e a URL a partir da sequência de consulta.Depois ele usa métodos XML para ler o arquivo AdResponse.XML e criar um objeto XmlDocument.The code locates the appropriate XML element using an XPath expression, extracts the hitCounter value, and then updates the hitCounter value.Em seguida, o código cria uma cópia do elemento XML por clonagem, substitui o elemento antigo com o novo e grava o documento XML atualizado novamente em disco.Finalmente, o código redireciona para a URL do anúncio.
Agora você vai realizar testes para confirmar que os contadores de anúncio para os anúncios estão funcionando.
Para testar o rastreamento de resposta ao anúncio
Open the page that contains the AdRotator control, and then press CTRL+F5.
Clique no anúncio.
Você será redirecionado para a página de destino para esse anúncio.
No navegador, clique em Back para retornar para a página do anúncio.
Clique no anúncio novamente ou clique Button para exibir um anúncio diferentes, e clique no anúncio.
Continue até que você tenha clicado cada anúncio pelo menos uma vez, e um ou mais anúncios mais uma vez.
Feche o navegador.
No Visual Web Developer, abra o arquivo AdResponse.xml e verifique que os contadores para os anúncios refletem o número de cliques do seu teste.
Feche o arquivo AdResponse.xml.
Exibindo dados do contador de anúncio
Para a parte final da explicação passo a passo, você vai criar uma página que exibe as informações do contador de anúncio, que é mais conveniente que examinar manualmente o arquivo XML.
Para criar uma página para exibir os dados de resposta ao anúncio
No Solution Explorer, clique com o botão direito do mouse no nome do site e então clique em AddNew Item.
Em Visual Studio installed templates, clique em Web Form.
No Nome caixa, digite ViewAdData.aspx.
Clique em Adicionar.
Alternar para modo Design.
From the Data group in the Toolbox,, drag an XmlDataSource control onto the page.
No menu de atalho XmlDataSourceTasks, clique em Configure Data Source.
The Configure Data Source <Datasourcename> dialog boxappears.
Na caixa Data file, digite ~/App_Data/AdResponses.xml.
Como alternativa, você pode usar Browse para localizar o arquivo.
Clique em OK.
From the Data group in the Toolbox, drag a GridView control onto the page.
No menu de atalho GridView Tasks, clique em XmlDataSource1 na lista Choose Data Source.
Pressione CTRL+F5 para executar a página.
A página exibe os dados de resposta ao anúncio em uma grade.
Feche o navegador.
Próximas etapas
There are more features available in the AdRotator control than have been illustrated in this walkthrough.Você pode desejar explorar esses recursos das maneiras a seguir:
Usar atributos adicionais quando você criar anúncios no arquivo XML.
For example, you can use the Impressions element to control how often an advertisement is selected relative to the other advertisements in the advertisement file.Quanto maior o valor, maior a probabilidade de o anúncio ser selecionado.Para informações detalhadas, consulte AdvertisementFile.
Use um banco de dados para controlar respostas ao anúncio.
Observação:Em um aplicativo de produção, não use um arquivo XML para controlar as respostas ao anúncio pois ele não tem escalabilidade para oferecer suporte a muitos usuários.Esta explicação passo a passo usa um arquivo XML para a resposta ao anúncio apenas para simplificar a explicação e para fazer com que você não tenha que configurar um banco de dados.
Controlar informações adicionais sobre cliques em anúncios.
Convém certificar-se que você está controlando visitantes únicos, talvez através da gravação de um cookie no navegador, se o usuário clicou no anúncio no último dia, ou pelo controle do endereço IP do navegador quando você armazena informações de clique.Você também pode agregar informações de clique por data e hora, e talvez rastrear informações sobre o anúncio de acordo com outro conteúdo dinâmico na página de origem, o que poderá ajudá-lo a analisar padrões de tráfego.
Bind the AdRotator control to its data using a different data source control.
Por exemplo, você pode armazenar dados de anúncios em um banco de dados.Se fizer isso, você pode adicionar um controle de fonte de dados à página e configurá-lo para usar uma consulta para obter dados do anúncio.You can then bind the AdRotator control to the data source control.Para informações detalhadas, consulte Como: Exibir anúncios de um banco de dados usando o controle de servidor Web AdRotator.