共用方式為


追蹤 ASP.NET Web Pages (Razor) 網站的訪客資訊 (分析)

Tom FitzMacken

本文說明如何使用協助程式,將網站分析新增至 ASP.NET Web Pages (Razor) 網站中的頁面。

您將學到什麼:

  • 如何將網站流量的相關資訊傳送給分析提供者。

以下是本文中介紹的 ASP.NET 程式設地功能:

  • Analytics協助程式。

教學課程中使用的軟體版本

  • ASP.NET Web Pages (Razor) 2
  • ASP.NET Web 協助程式庫 (NuGet 套件)

分析是測量您網站上流量之技術的一般術語,可讓您了解人員如何使用網站。 有許多分析服務可供使用,包括 Google、Yahoo、StatCounter 等提供的服務。

分析的運作方式是,您向分析提供者註冊帳戶,您可以在其中註冊您想要追蹤的網站。提供者會傳送 JavaScript 程式碼片段給您,其中包含您帳戶的識別碼或追蹤碼。 將 JavaScript 程式碼片段新增至您要追蹤之網站上的網頁。(您通常會將分析程式碼片段新增至頁尾或版面配置頁面或其他出現在您網站中每一頁的 HTML 標記。) 當使用者要求包含其中一個 JavaScript 程式碼片段的頁面時,程式碼片段會將目前頁面的相關資訊傳送給分析提供者,該提供者會記錄頁面的各種詳細資料。

當您想要查看您的網站統計數據時,您可登入分析提供者的網站。 然後,您可以檢視有關網站的各種報告,例如:

  • 個別頁面的頁面檢視數。 這會告訴您 (大概) 有多少人正在瀏覽網站,以及您網站上的哪些頁面是最受歡迎的頁面。

  • 人員在特定頁面上花費的時間長度。 這可以告訴你,你的首頁是否能讓人們覺得有趣。

  • 人員瀏覽您的網站之前,他們位於哪些網站。 這可協助您瞭解流量是否來自連結、搜尋等等。

  • 人們何時瀏覽您的網站,以及他們停留的時間。

  • 您的訪客來自哪個國家/地區。

  • 訪客所使用的瀏覽器和作業系統。

    Ch14traffic-1

使用協助程式將分析新增至頁面

ASP.NET Web Pages 包含數個分析協助程式 (Analytics.GetGoogleHtmlAnalytics.GetYahooHtmlAnalytics.GetStatCounterHtml),可讓您輕鬆管理用於分析的 JavaScript 程式碼片段。 您只需要將協助程式新增至頁面,而不是找出放置 JavaScript 程式碼片段的方式和位置。 您唯一需要提供的資訊是您的帳戶名稱、識別碼或追蹤碼。 (對於 StatCounter,您還必須提供一些額外的值。)

在此程序中,您將建立使用GetGoogleHtml協助程式的版面配置頁面。 如果您已經有一個帳戶,其中包含其他分析提供者的帳戶之一,您可以改用該帳戶,並視需要稍微調整。

注意

當您建立分析帳戶時,您需註冊要追蹤之網站的 URL。 如果您在本機電腦上測試所有項目,則不會追蹤實際流量 (唯一的流量是您),因此您將無法記錄和檢視網站統計數據。 但此程序會示範如何將分析協助程式新增至頁面。 當您發佈您的網站時,即時網站會將資訊傳送至您的分析提供者。

  1. 若尚未完成新增,請依照在 ASP.NET Web Pages 網站中安裝協助程式中所述,將 ASP.NET Web 協助程式庫新增至您的網站。

  2. 使用 Google Analytics 建立帳戶,並記錄帳戶名稱。

  3. 建立名為 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>
    

    注意

    您必須在網頁正文中 (</body>標籤之前) 呼叫Analytics協助程式。 否則,瀏覽器將不會執行指令碼。

    如果您使用不同的分析提供者,請改用下列其中一個協助程式:

    • (Yahoo) @Analytics.GetYahooHtml("myaccount")
    • (StatCounter) @Analytics.GetStatCounterHtml("project", "security")
  4. myaccount取代為您在步驟 1 中建立的帳戶名稱、識別碼,或追蹤碼。

  5. 在瀏覽器中執行頁面。 (在您執行之前,請確定已在檔案工作區中選取頁面。)

  6. 在瀏覽器中,檢視頁面原始檔。 您將可以看到轉譯的分析程式碼:

    <!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>
    
  7. 登入 Google Analytics 網站,並檢查您網站的統計數據。 如果您在即時網站上執行頁面,您會看到記錄您瀏覽頁面的條目。

其他資源