逐步解說:使用 AdRotator 控制項顯示和追蹤廣告
更新:2007 年 11 月
網站經常都會顯示邀請使用者造訪其他網站的廣告或類似的動態內容。ASP.NET 提供的 AdRotator 控制項可以簡化這項工作。AdRotator 控制項會顯示代表廣告的圖形,並從您建立的清單中隨機選取廣告。這樣您就可以追蹤廣告的檢視頻率以及使用者點選廣告的頻率。
此逐步解說會說明如何使用 AdRotator 控制項顯示廣告並提供追蹤廣告回應的簡單方法。本逐步解說將說明的工作包括下列項目:
建立要顯示之廣告的清單。
在網頁上顯示廣告。
建立追蹤廣告點選次數的方法。
顯示有關廣告點選的統計資料。
必要條件
若要完成這個逐步解說,您必須要有:
Microsoft Visual Web Developer Web 開發工具。
.NET Framework。
了解在 Visual Web Developer 中工作的一般概念。如需簡介,請參閱逐步解說:在 Visual Web Developer 中建立基本 Web 網頁。
建立網站
如果您已經藉由完成逐步解說:在 Visual Web Developer 中建立基本 Web 網頁中的步驟而在 Visual Web Developer 中建立了網站,則可以使用該網站,並繼續進行下一節的步驟。如果還沒完成,請依照下列這些步驟建立新的網站和網頁。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上,按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 中,按一下 [ASP.NET 網站]。
在 [位置] 方塊中,按一下 [檔案系統],然後輸入您要用來保存網站頁面的資料夾名稱。
例如,輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中,按一下您想要使用的程式語言。
您選擇的程式語言將成為網站的預設值,不過您可以為每個網頁分別設定程式語言。
按一下 [確定]。
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],然後按一下 [加入新項目]。
注意事項: 當您將 XML 檔案放入 App_Data 資料夾時,該檔案會自動具有正確的使用權限,允許 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。
儲存檔案,然後關閉檔案。
在網頁上顯示廣告
您現在將可以設定 Web 網頁以顯示您已經建立的廣告。在下列程序中,您會將 AdRotator 控制項繫結到 XmlDataSource 控制項。不過,因為可以使用 AdRotator 控制項的 AdvertisementFile 屬性 (Property) 直接設定 XML 檔案,所以使用靜態的 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 中是保留字元,因此查詢字串改為包含實體 (Entity) 參考 & 。
<?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,請確定這些 ID 與 AdResponses.xml 檔案中的 ID 相符。
儲存檔案,然後關閉檔案。
注意事項: ASP.NET 是否具有 XML 檔案的「寫入」使用權限,取決於您所使用的 Web 伺服器。在這個逐步解說中,您將使用 Visual Web Developer 內含的 ASP.NET 程式開發伺服器,而且具有 XML 檔案的寫入存取權限。如果您所使用的是 Microsoft Internet Information Services (IIS),則 IIS Web 伺服器背景工作處理序 (Process) 可能不會具有 XML 檔案的寫入存取權限,因此您必須明確地設定「寫入」使用權限。如需 Visual Web Developer 中 Web 伺服器的詳細資訊,請參閱 Visual Web Developer 中的 Web 伺服器。
您現在將建立重新導向網頁,該網頁會擷取有關被點選之廣告的資訊、更新廣告的計數器,然後將要求傳送至與該廣告關聯的網頁。
若要建立 Page_Load 處理常式
在 [方案總管] 中,以滑鼠右鍵按一下網站名稱 (例如 C:\WebSites),然後按一下 [加入新項目]。
在 [Visual Studio 安裝的範本] 中,按一下 [Web Form]。
在 [名稱] 方塊中,輸入 ctlAlarmClock.cs,然後按一下 [加入]。
如此一來所建立的網頁,就是當使用者點選廣告時、這些廣告全部會被導向到的目的網頁,但是使用者不會看到該網頁,所以,您不需在其上放置任何控制項。
在 [設計] 檢視中,按兩下該頁面建立 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。
按一下廣告。
您會被重新導向至該廣告的目標網頁。
在瀏覽器中,按一下 [上一頁] 回到廣告網頁。
再次按一下廣告或按一下 [按鈕] 顯示另一個廣告,然後按一下該廣告。
繼續操作,直到您至少點選了每個廣告一次,並多次點選了其中一個或多個廣告。
關閉瀏覽器。
在 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 檔案中建立廣告時,使用其他屬性 (Attribute)。
例如,您可以使用 Impressions 項目,控制一個廣告相對於廣告檔案中其他廣告的選取頻率。值愈高,廣告被選取的次數就愈多。如需詳細資訊,請參閱 AdvertisementFile。
使用資料庫追蹤廣告回應。
注意事項: 在實際執行的應用程式中,不要使用 XML 檔案追蹤廣告回應,因為它不會縮放,無法支援大量使用者。此逐步解說對廣告回應使用 XML 檔案,只是為簡化逐步解說,因為這樣您便不需要設定資料庫。
追蹤廣告點選的其他相關資訊。
您可能想要確定正在追蹤特定的造訪者,可能是透過將 Cookie 寫入至瀏覽器 (如果使用者在最後一天內點選了廣告),或是在儲存點選資訊時追蹤瀏覽器的 IP 位址。您也可以依日期和時間彙總點選資訊,依據來源網頁上的其他動態內容追蹤廣告資訊,這樣有助於分析流量模式。
使用不同的資料來源控制項,將 AdRotator 控制項繫結至其資料。
例如,您可以在資料庫中儲存廣告資料。如果這樣做,您可以將資料來源控制項加入至網頁,並設定它使用查詢來取得廣告資料。然後可以將 AdRotator 控制項繫結至資料來源控制項。如需詳細資訊,請參閱 HOW TO:使用 AdRotator Web 伺服器控制項顯示來自資料庫的廣告。