구글연동관련

구글(GoogleAnalytics)

nexacro platform Web Browser(HTML5) Project에서 Google Analytics 적용방법

nexacro platform Web Browser(HTML5) Project에서 Google Analytics 적용방법에 대해 간략히 기술합니다.

Google Analytics 계정 만들기

Google Analytics site 에 접속 합니다

Google Analytics site를 구글계정을 사용합니다. 
따라서 계정이 없는 경우 구글계정을 만든 후 진행해 주시기 바랍니다.

https://www.google.com/intl/ko/analytics

로그인 버튼을 goolge 계정을 이용하여 로그인 합니다.

Google 애널리틱스 시작하기의 가입 버튼을 누릅니다.

google

필요한 정보를 입력 후 추적아이디 가져오기 버튼을 누릅니다.

google1

nexcro platform 14(WebBroser) 적용

적용 방법 개요

nexacro platform 프로젝트를 Generate 후 Index.html 파일 body 영역에 Google Analytics 일반적인 적용방법과 동일하게 적용을 하게 됩니다. 
다만, nexacro platform 의 경우 단일 index 페이지를 가지기 때문에 Google Analytics 의 event tracking 을 이용하여 처리 할 수 있습니다.

Google Analytics 의 자세한 사용법은 Google Analytics site 를 참고하시기 바랍니다.

https://developers.google.com/analytics/

Index.html 페이지에 google analytics 를 추가합니다

nexacro platform을 Deploy하게 되면 index.html 파일이 생성됩니다. 
해당 파일에 내용을 추가합니다.

index.html 의 body 부분에 google analytics 제공하는 스크립트를 추가합니다.

Index.html 수정 후 Necaxro studio 에서 generate 를 다시 할 경우 index.html 초기화가 되므로 index 페이지에 추가된 스크립트는 따로 관리하셔야 합니다.

<!-- google analytics script -->
<script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   //ga('create', 'UA-XXXXXXX-1', 'auto');
   ga('create', 'UA-XXXXXXX-1', {"cookieDomain":"none"}); // for local test
   ga('send', 'pageview');
</script>
<!-- google analytics script for event traking -->
<script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXXXX-1']);
 _gaq.push(["_setDomainName", "none"]);  //local TEST용 
 _gaq.push(['_trackPageview']);
 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
</script>

소스 중 UA-XXXXXX-1형태의 값은 google analytics 가입을 하게 되면 발급되는 정보입니다.

적용샘플
https://support.tobesoft.co.kr/faq/data/TechnicalNote/index_ga.html

Nexacro Project 에서 특정 이벤트에서 google analytics 에서 안내하고 있는 방법으로 _trackEvent 를 호출하기

호출 예)
_gaq.push(['_trackEvent', category, action, opt_label]);

위와 같이 호출 후 google analytics dashboard 의 Real-Time 메뉴에서 Event 메뉴에서 trackEvent 의 내용을 확인 할 수 있습니다.

google2

적용 샘플

google3

this.changeDiv_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 if(obj.text == "SCREEN A") { 
  this.callGA("testcategory", "SCREEN A", "Base::screenA.xfdl");
  
  this.Div00.set_url("Base::screenA.xfdl");    
 } else if(obj.text == "SCREEN B") { 
  this.callGA("testcategory", "SCREEN B", "Base::screenB.xfdl");
  this.Div00.set_url("Base::screenB.xfdl");
  
 } else if(obj.text == "SCREEN C") { 
  this.callGA("testcategory", "SCREEN C", "Base::screenC.xfdl");
  this.Div00.set_url("Base::screenC.xfdl");
   
 } else { 
  // TODO
 }
}
// call google analytics _trackEvent
this.callGA = function(category, action, opt_label) { 
 _gaq.push(['_trackEvent',category, action, opt_label]);
}
적용샘플 : nexacro 샘플파일
https://support.tobesoft.co.kr/faq/data/TechnicalNote/googleAnalyticsProject.zip
위와 같이 호출 후 googleanalytics dashboard 의 Real-Time 메뉴에서 Event 메뉴에서 trackEvent 의 내용을 확인 할 수 있습니다.

Google Analytics 대시보드 확인

아래 화면처럼 대시보드에서 event 내용을 확인 할 수 있으며 간단하게 테스트한 첨부한 프로젝트를 참고해 보시기 바랍니다.

google2

넥사크로플랫폼(nexacro platform14)에서 Google Analytics 연동방법

구글 차트(Google chart)

데이터를 통계로 보여주거나 수량으로 표현을 해주는 경우에 차트를 사용하는 경우가 많습니다. 
(수량의 변화를 한눈에 보거나 통계 데이터를 도식으로 표현)보통 차트를 표현함에 있어서 외부모듈을 연계하여 차트를 만들어 사용을 합니다.
이에 구글 차트는 손쉽게 차트를 표현하고 연동할 수 있어 넥사크로와의 간단한 연동예제를 소개합니다.

201603_19

201603_19

넥사크로의 WebBrowser 컴포넌트를 이용하여 차트가 구현된 html 페이지를 호출하여 차트를 연동 합니다.
var strUrl = “https://support.tobesoft.co.kr/Next_JSP/GoogleChart/chart/Area.html “;
this.WebBrowser00.set_url(strUrl);

구글 샘플파일

<html>
 <head>
    <script type=“text/javascript” src=“https://www.gstatic.com/charts/loader.js”></script>
    <script type=“text/javascript”>
      google.charts.load(‘current’, {‘packages’:['corechart']});
      google.charts.setOnLoadCallback(drawChart);
    var data;
    var option;
    var chart;
      function drawChart() {
       data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
      ]);
      options = {
       title: ‘Company Performance’,
       hAxis: {title: ‘Year’, titleTextStyle: {color: ‘#333′}},
       vAxis: {minValue: 0}
      };
      chart = new google.visualization.AreaChart(document.getElementById(‘chart_div’));
      chart.draw(data, options);
    }   function btnCallChart(argData, argOption) {
      for(var i=0; i<data.getNumberOfColumns(); i++) {
       data.setColumnLabel(i, argData[0][i]);
      }
      for(var i=0; i<data.getNumberOfRows(); i++) {
      for(var j=0; j<data.getNumberOfColumns(); j++) {
      data.setValue(i, j, argData[i+1][j]);
       }
      }
      options = {
       title: argOption[0],
       hAxis: argOption[1],
       vAxis: argOption[2],
      };
      chart.draw(data, options);
    }
    </script>
 </head>
 <body>
    <div id=”chart_div” style=”width: 100%; height: 100%;”></div>
 </body>
 </html>
[['Task', 'Hours per Day'],['Work',2],['Eat',2],['Commute', 11],['Watch TV', 2],['Sleep',7]]
var arrData = eval(this.DsChart.getColumn(nRow,”data”));
var arrOption = eval(this.DsChart.getColumn(nRow,”opt”));
this.WebBrowser00.callMethod(“btnCallChart”,arrData,arrOption);

Sample 실행

https://support.tobesoft.co.kr/Next_JSP/GoogleChart/index.html

주의사항

구글 차트는 SVG (Scalable Vector Graphics), VML(Vector Markup Language) 기능을 사용하기때문에 브라우저에 따라 사용이 되지 않을 수 있습니다.

SVG지원 브라우저 사양

Internet Explorer : IE9부터 SVG를 지원
Opera : 8.0 Beta3 부터 SVG 1.1 Tiny를 지원
Firefox : 1.5 베타 1 이후 지원
Safari : SVG를 지원하지 않음

참고사이트

https://developers.google.com/chart/interactive/docs