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

Tier: Ultimate Offering: GitLab.com, Self-managed Status: Experiment

사용자가 귀하의 웹사이트나 애플리케이션과 상호작용하는 방식을 이해하는 것은 데이터 기반 결정을 내리는 데 중요합니다.

귀하의 팀은 사용자가 가장 많이 사용하고 가장 적게 사용하는 기능을 파악하여 시간을 효과적으로 어디에 어떻게 사용할지 결정할 수 있습니다.

다음 단계를 따라 예시 웹사이트 프로젝트를 설정하고, 프로젝트에 제품 분석을 온보딩하고, 웹사이트를 구성하여 이벤트 수집을 시작하며, 사용자 행동을 이해하기 위해 프로젝트 수준의 분석 대시보드를 사용하는 방법을 배우세요.

우리가 할 일의 개요는 다음과 같습니다:

템플릿에서 프로젝트 생성
제품 분석으로 프로젝트 온보딩
추적 스니펫으로 웹사이트 구성
사용 데이터 수집
대시보드 보기

시작하기 전에

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

제품 분석 활성화 귀하의 인스턴스를 위해.
귀하가 프로젝트를 생성할 그룹에 대한 소유자 역할을 가지고 있어야 합니다.

템플릿에서 프로젝트 생성

먼저, 그룹에 프로젝트를 생성해야 합니다.

GitLab은 프로젝트 템플릿을 제공하여 다양한 사용 사례에 필요한 파일로 프로젝트를 설정하는 데 더 쉽게 만듭니다.

여기서 귀하는 일반 HTML 웹사이트를 위한 프로젝트를 생성할 것입니다.

프로젝트를 생성하려면:

왼쪽 사이드바의 맨 위에서 새로 만들기() 및 새 프로젝트/저장소를 선택합니다.
템플릿에서 생성을 선택합니다.
Pages/Plain HTML 템플릿을 선택합니다.
프로젝트 이름 텍스트 상자에 이름을 입력합니다(예: My website).
프로젝트 URL 드롭다운 목록에서 프로젝트를 생성할 그룹을 선택합니다.
프로젝트 슬러그 텍스트 상자에 프로젝트의 슬러그를 입력합니다(예: my-website).
선택 사항. 프로젝트 설명 텍스트 상자에 프로젝트 설명을 입력합니다.
예를 들어, 제품 분석을 가진 일반 HTML 웹사이트입니다. 이 설명은 언제든지 추가하거나 수정할 수 있습니다.
가시성 수준에서 프로젝트에 대한 원하는 수준을 선택합니다.
프로젝트를 그룹 내에서 생성하는 경우 프로젝트의 가시성 설정은 반드시 부모 그룹의 가시성보다 제한적이어야 합니다.
프로젝트 생성을 선택합니다.

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

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

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

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

프로젝트에서 분석 > 분석 대시보드를 선택합니다.
제품 분석 항목을 찾아 설정을 선택합니다.
제품 분석 설정을 선택합니다.
인스턴스 생성이 완료될 때까지 기다립니다.
HTML 스크립트 설정 스니펫을 복사합니다. 다음 단계에서 필요합니다.

이제 귀하의 프로젝트가 온보딩되어 애플리케이션이 이벤트를 전송할 준비가 되었습니다.

웹사이트 구성

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

새 웹사이트를 구성하려면:

프로젝트에서 코드 > 저장소를 선택합니다.
편집 > 웹 IDE를 선택합니다.
왼쪽 웹 IDE 툴바에서 파일 탐색기를 선택하고 public/index.html 파일을 엽니다.

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

index.html 파일의 코드는 다음과 같아야 합니다(여기서 appId 및 host는 온보딩 섹션에 제공된 값을 가져야 합니다):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="GitLab Pages">
    <title>GitLab Pages를 이용한 일반 HTML 사이트</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="navbar">
      <a href="https://pages.gitlab.io/plain-html/">Plain HTML 예제</a>
      <a href="https://gitlab.com/pages/plain-html/">저장소</a>
      <a href="https://gitlab.com/pages/">기타 예제</a>
    </div>

    <h1>안녕하세요, 세계!</h1>

    <p>
      이것은 GitLab Pages에서 제공하는 간단한 일반 HTML 웹사이트로, 복잡한 정적 사이트 생성기 없이 제작되었습니다.
    </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>

왼쪽 웹 IDE 툴바에서 소스 제어를 선택합니다.
GitLab 제품 분석 추적 스니펫 추가와 같은 커밋 메시지를 입력합니다.
커밋을 선택하고, 새 브랜치를 생성할지 계속할지 묻는 메시지가 나타날 경우 계속을 선택합니다. 그런 다음 웹 IDE를 닫을 수 있습니다.
프로젝트에서 빌드 > 파이프라인을 선택합니다.
최근 커밋으로 인해 파이프라인이 트리거됩니다. 완료되기를 기다리고 업데이트된 웹사이트가 배포되기를 기다립니다.

사용 데이터 수집

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

프로젝트에서 배포 > 페이지를 선택합니다.
웹사이트를 열기 위해 페이지 접근에서 고유한 URL을 선택합니다.
페이지 뷰 이벤트를 수집하기 위해 페이지를 몇 번 새로 고침합니다.

대시보드 보기

GitLab은 기본적으로 두 개의 제품 분석 대시보드를 제공합니다: 청중과 행동.

이 대시보드는 프로젝트가 이벤트를 몇 개 수신한 후에 사용할 수 있습니다.

이 대시보드를 보려면:

프로젝트에서 분석 > 대시보드를 선택합니다.
사용 가능한 대시보드 목록에서 청중 또는 행동을 선택합니다.

그게 전부입니다! 이제 여러분은 사용자 행동을 이해하고 팀이 보다 효율적으로 작업할 수 있도록 데이터 수집 및 시각화를 지원하는 제품 분석이 포함된 웹사이트 프로젝트를 갖추게 되었습니다.

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

시작하기 전에

템플릿에서 프로젝트 생성

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

웹사이트 구성

사용 데이터 수집

대시보드 보기

도움말

기능 사용 가능성과 제품 평가판

도움받기