연습: AdRotator 컨트롤을 사용하여 광고 표시 및 추적
업데이트: 2007년 11월
웹 사이트에는 다른 사이트를 방문하도록 초대하는 광고나 이와 비슷한 동적 콘텐츠가 표시되는 경우가 많습니다. ASP.NET에서는 이러한 작업을 간단하게 수행할 수 있는 AdRotator 컨트롤을 제공합니다. AdRotator 컨트롤은 사용자가 만든 목록에서 광고를 임의로 선택하여 광고를 나타내는 그래픽을 표시합니다. 그런 다음 광고를 보는 빈도와 클릭하는 빈도를 추적할 수 있습니다.
이 연습에서는 AdRotator 컨트롤을 사용하여 광고를 표시하는 방법을 보여 주고 광고 응답을 추적하는 간단한 방법을 설명합니다. 이 연습에서 수행할 작업은 다음과 같습니다.
표시할 광고 목록 만들기
페이지에서 광고 표시
광고를 클릭하는 횟수를 추적하는 방법 만들기
광고 클릭에 대한 통계 표시
사전 요구 사항
이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.
Microsoft Visual Web Developer 웹 개발 도구
.NET Framework
Visual Web Developer의 작업 방식 이해. 기본 사항은 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 참조하십시오.
웹 사이트 만들기
연습: Visual Web Developer에서 기본 웹 페이지 만들기를 완료하여 Visual Web Developer에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어, 폴더 이름 C:\WebSite를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.
확인을 클릭합니다.
Visual Studio에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.
광고 만들기
광고는 대상 URL과 함께 페이지에 표시되는 그래픽이며, 사용자가 이 그래픽을 클릭하면 대상 사이트로 리디렉션됩니다. 따라서 광고로 사용할 그래픽 파일이 필요합니다.
![]() |
---|
이 연습의 이후 단원에서는 다음 절차에 따라 이름을 지정한 그래픽을 사용하는 것으로 가정합니다. 기존 그래픽을 사용하는 경우에는 이 연습 과정에서 나중에 적절한 파일 이름으로 대체해야 합니다. |
우선 웹 사이트에서 그래픽을 저장할 폴더를 만듭니다.
이미지 폴더를 만들려면
솔루션 탐색기에서 웹 사이트 이름을 마우스 오른쪽 단추로 클릭하고 새 폴더를 클릭한 다음 폴더 이름을 Images로 지정합니다.
기존 그래픽을 광고로 사용하려는 경우 이 그래픽을 새 폴더로 복사합니다. 그렇지 않으면 다음 절차에 따라 이미지를 만듭니다.
광고를 나타내는 데 사용할 수 있는 그래픽이 이미 있는 경우 이 그래픽을 사용하면 됩니다. 그렇지 않으면 다음 절차에 따라 이 연습에 적합한 그래픽을 만들 수 있습니다.
광고로 사용할 그래픽을 만들려면
Microsoft Windows에서 그림판을 엽니다.
이미지 메뉴에서 특성을 클릭합니다.
특성 대화 상자에서 너비를 250, 높이를 50으로 설정한 다음 확인을 클릭합니다.
도구 상자에서 텍스트 도구를 그래픽으로 끌어 온 다음 광고를 식별하는 데 도움이 되는 텍스트를 입력합니다.
<Websitename>\Images 폴더에 그래픽을 <Websitename>\Images\Contoso_ad.gif로 저장합니다.
두 번째 그래픽을 만든 다음 <Websitename>\Images\ASPNET_ad.gif로 저장합니다.
그림판을 닫습니다.
광고 목록 만들기
광고에 사용할 그래픽을 다 만들었으면 AdRotator 컨트롤에서 읽을 수 있는 광고 목록을 만들어야 합니다. 목록은 XML 파일 형식입니다.
광고의 XML 파일을 만들려면
솔루션 탐색기에서 App_Data를 마우스 오른쪽 단추로 클릭한 다음 새 항목추가를 클릭합니다.
참고:
App_Data 폴더에 추가된 XML 파일에는 ASP.NET에서 런타임에 파일을 읽을 수 있도록 허용하는 올바른 사용 권한이 자동으로 지정됩니다. App_Data 폴더에 XML 파일을 보관하면 App_Data 폴더가 검색 불가능 상태로 표시되므로 브라우저에서 해당 파일을 볼 수 없습니다.
Visual Studio에 설치되어 있는 템플릿에서 XML 파일을 클릭합니다.
이름 상자에 Sample.ads를 입력합니다.
참고:
.ads 확장명을 사용합니다.
추가를 클릭합니다.
XML 지시문만 포함된 새 XML 파일이 만들어집니다.
다음 XML을 파일에 복사하여 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>
참고:
그래픽 파일의 이름이 다른 경우에는 <ImageUrl> 요소에서 이름을 적절하게 변경합니다.
이 XML 파일에는 만든 두 개의 그래픽 파일에 해당하는 두 광고의 <Ad> 요소가 포함됩니다. 실제 응용 프로그램에서는 <href> 요소의 URL이 광고주의 웹 사이트를 참조합니다.
참고:
광고를 정의하기 위해 추가 요소를 사용할 수 있습니다. 자세한 내용은 AdvertisementFile을 참조하십시오.
파일을 저장한 다음 닫습니다.
페이지에서 광고 표시
이제 웹 페이지를 구성하여 만든 광고를 표시합니다. 다음 절차에서는 AdRotator 컨트롤을 XmlDataSource 컨트롤에 바인딩합니다. 그러나 정적 XML 파일을 사용하는 경우 AdRotator 컨트롤의 AdvertisementFile 속성을 사용하여 XML 파일을 직접 설정할 수 있으므로 데이터 소스 컨트롤이 필요하지 않습니다.
페이지에서 광고를 표시하려면
이 연습에 사용할 새 웹 사이트를 만든 경우에는 Default.aspx 페이지를 엽니다.
이 연습을 시작하기 전부터 있던 웹 사이트를 사용하려면 다음 단계를 따라 새 페이지를 추가합니다.
솔루션 탐색기에서 C:\WebSites와 같은 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 TestAds.aspx를 입력합니다.
추가를 클릭합니다.
TestAds.aspx를 열고 디자인 뷰로 전환합니다.
도구 상자의 표준 그룹에서 AdRotator 컨트롤을 페이지로 끌어 옵니다.
AdRotator 작업 바로 가기 메뉴가 나타납니다.
데이터 소스 선택 목록에서 새 데이터 소스를 클릭합니다.
데이터 소스 구성 마법사가 나타납니다.
응용 프로그램이 데이터를 가져오는 위치에서 XML 파일을 클릭합니다.
데이터 소스의 ID 지정 상자에서 기본값인 **(XmlDataSource1)**을 그대로 둡니다.
확인을 클릭합니다.
데이터 소스 구성 대화 상자가 나타납니다.
데이터 파일 상자에서 ~/App_Data/Sample.ads를 입력한 다음 확인을 클릭합니다.
또는 다음과 같이 찾아보기를 사용하여 파일을 찾을 수도 있습니다.
XML 파일 선택 대화 상자의 파일 형식 목록에서 **모든 파일(*.*)**을 클릭합니다.
프로젝트 폴더에서 App_Data를 클릭합니다.
폴더 내용에서 Sample.ads를 클릭하고 확인을 클릭한 다음 확인을 클릭합니다.
도구 상자의 표준 그룹에서 Button 컨트롤을 페이지로 끌어 옵니다.
참고:
페이지의 정확한 레이아웃은 중요하지 않습니다.
Button 컨트롤을 페이지에 포함하는 것은 페이지를 서버에 포스트백을 수행하는 간편한 방법을 제공하기 위해서입니다.
이제 광고를 테스트합니다.
광고를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
두 광고 중 하나가 페이지에 나타납니다.
페이지의 포스트백이 수행되도록 Button을 여러 번 클릭합니다.
표시되는 광고가 임의로 달라집니다.
참고:
두 가지 광고만 있기 때문에 Button을 여러 번 클릭해야 다른 광고를 볼 수 있습니다.
광고를 클릭합니다.
해당 광고의 대상 페이지로 리디렉션됩니다.
브라우저를 닫습니다.
광고 응답 추적
이제 페이지에는 사용자가 클릭하여 다른 페이지로 이동할 수 있는 광고가 표시됩니다. 이 연습 부분에서는 사용자가 광고를 클릭하는 횟수를 추적하는 기능을 추가합니다. 여기에서는 Sample.ads 파일에서 광고의 URL을 변경하여 광고 응답과 함께 광고와 최종 대상을 식별하는 쿼리 문자열의 정보를 리디렉션 페이지로 보냅니다.
그런 다음 광고 카운터 정보를 저장할 두 번째 XML 파일을 만듭니다. XML 파일에서 대량 트래픽을 지원하지 않기 때문에 프로덕션 웹 사이트에서는 광고 클릭을 추적하는 데 XML 파일을 사용하면 안 됩니다. 하지만 이 연습에서는 편의를 위해 데이터베이스 액세스를 구성할 필요가 없도록 XML 파일을 사용합니다. 또한 프로덕션 웹 사이트에서는 특정 방문자만 추적하거나 클릭에 대한 시간 및 날짜 정보를 추적해야 하는 등 보다 복잡한 클릭 추적이 필요할 수 있습니다. 그러나 선택하는 데이터 추적 방법에 관계 없이 리디렉션 페이지를 사용하여 클릭을 처리하는 전반적인 전략은 동일합니다.
마지막으로 리디렉션 페이지를 만들고, 이 페이지에서 다른 광고의 카운터를 집계한 후, 광고가 표시될 대상 페이지로 다시 리디렉션합니다.
추적 페이지로 광고를 리디렉션하려면
Sample.ads 파일을 엽니다.
다음이 포함되도록 href을 설정합니다.
리디렉션 페이지의 이름(AdRedirector.aspx)
각 광고의 식별자
광고가 최종적으로 가리키는 페이지
다음 코드 목록에서는 AdRedirector.aspx 페이지를 지정하는 URL로 업데이트된 Sample.ads XML 파일을 보여 줍니다. 광고 식별자와 대상 페이지는 쿼리 문자열로 지정됩니다.
참고:
앰퍼샌드(&)는 XML의 예약 문자이기 때문에 쿼리 문자열에는 그 대신 엔터티 참조인 &가 포함되어 있습니다.
<?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>
Sample.ads 파일을 저장한 다음 닫습니다.
다음 단계에서는 광고 클릭에 대한 카운터 정보를 저장하는 XML 파일을 만듭니다. 프로덕션 웹 사이트에서는 정보를 데이터베이스에 쓰기 때문에 이 단계가 필요 없습니다. 이 연습에서는 XML 파일을 사용하여 광고 응답 추적에 필요한 단계를 단순화합니다.
광고 응답 추적에 사용할 XML 파일을 만들려면
솔루션 탐색기에서 App_Data 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 항목추가를 클릭합니다.
템플릿에서 XML 파일을 클릭합니다.
이름 상자에 AdResponses.xml을 입력한 다음 추가를 클릭합니다.
XML 지시문만 포함된 새 XML 파일이 만들어집니다.
다음 XML을 파일에 복사하여 XML 지시문을 덮어씁니다.
<?xml version="1.0" standalone="yes"?> <adResponses> <ad adname="Widgets" hitCount="0" /> <ad adname="ASPNET" hitCount="0" /> </adResponses>
파일에는 광고 ID와 카운터라는 두 가지 정보가 있는 요소가 포함됩니다.
참고:
앞의 절차에서 쿼리 문자열을 만들 때 Sample.ads 파일의 광고에 다른 ID를 지정한 경우 AdResponses.xml 파일의 ID가 이 ID와 일치하는지 확인합니다.
파일을 저장한 다음 닫습니다.
참고:
ASP.NET에서 XML 파일에 쓸 수 있는지 여부는 사용하는 웹 서버에 따라 결정됩니다. 이 연습에서는 Visual Web Developer에 포함되어 있고 XML 파일에 대한 쓰기 권한이 있는 ASP.NET Development Server를 사용합니다. Microsoft IIS(인터넷 정보 서비스)를 사용하는 경우 IIS 웹 서버 작업자 프로세스에 XML 파일에 대한 쓰기 권한이 없으므로 명시적으로 쓰기 권한을 설정해야 합니다. Visual Web Developer의 웹 서버에 대한 자세한 내용은 Visual Web Developer의 웹 서버를 참조하십시오.
이제 클릭한 광고에 관한 정보를 캡처하고 광고 카운터를 업데이트한 다음 요청을 광고와 연결된 페이지로 보내는 리디렉션 페이지를 만듭니다.
Page_Load 처리기를 만들려면
솔루션 탐색기에서 C:\WebSites와 같은 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 AdRedirector.aspx를 입력한 다음 추가를 클릭합니다.
이렇게 하면 사용자가 광고를 클릭할 때 모든 광고가 리디렉션되는 페이지가 만들어집니다. 이 페이지는 사용자에게 표시되지 않습니다. 따라서 이 페이지에는 컨트롤을 두지 않습니다.
디자인 뷰에서 페이지를 두 번 클릭하여 Page_Load 처리기를 만듭니다.
처리기에 다음 코드를 복사합니다. 기본 처리기 선언은 덮어쓰지 마십시오
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); }
이 코드는 쿼리 문자열에서 광고 ID와 URL을 읽어 옵니다. 그런 다음 XML 메서드를 사용하여 AdResponse.xml 파일을 XmlDocument 개체로 읽어 옵니다. 코드에서는 XPath 식을 사용하여 적절한 XML 요소를 찾고, hitCounter 값을 추출한 다음, hitCounter 값을 업데이트합니다. 그리고 복제를 통해 XML 요소의 복사본을 만들고, 이전 요소를 새 요소로 교체한 다음, 업데이트된 XML 문서를 다시 디스크에 기록합니다. 마지막으로 광고의 URL로 리디렉션합니다.
이제 광고의 광고 카운터가 제대로 작동하는지 테스트합니다.
광고 응답 추적을 테스트하려면
AdRotator 컨트롤이 있는 페이지를 열고 Ctrl+F5를 누릅니다.
광고를 클릭합니다.
해당 광고의 대상 페이지로 리디렉션됩니다.
브라우저에서 뒤로를 클릭하여 광고 페이지로 돌아갑니다.
광고를 다시 클릭하거나 Button을 클릭하여 다른 광고를 표시한 후 이 광고를 클릭합니다.
각 광고를 적어도 한 번씩 클릭하고, 하나 이상의 광고를 두 번 이상 클릭할 때까지 계속합니다.
브라우저를 닫습니다.
Visual Web Developer에서 AdResponse.xml 파일을 열고 광고 카운터에 테스트에서 클릭한 횟수가 반영되어 있는지 확인합니다.
AdResponse.xml 파일을 닫습니다.
광고 카운터 데이터 표시
연습의 마지막 부분에서는 광고 카운터 정보를 표시하는 페이지를 만듭니다. 그러면 XML 파일을 수동으로 확인하는 것보다 편리합니다.
광고 응답 데이터를 표시할 페이지를 만들려면
솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.
이름 상자에 ViewAdData.aspx를 입력합니다.
추가를 클릭합니다.
디자인 뷰로 전환합니다.
도구 상자의 데이터 그룹에서 XmlDataSource 컨트롤을 페이지로 끌어 옵니다.
XmlDataSource작업 바로 가기 메뉴에서 데이터 소스 구성을 클릭합니다.
데이터 소스 구성 <Datasourcename> 대화 상자가 나타납니다.
데이터 파일 상자에서 ~/App_Data/AdResponses.xml을 입력합니다.
또는 찾아보기를 클릭하여 파일을 찾을 수도 있습니다.
확인을 클릭합니다.
도구 상자의 데이터 그룹에서 GridView 컨트롤을 페이지로 끌어 옵니다.
GridView 작업 바로 가기 메뉴의 데이터 소스 선택 목록에서 XmlDataSource1을 클릭합니다.
Ctrl+F5를 눌러 페이지를 실행합니다.
페이지에서 광고 응답 데이터가 표에 표시됩니다.
브라우저를 닫습니다.
다음 단계
AdRotator 컨트롤에는 이 연습에서 설명한 것 외에도 사용할 수 있는 많은 기능이 있습니다. 다음과 같이 이러한 기능을 탐색할 수 있습니다.
XML 파일에서 광고를 만들 때 추가 특성을 사용합니다.
예를 들어, Impressions 요소를 사용하여 광고 파일에서 다른 광고와 비교해 한 광고가 선택되는 상대적인 빈도를 제어할 수 있습니다. 값이 높을수록 광고가 선택될 확률도 높아집니다. 자세한 내용은 AdvertisementFile을 참조하십시오.
데이터베이스를 사용하여 광고 응답을 추적합니다.
참고:
XML 파일은 많은 사용자를 지원하도록 확장 가능하지 않기 때문에 프로덕션 응용 프로그램에서는 XML 파일을 사용하지 않아야 합니다. 이 연습에서 광고 응답에 XML 파일을 사용하는 것은 연습을 간단하게 하고 데이터베이스를 구성할 필요가 없도록 하기 위해서입니다.
광고 클릭에 관한 추가 정보를 추적합니다.
사용자가 어제 광고를 클릭한 경우 브라우저에 쿠키를 작성하거나 클릭 정보를 저장할 때 브라우저 IP 주소를 추적하여 특정 방문자를 추적해야 할 수 있습니다. 또한 클릭 정보를 날짜와 시간별로 집계하거나 소스 페이지에 있는 다른 동적 콘텐츠에 따라 광고 정보를 추적하여 트래픽 패턴을 분석하는 데 활용할 수 있습니다.
다른 데이터 소스 컨트롤을 사용하여 AdRotator 컨트롤을 해당 데이터에 바인딩합니다.
예를 들어, 광고 데이터를 데이터베이스에 저장할 수 있습니다. 이렇게 하면 페이지에 데이터 소스 컨트롤을 추가하고 쿼리를 사용하여 광고 데이터를 가져오도록 이 컨트롤을 구성할 수 있습니다. 그런 다음 AdRotator 컨트롤을 데이터 소스 컨트롤에 바인딩할 수 있습니다. 자세한 내용은 방법: AdRotator 웹 서버 컨트롤을 사용하여 데이터베이스에서 광고 표시를 참조하십시오.