ASP.NET Web ページ (Razor) サイトの訪問者情報の追跡 (分析)

[アーティクル]
06/02/2024

この記事では、ヘルパーを使用して、ASP.NET Web ページ (Razor) Web サイトのページに Web サイト分析を追加する方法について説明します。

ここでは、次の内容について学習します。

Web サイトのトラフィックに関する情報を分析プロバイダーに送信する方法。

この記事で紹介する ASP.NET プログラミング機能を次に示します。

Analytics ヘルパー。

チュートリアルで使用するソフトウェアのバージョン

ASP.NET Web ページ (Razor) 2

ASP.NET Web ヘルパーライブラリ (NuGet パッケージ)

分析は、Web サイトのトラフィックを測定する技術の総称で、人々がサイトをどのように利用しているかを理解することができます。多くの分析サービス (Google、Yahoo、StatCounter などのサービス) を利用できます。

分析のしくみは、分析プロバイダーのアカウントにサインアップし、追跡するサイトを登録します。プロバイダーから、アカウントの ID または追跡コードを含む JavaScript コードのスニペットが送信されます。追跡するサイトの Web ページに JavaScript スニペットを追加します (通常、分析スニペットは、サイト内のすべてのページに表示されるフッターまたはレイアウトページまたはその他の HTML マークアップに追加します)。これらの JavaScript スニペットのいずれかを含むページをユーザーが要求すると、スニペットは現在のページに関する情報を分析プロバイダーに送信し、プロバイダーはそのページに関するさまざまな詳細を記録します。

サイトの統計情報を確認する場合は、分析プロバイダーの Web サイトにログインします。その後、サイトに関する次のようなさまざまなレポートを表示できます。

個々のページのページビューの数。これにより、サイトを訪問している (おおまかな) 人数と、サイト内のどのページが最も人気があるかがわかります。
ユーザーが特定のページに費やす時間。これにより、ホームページがユーザーの関心を維持しているかどうかがわかります。
ユーザーがサイトを訪問する前にアクセスしていたサイト。これは、トラフィックがリンクから来ているのか、検索から来ているのかなどを理解するのに役立ちます。
ユーザーがサイトを訪問するタイミングと滞在時間。
訪問者の出身国。
訪問者が使用しているブラウザーとオペレーティングシステム。

ヘルパーを使用してページに分析を追加する

ASP.NET Web ページには、分析に使用される JavaScript スニペットの管理を容易にするいくつかの分析ヘルパー (Analytics.GetGoogleHtml、Analytics.GetYahooHtml、Analytics.GetStatCounterHtml) が含まれています。 JavaScript コードを配置する方法と場所を考える代わりに、ヘルパーをページに追加するだけで済みます。指定する必要がある情報は、アカウント名、ID、または追跡コードのみです (StatCounter の場合は、いくつか追加の値も指定する必要があります)。

この手順では、GetGoogleHtml ヘルパーを使用するレイアウトページを作成します。他の分析プロバイダーのいずれかのアカウントを既に持っている場合は、代わりにそのアカウントを使用して、必要に応じて少し調整することができます。

Note

分析アカウントを作成するときは、追跡するサイトの URL を登録します。すべてをローカルコンピューターでテストする場合、実際のトラフィックを追跡することはできません (自分のトラフィックしかないため)。そのため、サイトの統計を記録して表示することはできません。しかし、この手順では、分析ヘルパーをページに追加する方法を示します。サイトを公開すると、ライブサイトから分析プロバイダーに情報が送信されます。

「ASP.NET Web ページサイトへのヘルパーのインストール」で説明されているように、ASP.NET Web ヘルパーライブラリを Web サイトに追加します (まだ追加していない場合)。
Google Analytics でアカウントを作成し、アカウント名を記録します。
Analytics.cshtml という名前のレイアウトページを作成し、次のマークアップを追加します。
```
@using Microsoft.Web.Helpers;
<!DOCTYPE html>
<html>
  <head>
    <title>Analytics Test</title>
  </head>
  <body>
    <h1>Analytics Test Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div id="footer">
      &copy; 2012 MySite
    </div>
    @Analytics.GetGoogleHtml("myaccount")
  </body>
</html>
```
Note

Analytics ヘルパーの呼び出しは、Web ページの本文内 (</body> タグの前) に配置する必要があります。そうしないと、ブラウザーでスクリプトが実行されません。

別の分析プロバイダーを使用している場合は、代わりに次のいずれかのヘルパーを使用します。
- (Yahoo) @Analytics.GetYahooHtml("myaccount")
- (StatCounter) @Analytics.GetStatCounterHtml("project", "security")
myaccount を、手順 1 で作成したアカウント名、ID、または追跡コードに置き換えます。
ブラウザーでページを実行します。 (実行する前に、ファイル ワークスペース内でこのページが選択されていることを確認してください)。

ブラウザーで、ページのソースを表示します。レンダリングされた分析コードを確認できます。

<!DOCTYPE html>
<html>
  <head>
    <title>Analytics Test</title>
  </head>
  <body>
    <h1>Analytics Test Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div id="footer">
      &copy; 2012 MySite
    </div>
    <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
      try{
      var pageTracker = _gat._getTracker("myaccount");
      pageTracker._trackPageview();
      } catch(err) {}
    </script>
  </body>
</html>

Google Analytics サイトにログオンし、サイトの統計情報を確認します。ライブサイトでページを実行している場合は、ページへのアクセスをログするエントリが表示されます。

次の方法で共有

ASP.NET Web ページ (Razor) サイトの訪問者情報の追跡 (分析)

チュートリアルで使用するソフトウェアのバージョン

ヘルパーを使用してページに分析を追加する

その他のリソース

フィードバック

その他のリソース