튜토리얼: 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를 사용합니다.

새로운 웹사이트를 설정하려면:

프로젝트에서 코드 > 저장소를 선택합니다.
편집 > Web IDE를 선택합니다.
왼쪽 Web 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/">일반 HTML 예제</a>
      <a href="https://gitlab.com/pages/plain-html/">저장소</a>
      <a href="https://gitlab.com/pages/">다른 예제</a>
    </div>

    <h1>Hello World!</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>

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

사용 데이터 수집

추적이 설정된 웹사이트가 배포된 후, 이벤트가 수집됩니다.

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

대시보드 보기

GitLab은 두 가지 기본 제품 분석 대시보드인 대상 그룹(Audience)과 행동(Behavior)을 제공합니다. 이러한 대시보드는 프로젝트가 일부 이벤트를 받은 후 이용할 수 있습니다.

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

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

이것으로 끝났습니다! 이제 제품 분석이 있는 웹사이트 프로젝트가 완성되었습니다. 이것을 통해 사용자의 행동을 이해하고 팀의 작업 효율성을 높이기 위해 데이터를 수집하고 시각화할 수 있습니다.

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

시작하기 전에

템플릿을 사용하여 프로젝트 생성

제품 분석을 이용하여 프로젝트에 참여

웹사이트에 추적 스니펫 추가

사용 데이터 수집

대시보드 보기

도움말

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

도움받기