Google Analytics 데이터를 대시보드에 통합하기 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

Google Analytics 데이터를 대시보드에 통합하기

페이지 정보

작성자 GrapeCity 작성일 21-04-12 13:41 조회 2,625회 댓글 0건

본문

ComponentOne 2020 v3 릴리스에서는 .NET Standard 서비스 라이브러리 DataConnectors(다양한 유형의 데이터 소스에 연결하는 데 사용할 수 있는 커넥터 집합을 제공)가 지원하는 데이터 소스의 수가 늘어납니다. 이제 사용자는 각 유형에 ADO.NET Provider를 사용해 여섯 가지 데이터 소스, 즉 OData, Microsoft Dynamics 365 Sales, Salesforce Data, Kintone, QuickBooks OnlineGoogle Analytics에 연결할 수 있습니다. 이 Provider들은 SQL Server 및 OLEDB에 대한 기본 .NET 데이터 Provider와 동일한 ADO.NET 아키텍처를 보유하고 있습니다.

따라서 이 Provider들은 사용자가 .NET 아키텍처에서 사용 가능한 유사한 클래스 집합을 따를 수 있게 함으로써 데이터 액세스 과정의 복잡성을 완화합니다. 또한 이 Provider들은 인증, 캐싱, SQL/LINQ 쿼리 지원과 같은 유용한 기능을 갖추고 있습니다. 이 기능 외에도 DataConnector에는 각 데이터 소스 유형에 대한 Entity Framework(EF) Core Provider도 포함되어 있습니다. 이 Provider 덕분에 Entity Framework Core로 작업할 때도 이 라이브러리가 유용합니다.

이 포스팅에서는 사용자가 Google Analytics용 ADO.NET Provider를 사용해 Google Analytics 데이터에 연결하는 방법을 이해하는 데 도움을 드리고자 합니다. 또한 인증, 쿼리, 캐싱 등 기본 기능에 대해 설명하고, 이어서 Google Analytics 데이터를 이용해 대시보드를 만드는 방법에 대해 설명 드리겠습니다.

시작하려면 다음과 같이 NuGet에서 C1.DataConnectorC1.AdoNet.C1GoogleAnalytics 패키지를 설치하십시오.

NuGet

데스크톱 DataConnector 탐색기웹 기반 DataConnector 탐색기를 사용해 모든 유형의 DataConnector와 그 기능에 대해 알아보십시오. 또한 여기에서 ComponentOne DataConnectors 서비스 컴포넌트를 다운로드하여 설치할 수 있습니다. 설치된 샘플은 'C:\Users\xxxx\Documents\ComponentOne Samples\ServiceComponents\DataConnector'에서 확인하실 수 있습니다.


연결

Provider와의 작업을 위한 첫 단계는 Google Analytics 데이터에 대한 연결을 설정하는 것입니다. ADO.NET DataConnection 클래스와 마찬가지로 DataConnector 서비스 라이브러리에는 C1GoogleAnalyticsConnection 클래스가 포함되어 있습니다. 이 클래스는 연결 개체를 만들어 연결 문자열을 클래스 구성자에 매개 변수로 전달함으로써 데이터에 대한 연결을 설정하는 데 사용됩니다. 연결 문자열은 C1GoogleAnalyticsConnectionStringBuilder 클래스를 사용해 미리 정의되거나 생성됩니다.

Google Analytics용 ADO.NET Provider는 현재 서비스 계정 자격 증명을 사용한 인증을 지원합니다. JSON 파일로 다운로드된 서비스 계정 자격 증명은 KeyFile 속성을 사용해 연결 문자열에 제공되어야 합니다. Google Analytics 보기를 위한 ViewId는 Google Analytics 데이터에 대한 인증된 액세스를 위해 ViewId 속성을 통해 설정되어야 합니다. 세부 정보는 문서를 참조하십시오.

아래 코드 조각에서는 연결 문자열을 생성하고 연결 개체를 만드는 방법을 보여줍니다.

//Configure connection string  
C1GoogleAnalyticsConnectionStringBuilder builder = new C1GoogleAnalyticsConnectionStringBuilder();  
builder.KeyFile = KeyFile;  
builder.ViewId = ViewId;  

//Fetch data  
C1GoogleAnalyticsConnection conn = new C1GoogleAnalyticsConnection(builder.ConnectionString))


데이터 가져오기

Google Analytics용 ADO.NET Provider는 사용자가 표준 SQL 구문을 사용해 데이터 소스에 대해 쿼리할 수 있게 허용합니다. Provider는 쿼리 조인, 함수, 요약 등 대부분의 SQL 기능을 지원합니다. Google Analytics 데이터는 연결된 모드 또는 연결이 해제된 모드에서 C1GoogleAnalyticsCommandC1GoogleAnalyticsDataAdapter 개체를 사용해 가져올 수 있습니다. 아래 샘플 코드에서는 C1GoogleAnalyticsDataAdapter 개체를 사용한 READ 작업을 보여줍니다.

//Define command  
string sql = "SELECT Country, Sessions FROM Traffic WHERE Sessions > 500 AND StartDate = '14DaysAgo' AND EndDate = 'Today'";  

//Fetch data  
using (var con = new C1GoogleAnalyticsConnection(gaConnection))  
{  
   con.Open();  

   //Using C1GoogleAnalyticsDataAdapter  
   C1GoogleAnalyticsDataAdapter gaAdapter = new C1GoogleAnalyticsDataAdapter(con, sql);  
   DataTable dt = new DataTable();  
   gaAdapter.Fill(dt);  

   //Display fetched data  
   foreach (DataRow row in dt.Rows)  
   {  
     Console.WriteLine("{0}\t{1}", row["Country"], row["Sessions"]);  
   }  
}


캐싱

사용자가 유사한 작업을 반복적으로 수행할 때 캐시에서 데이터에 액세스함으로써 Google Analytics용 ADO.NET Provider의 성능을 향상할 수 있습니다. DataConnector 라이브러리는 이러한 유형의 기능을 지원하기 위해 캐싱 지원을 기본 제공합니다. 연결에 대해 캐시 속성을 설정하고 캐시를 지원하려면 연결 개체를 구성해야 합니다. UseCache 속성은 true로 설정해야 합니다. 이때 CacheLocation 속성을 설정해 기본 캐시 위치를 사용자 정의해야 합니다. CacheTolerance 속성은 캐시 허용 시간을 초 단위로 설정하는 데 사용됩니다(기본값은 600초로 설정됨).

아래 샘플 코드 조각에서는 연결 개체에서 모든 캐시 속성을 설정함으로써 캐싱을 지원하는 방법을 보여줍니다.

//Configure Connection string  
string gaConnection = string.Format(@"Key File={0};View Id={1};Use Cache=true; Cache Tolerance=6; Cache Location='C:\temp\gacache.db';", KeyFile, ViewId);  

//Define command  
string sql = "SELECT Country, Sessions FROM Traffic WHERE Sessions > 500 AND StartDate = '14DaysAgo' AND EndDate = 'Today'";  

//Fetch data  
using (var con = new C1GoogleAnalyticsConnection(gaConnection))  
{  
  Console.WriteLine("Start Time " + DateTime.Now);  
  con.Open();  
  var command = con.CreateCommand();  
  command.CommandText = sql;  
  var reader = command.ExecuteReader();  
  while (reader.Read())  
  {  
     Console.WriteLine(String.Format("\t{0} --> \t\t{1}", reader["Country"], reader["Sessions"]));  
  }  
  Console.WriteLine("End Time " + DateTime.Now);  
}


증분 캐싱

Google Analytics용 ADO.NET Provider는 증분 캐싱이라고 하는 또 다른 캐싱 전략을 제공합니다. 증분 캐싱은 캐시 데이터를 주기적으로 업데이트하여 전체 캐시 데이터를 갱신하지 않고 소스 엔터티에서 새 레코드를 추가합니다. 이 기술은 레코드가 마지막으로 업데이트되거나 새 레코드가 삽입된 시간을 기록하는 고유 필드 및 타임스탬프 필드를 사용합니다. 따라서 증분 캐싱을 구현해야 하는 모든 테이블에는 타임스탬프 열이 있어야 합니다. Google Analytics에는 기본 타임스탬프 열인 "Updated"가 있습니다. C1GoogleAnalyticsConnectionStringBuilder 클래스의 "IncrementalUpdate" 및 "IncrementalUpdateColumn" 속성은 증분 캐싱을 지원하도록 설정해야 합니다. 자세한 내용은 증분 캐싱에 대한 문서 주제를 참조하십시오.

위 단계에서는 ADO.NET과 같이 알려진 데이터 액세스 기술에 기반을 둔 표준 인터페이스를 갖춘 새로운 유형의 데이터 소스에 연결하는 것이 얼마나 간단한 일인지 알 수 있었습니다. 그러면 이전 기술을 사용해 새로운 작업을 수행해 보겠습니다.

자세한 내용은 DataConnector 문서를 참조하시기 바랍니다.

이제 Google Analytics 데이터를 표시할 대시보드를 만들어 보겠습니다.


사용 사례: 웹 사이트 트래픽 대시보드

Google Analytics를 통해 사용자는 예상 고객이 분석 데이터를 볼 때 도움이 될 다양한 보고서와 대시보드를 만들 수 있습니다. 보고서와 대시보드를 비교해보면 사용자가 정보를 시각화하는 데 도움이 될 수 있으므로 대시보드가 더 매력적이고 편리합니다. Google Analytics 대시보드는 최대 12개의 위젯을 사용해 만들어집니다. 하지만 위젯은 표나 그래프 같은 데이터를 표시하는 시각화일 뿐입니다. Google Dashboard는 무료 서비스이고 Google Analytics 계정이 있는 모든 사용자가 사용할 수 있지만 해당 목적을 위해 Google Analytics 도구를 이해하고 사용하는 데 제한이 있습니다. 따라서 .Net 응용 프로그램에서 Google Analytics 데이터로 작업하는 데 별 도움이 안 될 수 있습니다.

이 예시에서는 Google Analytics 데이터를 이용해 .Net 응용 프로그램에서 대시보드를 만듭니다. 이때 DashboardLayout 컨트롤과 ComponentOne의 Winforms Edition이 제공하는 기타 Winforms 컨트롤을 사용할 것입니다. DashboardLayout 컨트롤은 대시보드를 디자인하는 데 도움이 됩니다. 반면, 기타 WinForms 컨트롤은 데이터를 대시보드에 표시하기 위한 위젯의 역할을 합니다.

여기서는 기본 대시보드를 만들어 한 웹 사이트의 지난달 트래픽을 국가별(5개국)로 분석해 보겠습니다. 분석할 수 있는 메트릭의 목록은 다음과 같습니다.

  1. 신규 사용자의 수, 신규 세션 수, 각 세션/사용자의 방문 페이지에 관한 세부 정보를 제공하는 각 국가의 총 세션 수

  2. 사용자를 웹 사이트로 유도하는 인기 있는 트래픽 소스

  3. 각 국가의 평균 이탈률

  4. 각 국가의 세션당 평균 페이지 조회 수

  5. 국가별 세션 지속 시간의 평균 백분율

우리가 만들 대시보드의 모습은 아래와 같습니다.

대시보드 예시

아래와 같은 단계에 따라 이러한 대시보드를 만들어 보겠습니다.

참고: 아래의 단계를 시작하기 전에 DashboardLayout 컨트롤의 문서를 참조하여 컨트롤에 관해 더 깊이 이해하시면 도움이 됩니다.

응용 프로그램 구성:

  1. ComponentOne Winforms Edition을 다운로드 및 설치하여 대시보드 디자인에 사용되는 DashboardLayout 컨트롤과 기타 Winforms 컨트롤로 작업을 시작합니다.

  2. 새 Winforms(.Net Framework) 응용 프로그램을 만듭니다.

  3. Nuget 패키지 관리자를 이용해 응용 프로그램에서 C1.AdoNet.GoogleAnalytics 패키지를 설치합니다. 세부적인 단계는 다음 링크를 참조하십시오.

  4. 폼에서 C1ThemeController 컨트롤을 끌어서 놓는 방식으로 사용자 정의 테마를 응용 프로그램이나 기타 컨트롤에 적용합니다. 세부 정보는 다음 링크를 참조하십시오.

DashboardLayout 컨트롤 구성:

  1. 속성 창을 사용해 기본 Windows 폼 너비를 1210으로, 높이는 694로, FormBorderStyle은 ‘없음’으로 설정합니다.

  2. 도구 상자에서 폼으로 DashboardLayout 컨트롤을 끌어서 놓고 Dock 속성을 ‘채우기’로 설정합니다.

  3. DashboardLayout 컨트롤의 LayoutType 속성은 기본적으로 ‘분할’로 설정되어 있습니다. 속성 창을 사용해 DashboardLayout 컨트롤의 LayoutType 속성을 ‘그리드’로 변경합니다. 이렇게 하면 컨트롤이 각기 열이 세 개 있는 두 행으로 분할되어 기본적으로 셀이 여섯 개가 됩니다.

  4. 각 행의 첫 번째 셀에 포함된 패널을 삭제합니다.

위 단계를 따른 후 Windows Form 디자이너에 표시되는 DashboardLayout 컨트롤의 모습은 다음과 같습니다.대시보드 예시

웹 사이트 트래픽을 시각화하고 분석하는 데 사용되는 대시보드를 디자인하기 위해 이러한 각 셀에 컨트롤을 추가하겠습니다.

DashboardLayout에 컨트롤 추가:

DashboardLayout에 컨트롤을 추가하려면 도구 상자에서 DashboardLayout 컨트롤의 그리드 레이아웃에 있는 특정 셀로 컨트롤을 끌어서 놓으십시오. 사용자가 셀에 컨트롤을 놓자마자 셀에 새 패널이 만들어지고 이 패널 안에 컨트롤이 배치됩니다. 이러한 각 셀에 컨트롤을 추가하는 단계는 다음과 같습니다.

  1. C1FlexGrid 컨트롤을 첫 번째 셀에 추가하고 Dock 속성을 ‘채우기’로 설정합니다. C1FlexGrid 컨트롤이 "panel2"라는 패널에 추가되었는지 확인하고 이 패널의 Dock 속성을 ‘채우기’로 설정합니다.

  2. FlexGrid(panel2)가 포함된 패널의 ColumnSpan 속성을 2로 설정하여 첫 번째 행의 맨 처음 두 셀을 병합합니다. FlexGrid 컨트롤을 추가하고 셀을 병합한 후 DashboardLayout 컨트롤의 모습은 다음과 같습니다.

대시보드 예시

3. FlexPie 컨트롤을 첫 번째 행의 마지막 셀에 추가하고 Dock 속성을 ‘채우기’로 설정합니다.
4. 두 번째 행에 있는 세 개의 셀 각각에 FlexChart 컨트롤을 추가하고 각 FlexChart 컨트롤의 Dock 속성을 ‘채우기’로 설정합니다. 나머지 컨트롤을 추가한 후 DashboardLayout 컨트롤의 모습은 다음과 같습니다.

대시보드 예시


Google Analytics용 ADO.NET Provider를 사용해 Google Analytics 데이터 가져오기

Windows Form용 코드 파일에 다음 메서드를 정의하여 Google Analytics용 ADO.NET Provider를 사용해 Google Analytics에서 필요한 데이터를 가져옵니다.

static DataSet ReadOperation()  
{  
  //Define Connection String  
  string gaConnection = string.Format("Key File={0};View Id={1}", KeyFile, ViewId);  

  //Define SQL commands  
  string gsql = "SELECT Country, Sessions, NewUsers, PercentNewSessions, LandingPagePath FROM Traffic WHERE Country = 'United States' OR Country = 'India' OR Country = 'Australia' OR Country = 'Canada' OR Country = 'United Kingdom'AND StartDate = '7DaysAgo' AND EndDate = 'Today'";  
   string psql = "SELECT Medium, Users FROM Traffic WHERE Medium = 'referral' OR Medium = 'organic' OR Medium = 'Click-to-Site' OR Medium = 'prospects' OR Medium = 'CPC' OR Medium = '(none)' AND Country = 'United States' OR Country = 'India' OR Country = 'Australia' OR Country = 'Canada' OR Country = 'United Kingdom'";      
    string csql = "SELECT Country, BounceRate, PageViewsPerSession, AvgSessionDuration FROM Traffic WHERE Country = 'United States' OR Country = 'India' OR Country = 'Australia' OR Country = 'Canada' OR Country = 'United Kingdom'";                   

        //Fetch data  
    using (var con = new C1GoogleAnalyticsConnection(gaConnection))  
    {  
       con.Open();  

       DataSet ds = new DataSet();  

       //Using C1GoogleAnalyticsDataAdapter  
       C1GoogleAnalyticsDataAdapter gaAdapter1 = new C1GoogleAnalyticsDataAdapter(con, gsql);  
       gaAdapter1.Fill(ds, "GridData");  

       C1GoogleAnalyticsDataAdapter gaAdapter2 = new C1GoogleAnalyticsDataAdapter(con, psql);  
       gaAdapter2.Fill(ds, "PieData");  

       C1GoogleAnalyticsDataAdapter gaAdapter3 = new C1GoogleAnalyticsDataAdapter(con, csql);  
       gaAdapter3.Fill(ds, "FlexChartData");  

       return ds;  
     }  
 }


가져온 데이터에 컨트롤 바인딩하기:

Windows Form용 코드 파일에 다음 메서드를 정의하여 DashboardLayout 컨트롤에 배치된 모든 컨트롤에 가져온 데이터를 바인딩합니다.

//Binding FlexGrid  
public static void BindFlexGrid(DataSet datasource, C1FlexGrid flexGrid, C1ThemeController themeController)  
{  
   //Binding FlexGrid to Datasource  
   flexGrid.DataSource = datasource.Tables[0];  
      //Apply theme to C1FlexGrid, refer to [link](https://www.grapecity.com/componentone/docs/win/online-themes/QSApplyingBuiltInThemetoApp.html) for details  
   themeController.SetTheme(flexGrid, "Office2016White");  
   //Styling FlexGrid  
   flexGrid.BorderStyle = C1.Win.C1FlexGrid.Util.BaseControls.BorderStyleEnum.None;  
   flexGrid.Rows[0].TextAlign = TextAlignEnum.CenterCenter;  
   flexGrid.Cols[0].Visible = false;  
   flexGrid.Cols[2].Width = 200;  
   flexGrid.Cols[2].Aggregate = AggregateEnum.Sum;  
   flexGrid.Cols[2].Format = "N0";  
   flexGrid.Cols[3].Aggregate = AggregateEnum.Sum;  
   flexGrid.Cols[3].Format = "N0";  
   flexGrid.Cols[4].Width = 150;  
   flexGrid.Cols[4].Aggregate = AggregateEnum.Average;  
   flexGrid.Cols[4].Format = "N2";  
   flexGrid.ExtendLastCol = true;  
   //Grouping FlexGrid  
   flexGrid.GroupDescriptions = new List<C1.Win.C1FlexGrid.GroupDescription>() { new C1.Win.C1FlexGrid.GroupDescription("Country") };  
   flexGrid.HideGroupedColumns = true;  
   for (var i = 1; i < flexGrid.Nodes.Length; i++)  
   {  
       flexGrid.Nodes[i].Collapsed = true;  
   }  
}  

//Binding FlexPie  
public static void BindFlexPie(DataSet datasource, FlexPie flexPie)  
{  
   //Passing data in FlexPie  
   flexPie.DataSource = datasource.Tables[1];  
   //Binding FlexPie's AxisX to 'Value' so values appear in Horizontal axis  
   flexPie.Binding = "Users";  
   flexPie.BindingName = "Medium";  
   flexPie.InnerRadius = 0.5;  
   //Specify what and how to show data values  
   flexPie.DataLabel.Content = "{name} : {p:0}%";  
   //Specify where to position the data labels relative to pie slices  
   flexPie.DataLabel.Position = PieLabelPosition.Radial;  
}  

//Binding FlexCharts  
public static void BindFlexCharts(DataSet datasource, FlexChart chart1, FlexChart chart2, FlexChart chart3)  
{  
   //Binding FlexChart1  
   chart1.Series.Clear();  
   chart1.DataSource = datasource.Tables[2];  
   chart1.ChartType = ChartType.Column;  
   chart1.AxisY.MajorGrid = false;  
   //Adding a Series to chart and binding it (AxisY) to 'BounceRate' field  
   chart1.Series.Add(new C1.Win.Chart.Series  
   {  
       Binding = "BounceRate"  
   });  
   //Binding chart's AxisX to 'Country'  
   chart1.BindingX = "Country";  

   //Binding FlexChart2  
   chart2.Series.Clear();  
   chart2.DataSource = datasource.Tables[2];  
   chart2.ChartType = ChartType.LineSymbols;  
   chart2.AxisY.MajorGrid = false;  
   //Adding a Series to chart and binding it (AxisY) to 'PageViewsPerSession' field  
   chart2.Series.Add(new C1.Win.Chart.Series  
   {  
      Binding = "PageViewsPerSession"  
   });  
   //Binding chart's AxisX to 'Country'  
   chart2.BindingX = "Country";  

   //Binding FlexChart3  
   chart3.Series.Clear();  
   chart3.DataSource = datasource.Tables[2];  
   chart3.ChartType = ChartType.LineSymbols;  
   chart3.AxisY.MajorGrid = false;  
   //Adding a Series to chart and binding it (AxisY) to 'AvgSessionDuration' field  
   chart3.Series.Add(new C1.Win.Chart.Series  
   {  
      Binding = "AvgSessionDuration"  
   });  
   //Binding chart's AxisX to 'Country'  
   chart3.BindingX = "Country";  
}



대시보드 스타일 지정:

DashboardLayout 컨트롤의 스타일을 지정하는 다음 메서드를 정의하여 대시보드의 모양을 변경해 Google Analytics 대시보드와 유사하게 보이도록 합니다.

public static void StylingDashboard(C1DashboardLayout dashboardLayout)  
{  
   DashboardTheme dashboardTheme = dashboardLayout.Styles;  
   dashboardTheme.Common.Padding = new C1.Framework.Thickness(10, 10, 10, 10);  
   dashboardTheme.ItemContainer.BackColor = Color.White;  
   dashboardTheme.ItemContainer.Margins = new C1.Framework.Thickness(10, 10, 10, 10);             
}


대시보드 생성:

Form_Load 이벤트에서 위에 정의된 모든 메서드를 호출하여 대시보드 컨트롤을 데이터로 채우고 대시보드의 스타일을 지정합니다.

private void Form1_Load(object sender, EventArgs e)  
{  
  DataSet ds = ReadOperation();  
  BindFlexGrid(ds, c1FlexGrid1, c1ThemeController1);  
  BindFlexPie(ds, flexPie1);  
  BindFlexCharts(ds, flexChart1, flexChart2, flexChart3);  
  StylingDashboard(c1DashboardLayout1);  

  //Set the titles for dashboard tile  
  c1DashboardLayout1.SetCaption(panel2, "Users/Sessions");  
  c1DashboardLayout1.SetCaption(panel7, "Traffic Sources");  
  c1DashboardLayout1.SetCaption(panel9, "Bounce Rate");  
  c1DashboardLayout1.SetCaption(panel11, "Page Views per Session");  
  c1DashboardLayout1.SetCaption(panel13, "Average Session Duration");  
 }


응용 프로그램을 저장 및 실행하여 대시보드를 확인합니다. 

여기에서 제공하는 스키마 세부 정보에 설명되어 있듯이 이와 유사한 방식으로 사용자는 Google Analytics에서 사용할 수 있는 다른 표/보기에 바인딩하여 Winforms Edition에서 제공하는 다양한 컨트롤로 다른 대시보드를 만들 수 있습니다.

위 방식으로 .Net 응용 프로그램에서 대시보드 및 Google Analytics를 시작해 보세요!


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.