시작하기

개요

이 문서에서는 Embed API 사용 방법에 관한 전체 예를 안내합니다. 완료되면 다음과 같은 애플리케이션이 생성됩니다.

간단한 대시보드 만들기

간단한 간단한 2단계를 따라 서버에서 샘플 애플리케이션을 실행할 수 있습니다.

새 클라이언트 ID 만들기
코드 복사 및 붙여넣기

이 애플리케이션을 준비한 후 다음 섹션에서 모든 부분이 함께 작동하는 방식을 자세히 설명합니다.

새 클라이언트 ID 만들기

Embed API는 익숙한 OAuth 2.0 흐름을 사용하는 원클릭 로그인 구성요소를 제공하여 거의 모든 승인 프로세스를 처리합니다. 페이지에서 이 버튼이 작동하려면 클라이언트 ID가 필요합니다.

클라이언트 ID를 만든 적이 없다면 안내에 따라 만들 수 있습니다.

안내를 따르면 다음 두 가지 중요한 단계를 간과해서는 안 됩니다.

애널리틱스 API 사용 설정
올바른 출처 설정

출처에서 이 코드를 사용하여 사용자를 승인하도록 허용된 도메인을 관리합니다. 이렇게 하면 다른 사용자가 코드를 복사하여 사이트에서 코드를 실행할 수 없습니다.

예를 들어 웹사이트가 example.com 도메인에서 호스팅되는 경우 클라이언트 ID http://example.com에 다음 출처를 설정해야 합니다. 코드를 로컬에서 테스트하려면 로컬 서버의 출처도 추가해야 합니다(예: http://localhost:8080).

코드 복사 및 붙여넣기

클라이언트 ID를 올바르게 설정한 후 데모를 만들 수 있습니다. 다음 코드를 복사하여 클라이언트 ID의 서버 HTML에 있는 클라이언트 파일에 삽입하세요. "클라이언트 ID를 여기에 삽입하세요.

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = 'Insert your client ID here';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

코드 둘러보기

이 섹션에서는 샘플 애플리케이션에 제공된 코드에서 정확히 어떤 일이 일어나는지 단계별로 단계별로 설명합니다. 작동 방식을 파악했다면 직접 만들 수 있습니다.

1단계: 구성요소 컨테이너 만들기

대부분의 Embed API 구성요소는 페이지에 무언가를 시각적으로 렌더링합니다. 이러한 구성요소를 배치할 위치를 제어하는 방법은 구성요소의 컨테이너를 만드는 것입니다. 예시 애플리케이션에는 인증 버튼, 뷰 선택기, 차트가 있습니다. 이러한 각 구성요소는 다음 HTML 요소 내에서 렌더링됩니다.

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

구성요소를 만들 때 ID 속성별로 사용할 컨테이너를 알려줍니다. 이 내용은 이후 예시에서 확인할 수 있습니다.

2단계: 라이브러리 로드

Embed API는 다음 스니펫과 함께 로드할 수 있습니다.

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

라이브러리가 완전히 로드되면 gapi.analytics.ready로 전달된 콜백이 호출됩니다.

<script>
gapi.analytics.ready(function() {
  // Put your application code here...
});
</script>

3단계: 사용자 승인하기

Embed API는 익숙한 OAuth 2.0 흐름을 사용하는 원클릭 로그인 구성요소를 제공하여 거의 모든 승인 프로세스를 처리합니다. 페이지에서 이 버튼이 작동하도록 하려면 컨테이너 참조 및 클라이언트 ID를 전달해야 합니다.

gapi.analytics.auth.authorize({
  container: 'auth-button',
  clientid: CLIENT_ID,
});

이렇게 하면 승인 흐름을 자동으로 처리하는 요소 ID가 포함된 요소 내부의 버튼을 생성합니다.

4단계: 뷰 선택기 만들기

뷰 선택기 구성요소는 특정 뷰의 ID를 가져오는 데 사용할 수 있으므로 이에 대한 보고서를 실행할 수 있습니다.

뷰 선택기를 만들려면 1단계에서 만든 컨테이너 참조만 있으면 됩니다.

var viewSelector = new gapi.analytics.ViewSelector({
  container: 'view-selector'
});

이렇게 하면 뷰 선택기 구성요소가 생성되지만 아직 페이지에 렌더링되지는 않습니다. 이렇게 하려면 execute()을 호출해야 합니다. 6단계에서 처리됩니다.

5단계: 타임라인 차트 만들기

Embed API는 Google 차트와 보고서 객체를 동시에 제공하는 차트 구성요소를 제공합니다. 차트 객체가 백그라운드에서 보고서를 실행하고 자동으로 결과와 함께 업데이트되므로 이렇게 하면 데이터를 표시하는 프로세스가 크게 간소화됩니다.

차트 구성요소를 만들려면 API 쿼리 매개변수와 차트 옵션을 지정해야 합니다. 차트 옵션에는 1단계에서 만든 컨테이너의 ID에 대한 참조가 있습니다.

var timeline = new gapi.analytics.googleCharts.DataChart({
  reportType: 'ga',
  query: {
    'dimensions': 'ga:date',
    'metrics': 'ga:sessions',
    'start-date': '30daysAgo',
    'end-date': 'yesterday',
  },
  chart: {
    type: 'LINE',
    container: 'timeline'
  }
});

뷰 선택기와 마찬가지로 이렇게 하면 차트 구성요소가 생성되지만 페이지에 렌더링하려면 execute()을 호출해야 합니다. 이 작업은 다음 단계에서 설명합니다.

6단계: 함께 작동하도록 구성요소 연결

Embed API 구성요소는 승인 완료, 새 뷰 선택 또는 차트가 완전히 렌더링되는 등 다양한 상황이 발생할 때 이벤트를 내보냅니다.

이 가이드의 예시 애플리케이션은 승인이 발생할 때까지 뷰 선택기를 렌더링하고 뷰 선택기에서 새 뷰가 선택될 때마다 타임라인 차트를 업데이트합니다.

gapi.analytics.auth.on('success', function(response) {
  viewSelector.execute();
});

viewSelector.on('change', function(ids) {
  var newIds = {
    query: {
      ids: ids
    }
  }
  timeline.set(newIds).execute();
});

다양한 구성요소가 내보내는 모든 이벤트의 전체 목록은 API 참조를 확인하세요.

다음 단계

이 가이드에서는 Embed API를 사용하여 기본 시각화를 만드는 방법을 안내했습니다. 자세한 내용은 API 참조를 확인하세요.