チュートリアル : AdRotator コントロールを使用した広告の表示と追跡

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

Web サイトでは、ユーザーを他のサイトへ移動するように促す広告などの動的なコンテンツを頻繁に表示します。ASP.NET では、AdRotator コントロールを使用してこのタスクを簡便化します。AdRotator コントロールは、Web ページの開発者が作成したリストから広告をランダムに選択して、その広告を表すグラフィックを表示します。また、開発者は、特定の広告が表示された回数およびエンドユーザーがその広告をクリックした回数を追跡できます。

このチュートリアルでは、AdRotator コントロールを使用して広告を表示する方法、および広告に対する応答を簡単に追跡する方法を説明します。このチュートリアルでは、以下のタスクを行います。

表示する広告のリストの作成
ページでの広告の表示
広告クリック回数の追跡方法の作成
広告クリックに関する統計の表示

前提条件

このチュートリアルを実行するための要件は次のとおりです。

Microsoft Visual Web Developer Web 開発ツール。
.NET Framework。
Visual Web Developer の操作に関する全般的な知識。概要については、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を参照してください。

Web サイトの作成

「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を完了して Visual Web Developer で既に Web サイトを作成してある場合はその Web サイトを使用できるので、次のセクションに進んでください。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイルシステム Web サイトを作成するには

Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。

[新しい Web サイト] ダイアログボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイルシステム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。

たとえば、フォルダ名として「C:\WebSite」と入力します。
[Languages] ボックスで、作業に使用するプログラミング言語をクリックします。

選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
[OK] をクリックします。

Visual Studio によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

広告の作成

広告は、ターゲット URL と共に表示されるグラフィックです。ユーザーがグラフィックをクリックすると、ターゲットサイトにリダイレクトされます。そのため、広告として使用するグラフィックファイルを用意する必要があります。

メモ :
このチュートリアルで後述するセクションでは、次の手順どおりに名前を付けたグラフィックを使用することを前提とします。既存のグラフィックを使用する場合は、このチュートリアルで後述するとおり、必ず適切なファイル名に変更してください。

まず、Web サイトでグラフィックを格納するためのフォルダを作成します。

イメージフォルダを作成するには

ソリューションエクスフローラで Web サイトの名前を右クリックし、[新しいフォルダ] をクリックして、そのフォルダに Images という名前を付けます。
広告に使用するグラフィックが既に存在する場合は、この新しいフォルダにそのグラフィックをコピーします。それ以外の場合は、次の手順を実行してイメージを作成します。

広告に使用できるグラフィックが既に存在する場合は、それらのグラフィックを使用できます。それ以外の場合は、次の手順を実行してこのチュートリアルに適したグラフィックを作成できます。

広告として使用するグラフィックを作成するには

Microsoft Windows の [ペイント] を開きます。
[変形] メニューの [キャンバスの色とサイズ] をクリックします。
[キャンバスの色とサイズ] ダイアログボックスで、[幅] を 250 に、[高さ] を 50 に設定し、[OK] をクリックします。
ツールボックスから、テキストツールをグラフィックにドラッグし、広告を識別できるようにテキストを入力します。
<Websitename>\Images フォルダで、グラフィックを <Websitename>\Images\Contoso_ad.gif として保存します。
2 つ目のグラフィックを作成し、<Websitename>\Images\ASPNET_ad.gif として保存します。
[ペイント] を閉じます。

広告リストの作成

広告用のグラフィックを用意したら、AdRotator コントロールで読み取ることができる広告リストを作成する必要があります。このリストは、XML ファイル形式で作成します。

広告用 XML ファイルを作成するには

ソリューションエクスプローラで、App_Data を右クリックし、[新しい項目の追加] をクリックします。

メモ :
App_Data フォルダにこの XML ファイルを格納すると、実行時に ASP.NET でこのファイルを読み取るための正しいアクセス許可がこのファイルに自動的に設定されます。App_Data フォルダは nonbrowsable としてマークされるため、App_Data フォルダに XML ファイルを格納すると、そのファイルはブラウザに表示されなくなります。

App_Data フォルダにこの XML ファイルを格納すると、実行時に ASP.NET でこのファイルを読み取るための正しいアクセス許可がこのファイルに自動的に設定されます。App_Data フォルダは nonbrowsable としてマークされるため、App_Data フォルダに XML ファイルを格納すると、そのファイルはブラウザに表示されなくなります。

[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 ファイルには、作成済みの 2 つのグラフィックファイルに対応する 2 つの広告の <Ad> 要素が格納されます。実際のアプリケーションでは、通常、<href> 要素内の URL は広告主の Web サイトを表します。

メモ :

広告の定義には、他の要素も使用できます。詳細については、「AdvertisementFile」を参照してください。
ファイルを保存して閉じます。

メモ :
.ads 拡張子を使用します。

メモ :
使用するグラフィックファイルに別の名前が付けられている場合は、<ImageUrl> 要素内の名前も変更します。

メモ :
広告の定義には、他の要素も使用できます。詳細については、「AdvertisementFile」を参照してください。

ページでの広告の表示

作成した広告を表示するように Web ページを設定します。次の処理では、AdRotator コントロールを XmlDataSource コントロールにバインドします。ただし、静的な XML ファイルを使用するときは、AdRotator コントロールの AdvertisementFile プロパティを使用して XML ファイルを直接設定できるため、データソースコントロールは必要ありません。

ページに広告を表示するには

このチュートリアル用に新しい Web サイトを作成した場合は、Default.aspx ページを開きます。
このチュートリアルを開始する前から存在する Web サイトを使用する場合は、次の手順で新しいページを追加します。
1. ソリューションエクスプローラで、Web サイトの名前 (例 C:\WebSites) を右クリックし、[新しい項目の追加] をクリックします。
2. [Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
3. [名前] ボックスに「TestAds.aspx」と入力します。
4. [追加] をクリックします。
TestAds.aspx を開き、[デザイン] ビューに切り替えます。
ツールボックスの [標準] グループから、AdRotator コントロールをページにドラッグします。

[AdRotator タスク] ショートカットメニューが表示されます。
[データソースの選択] リストで、[新しいデータソース] をクリックします。

データソース構成ウィザードが開きます。
[アプリケーションがデータを取得する場所] の [XML ファイル] をクリックします。
[データソースに ID を指定します] ボックスは、既定の (XmlDataSource1) のままにします。
[OK] をクリックします。

[データソースの構成] ダイアログボックスが表示されます。
[データファイル] ボックスに「~/App_Data/Sample.ads」と入力し、[OK] をクリックします。

[参照] をクリックして、ファイルを探すこともできます。
1. [XML ファイルの選択] ダイアログボックスの [ファイルの種類] ボックスの [すべてのファイル (*.*)] をクリックします。
2. [プロジェクトフォルダ] の [App_Data] をクリックします。
3. [フォルダの内容] の [Sample.ads] をクリックして [OK] をクリックします。そして [OK] をクリックします。
ツールボックスの [標準] グループから、Button コントロールをページにドラッグします。

メモ :

ページの正確なレイアウトは重要ではありません。

ページの Button コントロールは、ページをサーバーに簡単にポストバックするためだけに存在します。

メモ :
ページの正確なレイアウトは重要ではありません。

広告をテストします。

広告をテストするには

Ctrl キーを押しながら F5 キーを押してページを実行します。

2 つの広告の一方がページに表示されます。
[Button] を数回クリックすると、ページがポストバックされます。

ランダムに表示される広告は、異なります。

メモ :

ここでは、広告が 2 つしかないので、別の広告が表示されるまでに [Button] を数回クリックする必要があることがあります。
広告をクリックします。

その広告のターゲットページにリダイレクトされます。
ブラウザを閉じます。

メモ :
ここでは、広告が 2 つしかないので、別の広告が表示されるまでに [Button] を数回クリックする必要があることがあります。

広告に対する応答の追跡

この段階では、ユーザーがクリックして別のページに移動できる広告がページに表示されるだけです。チュートリアルのこのセクションでは、ユーザーがこの広告をクリックした回数を追跡する機能を追加します。Sample.ads ファイル内の広告の URL を変更し、広告への応答および広告と最終的なリンク先を識別するクエリ文字列内の情報をリダイレクトページに送信します。

次に、2 つ目の XML ファイルを作成して広告カウンタ情報を格納します。XML ファイルでは大量のトラフィックがサポートされないため、実行用の Web サイトでは広告のクリックの追跡に 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&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>
```
Sample.ads ファイルを保存して閉じます。

メモ :
アンパサンド (&) は XML の予約語のため、クエリ文字列にはエンティティ参照の & が代わりに使用されています。

次の手順では、広告のクリック回数情報を格納する XML ファイルを作成します。実行用の Web サイトでは、代わりにデータベースに情報を書き込むので、この手順は不要です。このチュートリアルでは、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>

このファイルには、2 つの情報 (広告の ID とカウンタ) で構成される要素が格納されます。

メモ :
前の手順でクエリ文字列の作成時に Sample.ads ファイル内の広告にさまざまな ID を割り当てた場合、AdResponses.xml ファイル内の ID がこれらの ID と一致することを確認してください。

ファイルを保存して閉じます。

メモ :
ASP.NET に XML ファイルに対する書き込みアクセス許可があるかどうかは、使用している Web サーバーによって決まります。このチュートリアルでは、ASP.NET 開発サーバーを使用します。このサーバーは、Visual Web Developer に含まれ、XML ファイルに対する書き込みアクセス権があります。Microsoft Internet Information Services (IIS) を使用している場合は、IIS Web サーバーのワーカープロセスには、XML ファイルの書き込みアクセス権はなく、書き込みアクセス許可を明示的に設定する必要があります。Visual Web Developer の Web サーバーの詳細については、「Visual Web Developer における Web サーバー」を参照してください。

ASP.NET に XML ファイルに対する書き込みアクセス許可があるかどうかは、使用している Web サーバーによって決まります。このチュートリアルでは、ASP.NET 開発サーバーを使用します。このサーバーは、Visual Web Developer に含まれ、XML ファイルに対する書き込みアクセス権があります。Microsoft Internet Information Services (IIS) を使用している場合は、IIS Web サーバーのワーカープロセスには、XML ファイルの書き込みアクセス権はなく、書き込みアクセス許可を明示的に設定する必要があります。Visual Web Developer の Web サーバーの詳細については、「Visual Web Developer における Web サーバー」を参照してください。

リダイレクトページを作成します。このページでは、クリックされた広告の情報を取得し、その広告のカウンタを更新して、その広告に関連付けられたページに要求を送信します。

Page_Load ハンドラを作成するには

ソリューションエクスプローラで、Web サイトの名前 (例 C:\WebSites) を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「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] をクリックして別の広告を表示して、さらに広告をクリックします。
各広告を 1 回以上クリックするまでこの操作を繰り返します。広告によっては複数回クリックする場合があります。
ブラウザを閉じます。
Visual Web Developer で AdResponse.xml ファイルを開いて、広告のカウンタがテストでクリックした回数を反映していることを確認します。
AdResponse.xml ファイルを閉じます。

広告カウンタデータの表示

このチュートリアルのしあげとして、広告カウンタ情報を表示するページを作成します。このページを作成すると、XML ファイルを手動で確認するより便利です。

広告応答データを表示するページを作成するには

ソリューションエクスプローラで、Web サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
[名前] ボックスに「ViewAdData.aspx」と入力します。
[追加] をクリックします。
デザインビューに切り替えます。
ツールボックスの [データ] グループから、XmlDataSource コントロールをページにドラッグします。
[XmlDataSource タスク] ショートカットメニューの [データソースの構成] をクリックします。

[データソースの構成 - <Datasourcename>] ダイアログボックスが表示されます。
[データファイル] ボックスに「~/App_Data/AdResponses.xml」を入力します。

[参照] をクリックして、ファイルを探すこともできます。
[OK] をクリックします。
ツールボックスの [データ] グループから、GridView コントロールをページにドラッグします。
[GridView タスク] ショートカットメニューの [データソースの選択] リストで XmlDataSource1 をクリックします。
Ctrl キーを押しながら F5 キーを押してページを実行します。

このページのグリッド内に広告応答データが表示されます。
ブラウザを閉じます。

次の手順

AdRotator コントロールには、このチュートリアルで説明する機能以外の機能も含まれています。これらの機能は、次の方法で使用できます。

XML ファイルに広告を作成するときに追加の属性を使用する。

たとえば、Impressions 要素を使用して、特定の広告の選択頻度をファイル内の他の広告との相対的な関係で制御できます。数値が大きい広告ほど、頻繁に選択されます。詳細については、「AdvertisementFile」を参照してください。

データベースを使用して広告に対する応答を追跡する。

メモ :
実行用のアプリケーションでは、XML ファイルを拡大して多数のユーザーをサポートできないため、XML ファイルを使用して広告に対する応答を追跡しないでください。このチュートリアルでは、チュートリアルを簡略化し、データベースを設定しなくてよいようにするためだけに XML ファイルを使用します。

実行用のアプリケーションでは、XML ファイルを拡大して多数のユーザーをサポートできないため、XML ファイルを使用して広告に対する応答を追跡しないでください。このチュートリアルでは、チュートリアルを簡略化し、データベースを設定しなくてよいようにするためだけに XML ファイルを使用します。

広告のクリックに関する追加情報を追跡する。

前日中にユーザーがクリックした場合にブラウザに cookie を書き込んだり、クリック情報の格納時にブラウザの IP アドレスを追跡したりして、一意のユーザーを確実に追跡する場合があります。また、クリック情報を日時で集約したり、ソースページの他の動的コンテンツに基づいて広告情報を追跡したりする場合もあります。これらの情報は、トラフィックパターンの分析に役立ちます。
別のデータソースコントロールを使用して、AdRotator コントロールをデータにバインドします。

たとえば、広告データをデータベースに格納できます。その場合、データソースコントロールをページに追加し、クエリを使用して広告データを取得するように設定できます。その後で、AdRotator コントロールをデータソースコントロールにバインドできます。詳細については、「方法 : AdRotator Web サーバーコントロールを使用してデータベースから広告を表示する」を参照してください。

参照

AdRotator Web サーバーコントロールの概要

次の方法で共有

チュートリアル : AdRotator コントロールを使用した広告の表示と追跡

前提条件

Web サイトの作成

ファイルシステム Web サイトを作成するには

広告の作成

イメージフォルダを作成するには

広告として使用するグラフィックを作成するには

広告リストの作成

広告用 XML ファイルを作成するには

ページでの広告の表示

ページに広告を表示するには

広告をテストするには

広告に対する応答の追跡

広告を追跡用ページにリダイレクトするには

広告に対する応答を追跡するための XML ファイルを作成するには

Page_Load ハンドラを作成するには

広告に対する応答の追跡をテストするには

広告カウンタデータの表示

広告応答データを表示するページを作成するには

次の手順

参照

参照

その他のリソース

次の方法で共有

チュートリアル : AdRotator コントロールを使用した広告の表示と追跡

前提条件

Web サイトの作成

ファイル システム Web サイトを作成するには

広告の作成

イメージ フォルダを作成するには

広告として使用するグラフィックを作成するには

広告リストの作成

広告用 XML ファイルを作成するには

ページでの広告の表示

ページに広告を表示するには

広告をテストするには

広告に対する応答の追跡

広告を追跡用ページにリダイレクトするには

広告に対する応答を追跡するための XML ファイルを作成するには

Page_Load ハンドラを作成するには

広告に対する応答の追跡をテストするには

広告カウンタ データの表示

広告応答データを表示するページを作成するには

次の手順

参照

参照

その他のリソース

ファイルシステム Web サイトを作成するには

イメージフォルダを作成するには

広告カウンタデータの表示