Procédure pas à pas : affichage et traçage des publicités avec le contrôle AdRotator
Mise à jour : novembre 2007
Les sites Web affichent fréquemment des publicités ou du contenu dynamique similaire qui invitent les utilisateurs à visiter un autre site. ASP.NET fournit le contrôle AdRotator qui simplifie cette tâche. Le contrôle AdRotator affiche un graphique représentant une publicité, sélectionnant de façon aléatoire la publicité dans une liste que vous créez. Vous pouvez suivre ensuite la fréquence d'affichage d'une publicité et le nombre de visites par les utilisateurs.
Cette procédure pas à pas illustre comment utiliser le contrôle AdRotator pour afficher des publicités et offre un moyen simple de suivre des réponses à l'annonce publicitaire. Cette procédure pas à pas illustre les tâches suivantes :
Création d'une liste de publicités à afficher.
Affichage des publicités sur une page.
Création d'une façon de suivre le nombre de visites d'une publicité.
Affichage de statistiques sur les visites de publicités.
Composants requis
Pour effectuer cette procédure pas à pas, vous aurez besoin des éléments suivants :
Outil de développement Web Microsoft Visual Web Developer.
.NET Framework
Connaissances générales sur l'utilisation de Visual Web Developer. Pour une introduction, consultez Procédure pas à pas : création d'une page Web de base dans Visual Web Developer.
Création du site Web
Si vous avez déjà créé un site Web dans Visual Web Developer en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer, vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, créez un site et une page Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, cliquez sur Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.
Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.
Cliquez sur OK.
Visual Studio crée le dossier et une page nommée Default.aspx.
Création de publicités
Les publicités sont des graphiques affichés sur la page avec une URL cible ; lorsque les utilisateurs cliquent sur le graphique, ils sont redirigés vers le site cible. Par conséquent, vous avez besoin de fichiers graphiques qui servent de publicités.
.gif "Remarque") Remarque : |
|---|
Les sections suivantes de cette procédure pas à pas supposent que vous utilisez des graphiques nommés d'après la procédure suivante. Si vous utilisez des graphiques existants, assurez-vous de substituer ensuite les noms de fichiers appropriés dans la procédure pas à pas. |
Démarrez en créant un dossier dans le site Web pour stocker des graphiques.
Pour créer un dossier Images
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Nouveau dossier, puis tapez le nom du dossier Images.
Si vous disposez de graphiques existants à utiliser comme publicités, copiez-les dans le nouveau dossier. Sinon, suivez la procédure suivante pour créer des images.
Si vous avez déjà des graphiques que vous pouvez utiliser pour représenter des publicités, vous pouvez les utiliser. Sinon, la procédure suivante suggère une manière de créer des graphiques adaptés à cette procédure pas à pas.
Pour créer des graphiques à utiliser comme publicités
Dans Microsoft Windows, ouvrez Paint.
Dans le menu Image, cliquez sur Attributs.
Dans la boîte de dialogue Attributs, affectez 250 à Largeur et 50 à Hauteur, puis cliquez sur OK.
À partir de la Boîte à outils, faites glisser l'outil de texte sur le graphique, puis tapez du texte qui vous permettra d'identifier la publicité.
Dans le dossier <Websitename>\Images, enregistrez le graphique sous <Websitename> \Images\Contoso_ad.gif.
Créez un second graphique, puis enregistrez-le sous <Websitename> \Images\ASPNET_ad.gif.
Fermez Paint.
Création d'une liste de publicités
Dès que vous disposez de graphiques pour les publicités, vous devez créer une liste des publicités que le contrôle AdRotator peut lire. La liste se trouve dans le formulaire d'un fichier XML.
Pour créer un fichier XML de publicités
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur App_Data, puis cliquez sur AjouterNouvel élément.
Remarque :Lorsque vous placez le fichier XML dans le dossier App_Data, ce fichier dispose automatiquement des autorisations nécessaires pour permettre à ASP.NET de lire et d'écrire dans le fichier au moment de l'exécution. Placer le fichier XML dans le dossier App_Data permet d'empêcher son affichage dans un navigateur, le dossier App_Data étant marqué nonbrowsable.
Sous Modèles Visual Studio installés, cliquez sur Fichier XML.
Dans la zone Nom, tapez Sample.ads.
Remarque :Utilisez l'extension .ads.
Cliquez sur Ajouter.
Un fichier XML est créé et contient uniquement la directive XML.
Copiez le XML suivant dans le fichier, en écrasant la directive 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>Remarque :Si vos fichiers graphiques portent des noms de fichiers différents, modifiez-les en conséquence dans les éléments <ImageUrl>.
Ce fichier XML contient des éléments <Ad> pour les deux publicités correspondant aux deux fichiers graphiques que vous avez créés. Dans une application réelle, les URL des éléments <href> feraient référence aux sites Web des annonceurs.
Remarque :Les éléments supplémentaires sont disponibles pour définir des publicités. Pour plus d'informations, consultez AdvertisementFile.
Enregistrez le fichier et fermez-le.
Affichage de publicités sur la page
Vous configurerez maintenant une page Web pour afficher les publicités que vous avez créées. Dans la procédure suivante, vous lierez un contrôle AdRotator à un contrôle XmlDataSource. Toutefois, lorsque vous utilisez un fichier XML statique, le contrôle de source de données n'est pas nécessaire, car le fichier XML peut être défini directement avec la propriété AdvertisementFile du contrôle AdRotator.
Pour afficher des publicités dans la page
Si vous avez créé un site Web pour cette procédure pas à pas, ouvrez la page Default.aspx.
Si vous utilisez un site Web qui existait avant que vous ayez démarré cette procédure pas à pas, ajoutez une page en suivant ces étapes :
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web (par exemple, C:\SitesWeb), puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez TestAds.aspx.
Cliquez sur Ajouter.
Ouvrez TestAds.aspx et basculez en mode Design.
À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle AdRotator sur la page.
Le menu contextuel Tâches AdRotator apparaît.
Dans la liste Choisissez la source de données, cliquez sur Nouvelle source de données.
L'Assistant Configuration de source de données s'affiche.
Sous À partir d'où l'application obtiendra-t-elle les données ?, cliquez sur Fichier XML.
Dans la zone Spécifiez un ID pour la source de données, laissez la valeur par défaut (XmlDataSource1).
Cliquez sur OK.
La boîte de dialogue Configurer la source de données s'affiche.
Dans la zone Fichier de données, tapez ~/App_Data/Sample.ads, puis cliquez sur OK.
Vous pouvez également utiliser Parcourir pour rechercher le fichier :
Dans la boîte de dialogue Sélectionner un fichier XML, dans la liste Types de fichiers, cliquez sur Tous les fichiers (*.*).
Sous Dossiers du projet, cliquez sur App_Data.
Sous Contenu du dossier, cliquez sur Sample.ads, cliquez sur OK, puis sur OK.
À partir du groupe Standard de la boîte à outils, faites glisser un contrôle Button sur la page.
Remarque :La disposition exacte de la page n'est pas importante.
Le contrôle Button est uniquement sur la page pour faciliter la publication de la page au serveur.
Maintenant vous testez les publicités.
Pour tester les publicités
Appuyez sur CTRL+F5 pour exécuter la page.
L'une des deux publicités apparaît sur la page.
Cliquez sur Button plusieurs fois pour que la page soit publiée.
La publicité qui apparaît varie de manière aléatoire.
Remarque :Étant donné qu'il n'y a que deux publicités, vous devrez probablement cliquer sur Button plusieurs fois avant d'afficher une publicité différente.
Cliquez sur une publicité.
Vous êtes redirigés vers la page cible de cette publicité.
Fermez le navigateur.
Suivi des réponses à une annonce publicitaire
À ce stade, votre page affiche simplement des publicités sur lesquelles les utilisateurs peuvent cliquer pour accéder à une autre page. Dans cette partie de la procédure pas à pas, vous ajouterez les fonctionnalités pour suivre le nombre de clics effectués sur les publicités. Vous modifierez l'URL des publicités dans le fichier Sample.ads pour envoyer la réponse sur une page de redirection, avec les informations dans la chaîne de requête qui identifie la publicité et la destination finale.
Vous créerez ensuite un second fichier XML pour stocker des informations sur le compteur de publicité. Dans un site Web de production, vous ne devez pas utiliser de fichier XML pour suivre des clics sur une publicité, car le fichier XML ne prendrait pas en charge beaucoup d'activité. Toutefois, pour cette procédure pas à pas, vous utiliserez un fichier XML pour des raisons de commodité pour ne pas avoir à configurer l'accès aux bases de données. En outre, dans une application de production, vous souhaiteriez probablement un suivi de clic plus sophistiqué, pour vous assurer que vous suivez des visiteurs uniques, des informations d'heure et de date concernant les clics, et ainsi de suite. Néanmoins, la stratégie totale de l'utilisation d'une page de redirection pour traiter des clics est la même indépendamment de la façon dont vous choisissez de suivre les données.
Enfin, vous créerez la page de redirection dans laquelle vous accumulerez des compteurs pour différentes publicités, puis redirigerez encore vers la page cible que la publicité doit afficher.
Pour rediriger des annonces publicitaires vers une page de suivi
Ouvrez le fichier Sample.ads.
Définissez href pour inclure :
Le nom de votre page de redirection (AdRedirector.aspx).
Un identificateur pour chaque publicité.
La page vers laquelle pointe l'annonce publicitaire.
La liste de code suivante affiche le fichier XML Sample.ads mis à jour avec les URL qui spécifient la page AdRedirector.aspx. L'identificateur de publicité et la page cible sont spécifiés comme une chaîne de requête.
Remarque :Le et commercial (&) étant un caractère réservé en XML, il est remplacé, dans la chaîne de requête, par la référence d'entité & .
<?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>Enregistrez le fichier Sample.ads et fermez-le.
L'étape suivante consiste à créer le fichier XML dans lequel vous stockez des informations sur le compteur pour les clics de publicité. Dans un site Web de production, vous n'auriez pas besoin de cette étape, car vous écririez plutôt des informations dans une base de données. L'utilisation d'un fichier XML dans cette procédure pas à pas simplifie les étapes qui sont requises pour suivre des réponses à une annonce publicitaire.
Pour créer le fichier XML pour suivre la réponse à une annonce publicitaire
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier App_Data, puis cliquez sur AjouterNouvel élément.
Sous Modèles, cliquez sur Fichier XML.
Dans la zone Nom, tapez AdResponses.xml, puis cliquez sur Ajouter.
Un fichier XML est créé et contient uniquement la directive XML.
Copiez le XML suivant dans le fichier, en écrasant la directive XML.
<?xml version="1.0" standalone="yes"?> <adResponses> <ad adname="Widgets" hitCount="0" /> <ad adname="ASPNET" hitCount="0" /> </adResponses>Le fichier contient des éléments qui contiennent deux informations, l'ID d'une publicité et un compteur.
Remarque :Si vous avez assigné des ID différents aux publicités dans le fichier Sample.ads dans la procédure précédente lorsque vous avez créé les chaînes de requête, assurez-vous que les ID dans le fichier AdResponses.xml leur correspondent.
Enregistrez le fichier et fermez-le.
Remarque :L'autorisation Write d'ASP.NET pour le fichier XML dépend du serveur Web que vous utilisez. Dans cette procédure pas à pas, vous utiliserez le serveur de développement ASP.NET, inclus avec Visual Web Developer et qui bénéficie d'un accès en écriture au fichier XML. Si vous utilisez Microsoft Internet Information Services (IIS), le processus de traitement du serveur Web IIS ne bénéficie pas toujours de l'accès en écriture au fichier XML ; vous devez donc définir l'autorisation Write explicitement. Pour plus d'informations sur les serveurs Web dans Visual Web Developer, consultez Serveurs Web dans Visual Web Developer.
Maintenant vous devez créer la page de redirection qui capture des informations sur la publicité sur laquelle un clic a été effectué, met à jour le compteur de la publicité, puis envoie la demande sur la page associée à la publicité.
Pour créer un gestionnaire Page_Load
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web (par exemple, C:\SitesWeb), puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez AdRedirector.aspx, puis cliquez sur Ajouter.
Cela crée la page vers laquelle toutes les publicités seront dirigées lorsque les utilisateurs cliqueront sur elles. La page ne sera pas affichée aux utilisateurs. Par conséquent, vous ne placerez pas de contrôle dessus.
En mode Design, double-cliquez sur la page pour créer un gestionnaire Page_Load.
Copiez le code suivant dans le gestionnaire (ne substituez pas la déclaration de gestionnaire squelette).
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); }Le code lit l'identificateur et l'URL de publicité dans la chaîne de requête. Il utilise ensuite des méthodes XML pour lire le fichier AdResponse.xml dans un objet XmlDocument. Le code recherche l'élément XML approprié à l'aide d'une expression XPath, extrait la valeur hitCounter puis met à jour la valeur hitCounter Ensuite, le code crée une copie de l'élément XML par clonage, remplace l'ancien élément par le nouveau, puis écrit sur le disque le document XML mis à jour. Enfin, le code redirige vers l'URL de la publicité.
Vous devez maintenant effectuer un test pour confirmer que les compteurs de publicité fonctionnent.
Pour tester le suivi de la réponse à une annonce publicitaire
Ouvrez la page qui contient le contrôle AdRotator, puis appuyez sur CTRL+F5.
Cliquez sur la publicité.
Vous êtes redirigé vers la page cible de cette publicité.
Dans le navigateur, cliquez sur Précédent pour retourner à la page de publicité.
Cliquez une nouvelle fois sur la publicité ou cliquez sur Button pour afficher une publicité différente, puis cliquez sur la publicité.
Continuez jusqu'à ce que vous ayez cliqué au moins une fois sur chaque publicité, et plusieurs fois sur une ou plusieurs publicités.
Fermez le navigateur.
Dans Visual Web Developer, ouvrez le fichier AdResponse.xml et vérifiez que les compteurs de publicités reflètent le nombre de clics effectués lors du test.
Fermez le fichier AdResponse.xml.
Affichage des données du compteur de publicité
Dans la dernière partie de la procédure pas à pas, vous créerez une page qui affiche les informations sur le compteur de publicité, ce qui est plus facile que d'examiner le fichier XML manuellement.
Pour créer une page qui affiche les données de la réponse à une annonce publicitaire
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur AjouterNouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
Dans la zone Nom, tapez ViewAdData.aspx.
Cliquez sur Ajouter.
Basculez en mode Design.
À partir du groupe Données de la Boîte à outils, faites glisser un contrôle XmlDataSource sur la page.
Dans le menu contextuel TâchesXmlDataSource, cliquez sur Configurer la source de données.
La boîte de dialogueConfigurer la source de données <NomSourceDonnées> s'affiche.
Dans la zone Fichier de données, tapez ~/App_Data/AdResponses.xml.
Vous pouvez également utiliser Parcourir pour rechercher le fichier.
Cliquez sur OK.
À partir du groupe Données de la Boîte à outils, faites glisser un contrôle GridView sur la page.
Dans le menu contextuel Tâches GridView, dans la liste Choisir la source de données, cliquez sur XmlDataSource1.
Appuyez sur CTRL+F5 pour exécuter la page.
La page affiche les données de la réponse à une annonce publicitaire dans une grille.
Fermez le navigateur.
Étapes suivantes
Le contrôle AdRotator dispose de plus de fonctionnalités qu'il n'est illustré dans cette procédure pas à pas. Vous souhaiterez peut-être explorer ces fonctionnalités de l'une des façons suivantes :
Utilisez des attributs supplémentaires lorsque vous créez des publicités dans le fichier XML.
Par exemple, vous pouvez utiliser l'élément Impressions pour contrôler la fréquence à laquelle une publicité est sélectionnée par rapport aux autres publicités du fichier de publicité. Plus la valeur est élevée, plus la publicité est sélectionnée. Pour plus d'informations, consultez AdvertisementFile.
Utilisez une base de données pour suivre des réponses à une annonce publicitaire.
Remarque :Dans une application de production, n'utilisez pas de fichier XML pour suivre des réponses à une annonce publicitaire, car il ne s'ajustera pas pour prendre en charge plusieurs utilisateurs. Cette procédure pas à pas utilise un fichier XML pour les réponses à une annonce publicitaire uniquement à des fins de simplification de la procédure et pour que vous n'ayez pas à configurer une base de données.
Suivez des informations supplémentaires sur des clics de publicité.
Vous pouvez souhaiter vous assurer que vous suivez des visiteurs uniques, peut-être en écrivant un cookie au navigateur, si l'utilisateur a cliqué sur la publicité au cours du dernier jour, ou en suivant l'adresse IP du navigateur lorsque vous stockez des informations sur les clics. Vous pouvez également regrouper des informations sur les clics selon la date et l'heure, et peut-être suivre des informations sur l'annonce publicitaire selon d'autre contenu dynamique sur la page source, ce qui peut vous aider à analyser des modèles d'activité.
Liez le contrôle AdRotator à ses données à l'aide d'un contrôle de source de données différent.
Par exemple, vous pouvez stocker des données de publicité dans une base de données. Dans ce cas, vous pouvez ajouter un contrôle de source de données à la page et le configurer pour utiliser une requête afin d'obtenir des données de publicité. Vous pouvez ensuite lier le contrôle AdRotator au contrôle de source de données. Pour plus d'informations, consultez Comment : afficher les publicités d'une base de données à l'aide du contrôle serveur Web AdRotator.