InfoGrab Docs

튜토리얼: GitLab Pages 웹사이트 프로젝트에서 제품 분석 설정

요약

사용자가 웹사이트나 애플리케이션과 어떻게 상호 작용하는지 이해하는 것은 데이터 기반 의사결정을 내리는 데 중요합니다. 예시 웹사이트 프로젝트를 설정하고, 프로젝트에 제품 분석을 온보딩하고, 이벤트 수집을 시작하도록 웹사이트를 계측하고, 프로젝트 수준 분석 대시보드를 사용하여 사용자 동작을 이해하는 방법을 따라서 배워보세요.

사용자가 웹사이트나 애플리케이션과 어떻게 상호 작용하는지 이해하는 것은 데이터 기반 의사결정을 내리는 데 중요합니다. 사용자가 가장 많이 사용하고 가장 적게 사용하는 기능을 파악하면 팀이 시간을 효과적으로 어디에 어떻게 쓸지 결정할 수 있습니다.

예시 웹사이트 프로젝트를 설정하고, 프로젝트에 제품 분석을 온보딩하고, 이벤트 수집을 시작하도록 웹사이트를 계측하고, 프로젝트 수준 분석 대시보드를 사용하여 사용자 동작을 이해하는 방법을 따라서 배워보세요.

다음 작업의 개요입니다:

  1. 템플릿에서 프로젝트 만들기
  2. 제품 분석으로 프로젝트 온보딩
  3. 추적 스니펫으로 웹사이트 계측
  4. 사용 데이터 수집
  5. 대시보드 보기

시작하기 전에#

이 튜토리얼을 따르려면 다음이 필요합니다:

템플릿에서 프로젝트 만들기#

먼저 그룹에 프로젝트를 만들어야 합니다.

GitLab은 다양한 사용 사례에 필요한 모든 파일로 프로젝트를 쉽게 설정할 수 있게 해주는 프로젝트 템플릿을 제공합니다. 여기서는 일반 HTML 웹사이트를 위한 프로젝트를 만들겠습니다.

프로젝트를 만들려면:

  1. 오른쪽 상단 모서리에서 Create new (+)와 New project/repository를 선택합니다.
  2. Create from template을 선택합니다.
  3. Pages/Plain HTML 템플릿을 선택합니다.
  4. Project name 텍스트 상자에 이름을 입력합니다(예: My website).
  5. Project URL 드롭다운 목록에서 프로젝트를 만들 그룹을 선택합니다.
  6. Project slug 텍스트 상자에 프로젝트의 슬러그를 입력합니다(예: my-website).
  7. 선택 사항. Project description 텍스트 상자에 프로젝트 설명을 입력합니다. 예를 들어 Plain HTML website with product analytics. 이 설명은 언제든지 추가하거나 편집할 수 있습니다.
  8. Visibility Level 아래에서 프로젝트의 원하는 수준을 선택합니다. 그룹에 프로젝트를 만들면 프로젝트의 가시성 설정이 상위 그룹의 가시성보다 제한적이어야 합니다.
  9. Create project를 선택합니다.

이제 일반 HTML 웹사이트에 필요한 모든 파일이 있는 프로젝트가 생겼습니다.

제품 분석으로 프로젝트 온보딩#

이벤트를 수집하고 웹사이트 사용에 대한 대시보드를 보려면 프로젝트에 제품 분석이 온보딩되어 있어야 합니다.

새 프로젝트를 제품 분석으로 온보딩하려면:

  1. 프로젝트에서 Analyze > Analytics dashboards를 선택합니다.
  2. Product analytics 항목을 찾아 Set up을 선택합니다.
  3. Set up product analytics를 선택합니다.
  4. 인스턴스가 생성을 완료할 때까지 기다립니다.
  5. HTML script setup 스니펫을 복사합니다. 다음 단계에서 필요합니다.

이제 프로젝트가 온보딩되었으며 애플리케이션이 이벤트 전송을 시작할 준비가 되었습니다.

웹사이트 계측#

사용 이벤트를 수집하여 GitLab에 전송하려면 웹사이트에 코드 스니펫을 포함해야 합니다. 애플리케이션과 통합할 여러 플랫폼 및 기술별 추적 SDK 중에서 선택할 수 있습니다. 이 예시 웹사이트에서는 Browser SDK를 사용합니다.

새 웹사이트를 계측하려면:

  1. 프로젝트에서 Code > Repository를 선택합니다.

  2. Code > Web IDE를 선택합니다.

  3. 왼쪽 Web IDE 도구 모음에서 File Explorer를 선택하고 public/index.html 파일을 엽니다.

  4. public/index.html 파일에서 닫는 </body> 태그 앞에 이전 섹션에서 복사한 스니펫을 붙여넣습니다.

    index.html 파일의 코드는 다음과 같아야 합니다(appId와 host에 온보딩 섹션에서 제공된 값이 있어야 합니다):

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="GitLab Pages">
    <title>Plain HTML site using GitLab Pages</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="navbar">
      <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
      <a href="https://gitlab.com/pages/plain-html/">Repository</a>
      <a href="https://gitlab.com/pages/">Other Examples</a>
    </div>

    <h1>Hello World!</h1>

    <p>
      This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
    </p>
    <script src="https://unpkg.com/@gitlab/application-sdk-browser/dist/gl-sdk.min.js"></script>
    <script>
      window.glClient = window.glSDK.glClientSDK({
        appId: 'YOUR_APP_ID',
        host: 'YOUR_HOST',
      });
    </script>
  </body>
</html>

  5. 왼쪽 Web IDE 도구 모음에서 Source Control을 선택합니다.

  6. Add GitLab product analytics tracking snippet과 같은 커밋 메시지를 입력합니다.

  7. Commit을 선택하고, 새 브랜치를 만들거나 계속할지 묻는 메시지가 표시되면 Continue를 선택합니다. 그런 다음 Web IDE를 닫을 수 있습니다.

  8. 프로젝트에서 Build > Pipelines를 선택합니다. 최근 커밋에서 파이프라인이 트리거됩니다. 실행을 완료하고 업데이트된 웹사이트를 배포할 때까지 기다립니다.

사용 데이터 수집#

계측된 웹사이트가 배포되면 이벤트 수집이 시작됩니다.

  1. 프로젝트에서 Deploy > Pages를 선택합니다.
  2. 웹사이트를 열려면 Access pages에서 고유한 URL을 선택합니다.
  3. 일부 페이지 뷰 이벤트를 수집하려면 페이지를 몇 번 새로 고침합니다.

대시보드 보기#

GitLab은 기본적으로 두 가지 제품 분석 대시보드(Audience 및 Behavior)를 제공합니다. 이 대시보드는 프로젝트가 일부 이벤트를 받은 후 사용할 수 있게 됩니다.

이러한 대시보드를 보려면:

  1. 프로젝트에서 Analyze > Dashboards를 선택합니다.
  2. 사용 가능한 대시보드 목록에서 Audience 또는 Behavior를 선택합니다.

완료했습니다! 이제 제품 분석이 포함된 웹사이트 프로젝트가 생겼습니다. 이를 통해 데이터를 수집하고 시각화하여 사용자의 동작을 이해하고 팀이 더 효율적으로 작업할 수 있게 됩니다.

튜토리얼: GitLab Pages 웹사이트 프로젝트에서 제품 분석 설정

Tier: Ultimate
Offering: GitLab.com, GitLab Self-Managed
원문 보기
요약

사용자가 웹사이트나 애플리케이션과 어떻게 상호 작용하는지 이해하는 것은 데이터 기반 의사결정을 내리는 데 중요합니다. 예시 웹사이트 프로젝트를 설정하고, 프로젝트에 제품 분석을 온보딩하고, 이벤트 수집을 시작하도록 웹사이트를 계측하고, 프로젝트 수준 분석 대시보드를 사용하여 사용자 동작을 이해하는 방법을 따라서 배워보세요.

사용자가 웹사이트나 애플리케이션과 어떻게 상호 작용하는지 이해하는 것은 데이터 기반 의사결정을 내리는 데 중요합니다. 사용자가 가장 많이 사용하고 가장 적게 사용하는 기능을 파악하면 팀이 시간을 효과적으로 어디에 어떻게 쓸지 결정할 수 있습니다.

예시 웹사이트 프로젝트를 설정하고, 프로젝트에 제품 분석을 온보딩하고, 이벤트 수집을 시작하도록 웹사이트를 계측하고, 프로젝트 수준 분석 대시보드를 사용하여 사용자 동작을 이해하는 방법을 따라서 배워보세요.

다음 작업의 개요입니다:

  1. 템플릿에서 프로젝트 만들기
  2. 제품 분석으로 프로젝트 온보딩
  3. 추적 스니펫으로 웹사이트 계측
  4. 사용 데이터 수집
  5. 대시보드 보기

시작하기 전에#

이 튜토리얼을 따르려면 다음이 필요합니다:

템플릿에서 프로젝트 만들기#

먼저 그룹에 프로젝트를 만들어야 합니다.

GitLab은 다양한 사용 사례에 필요한 모든 파일로 프로젝트를 쉽게 설정할 수 있게 해주는 프로젝트 템플릿을 제공합니다. 여기서는 일반 HTML 웹사이트를 위한 프로젝트를 만들겠습니다.

프로젝트를 만들려면:

  1. 오른쪽 상단 모서리에서 Create new (+)와 New project/repository를 선택합니다.
  2. Create from template을 선택합니다.
  3. Pages/Plain HTML 템플릿을 선택합니다.
  4. Project name 텍스트 상자에 이름을 입력합니다(예: My website).
  5. Project URL 드롭다운 목록에서 프로젝트를 만들 그룹을 선택합니다.
  6. Project slug 텍스트 상자에 프로젝트의 슬러그를 입력합니다(예: my-website).
  7. 선택 사항. Project description 텍스트 상자에 프로젝트 설명을 입력합니다. 예를 들어 Plain HTML website with product analytics. 이 설명은 언제든지 추가하거나 편집할 수 있습니다.
  8. Visibility Level 아래에서 프로젝트의 원하는 수준을 선택합니다. 그룹에 프로젝트를 만들면 프로젝트의 가시성 설정이 상위 그룹의 가시성보다 제한적이어야 합니다.
  9. Create project를 선택합니다.

이제 일반 HTML 웹사이트에 필요한 모든 파일이 있는 프로젝트가 생겼습니다.

제품 분석으로 프로젝트 온보딩#

이벤트를 수집하고 웹사이트 사용에 대한 대시보드를 보려면 프로젝트에 제품 분석이 온보딩되어 있어야 합니다.

새 프로젝트를 제품 분석으로 온보딩하려면:

  1. 프로젝트에서 Analyze > Analytics dashboards를 선택합니다.
  2. Product analytics 항목을 찾아 Set up을 선택합니다.
  3. Set up product analytics를 선택합니다.
  4. 인스턴스가 생성을 완료할 때까지 기다립니다.
  5. HTML script setup 스니펫을 복사합니다. 다음 단계에서 필요합니다.

이제 프로젝트가 온보딩되었으며 애플리케이션이 이벤트 전송을 시작할 준비가 되었습니다.

웹사이트 계측#

사용 이벤트를 수집하여 GitLab에 전송하려면 웹사이트에 코드 스니펫을 포함해야 합니다. 애플리케이션과 통합할 여러 플랫폼 및 기술별 추적 SDK 중에서 선택할 수 있습니다. 이 예시 웹사이트에서는 Browser SDK를 사용합니다.

새 웹사이트를 계측하려면:

  1. 프로젝트에서 Code > Repository를 선택합니다.

  2. Code > Web IDE를 선택합니다.

  3. 왼쪽 Web IDE 도구 모음에서 File Explorer를 선택하고 public/index.html 파일을 엽니다.

  4. public/index.html 파일에서 닫는 </body> 태그 앞에 이전 섹션에서 복사한 스니펫을 붙여넣습니다.

    index.html 파일의 코드는 다음과 같아야 합니다(appId와 host에 온보딩 섹션에서 제공된 값이 있어야 합니다):

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="GitLab Pages">
    <title>Plain HTML site using GitLab Pages</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="navbar">
      <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
      <a href="https://gitlab.com/pages/plain-html/">Repository</a>
      <a href="https://gitlab.com/pages/">Other Examples</a>
    </div>

    <h1>Hello World!</h1>

    <p>
      This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
    </p>
    <script src="https://unpkg.com/@gitlab/application-sdk-browser/dist/gl-sdk.min.js"></script>
    <script>
      window.glClient = window.glSDK.glClientSDK({
        appId: 'YOUR_APP_ID',
        host: 'YOUR_HOST',
      });
    </script>
  </body>
</html>

  5. 왼쪽 Web IDE 도구 모음에서 Source Control을 선택합니다.

  6. Add GitLab product analytics tracking snippet과 같은 커밋 메시지를 입력합니다.

  7. Commit을 선택하고, 새 브랜치를 만들거나 계속할지 묻는 메시지가 표시되면 Continue를 선택합니다. 그런 다음 Web IDE를 닫을 수 있습니다.

  8. 프로젝트에서 Build > Pipelines를 선택합니다. 최근 커밋에서 파이프라인이 트리거됩니다. 실행을 완료하고 업데이트된 웹사이트를 배포할 때까지 기다립니다.

사용 데이터 수집#

계측된 웹사이트가 배포되면 이벤트 수집이 시작됩니다.

  1. 프로젝트에서 Deploy > Pages를 선택합니다.
  2. 웹사이트를 열려면 Access pages에서 고유한 URL을 선택합니다.
  3. 일부 페이지 뷰 이벤트를 수집하려면 페이지를 몇 번 새로 고침합니다.

대시보드 보기#

GitLab은 기본적으로 두 가지 제품 분석 대시보드(Audience 및 Behavior)를 제공합니다. 이 대시보드는 프로젝트가 일부 이벤트를 받은 후 사용할 수 있게 됩니다.

이러한 대시보드를 보려면:

  1. 프로젝트에서 Analyze > Dashboards를 선택합니다.
  2. 사용 가능한 대시보드 목록에서 Audience 또는 Behavior를 선택합니다.

완료했습니다! 이제 제품 분석이 포함된 웹사이트 프로젝트가 생겼습니다. 이를 통해 데이터를 수집하고 시각화하여 사용자의 동작을 이해하고 팀이 더 효율적으로 작업할 수 있게 됩니다.