광고 측정항목으로 Core Web Vitals 필드 데이터 측정

1. 시작하기 전에

이 Codelab에서는 미리 빌드된 Google 태그 관리자 (GTM) 태그 템플릿으로 코어 웹 바이탈을 측정하고 데이터를 Google 애널리틱스 4 (GA4) 속성으로 전송하는 방법을 알아봅니다. 또한 미리 빌드된 Looker Studio 대시보드를 사용하여 코어 웹 바이탈 필드 데이터와 광고 실적 측정항목을 상호 연결하기 위해 Google Ad Manager 및 Google 애드센스에서 GA4로 데이터를 가져오는 방법을 알아봅니다.

실습할 내용

• Google 태그 관리자 컨테이너로 태그를 가져오고 설정합니다.
• GA4에서 웹페이지의 코어 웹 바이탈을 측정합니다.
• Google 태그 관리자에서 GA4 이벤트 태그를 설정합니다.
• dataLayer 및 GA4 보고에서 웹 바이탈 데이터를 살펴봅니다.
• GA4 속성을 Google Ad Manager 및 Google 애드센스와 연결합니다.
• Looker Studio 대시보드를 통해 코어 웹 바이탈과 광고 수익을 상호 연결합니다.

필요한 항목

• 편집자 액세스 권한이 있는 Google 애널리틱스 계정 및 GA4 웹 속성
• 게시 권한이 있는 Google 태그 관리자 계정 및 웹 컨테이너
• 관리자 액세스 권한이 있는 Google Ad Manager 네트워크 또는 Google 애드센스 계정
• Looker Studio 계정

2. GitHub의 태그 템플릿을 GTM에 추가

GTM 태그 템플릿을 통한 코어 웹 바이탈 측정은 web-vitals 라이브러리를 기반으로 합니다. 먼저 GTM 태그 템플릿을 다운로드합니다.

1. template.tpl 파일을 엽니다.
2. 컴퓨터에 파일을 다운로드합니다.

이제 Google 태그 관리자 계정으로 이동합니다.

1. 웹 컨테이너를 엽니다.
2. 새 작업공간을 만들고 이름 (예: '코어 웹 바이탈 측정')을 입력합니다.
3. '템플릿'으로 이동합니다.
4. '태그 템플릿' 섹션에서 '새로 만들기' 버튼을 클릭합니다.

5. 추가 작업 메뉴를 클릭하고 가져오기를 선택합니다.

6. 컴퓨터에서 이전에 다운로드한 TPL 파일을 선택합니다.
7. '저장' 버튼을 클릭합니다.

Google 태그 관리자 컨테이너에 태그 템플릿을 추가했습니다.

3. 웹 바이탈 태그 설정

1. Google 태그 관리자 작업공간에서 '태그'로 이동합니다.
2. '새로 만들기'를 클릭한 다음 '태그 구성'을 클릭하고 '맞춤' 섹션에서 '웹 바이탈' 태그를 선택하여 웹 바이탈 태그를 추가합니다.
3. 다음 단계는 다양한 설정을 구성하는 것입니다. 모든 설정은 GitHub 저장소에 설명되어 있습니다. 이 Codelab과 최종 대시보드가 작동하려면 다음 설정으로 충분합니다.

4. 페이지 조회 트리거(예: '모든 페이지' 트리거) 중 하나를 적용합니다.
5. 필요한 경우 트리거 예외도 추가합니다.
6. 태그 이름을 '코어 웹 바이탈 - 모든 페이지'로 지정하고 저장합니다.

4. dataLayer에서 웹 바이탈 데이터 살펴보기

태그가 작동하는지 확인하려면 Google 태그 관리자의 미리보기 모드로 전환합니다. Tag Assistant가 열리고 설정을 미리 보고 디버그할 URL을 묻습니다. Google 태그 관리자 컨테이너가 구현된 페이지의 URL을 제공하고 '연결'을 클릭합니다. 제공된 URL이 포함된 별도의 탭이 열립니다.

1. 스크롤하고 요소 또는 공백을 클릭하여 페이지와 상호작용합니다.
2. 그런 다음 Tag Assistant 및 Google 태그 관리자의 미리보기 모드가 있는 탭으로 다시 전환합니다.
3. 왼쪽에 dataLayer로 푸시된 다양한 이벤트가 표시됩니다.
4. 먼저 선택한 페이지 조회 트리거에서 웹 바이탈 태그가 실행되었는지 확인해야 합니다.

5. 또한 세 개의 'web_vitals' 이벤트가 표시됩니다. 각 이벤트는 코어 웹 바이탈(LCP, INP, CLS) 중 하나를 나타냅니다.

6. 첫 번째 이벤트를 클릭하고 오른쪽에 있는 'API 호출' 탭을 엽니다. 여기에서 태그 템플릿에서 dataLayer로 푸시된 데이터를 확인할 수 있습니다.

7. 'web_vitals' 이벤트의 다른 항목도 확인합니다. 다양한 데이터 유형의 참조로 web-vitals.js 문서를 사용합니다.

5. 웹 바이탈 데이터를 GA4로 전송

dataLayer에서 코어 웹 바이탈 데이터를 가져와 GA4로 전송하려면 다음 단계를 따르세요.

• GA4 태그의 트리거 만들기
• dataLayer에서 데이터를 가져오는 변수 만들기
• GA4 이벤트 태그 만들기

트리거 만들기

1. Google 태그 관리자 작업공간에서 '트리거'로 이동합니다.
2. '새로 만들기'를 클릭한 다음 '트리거 구성'을 클릭하고 '기타' 섹션에서 '맞춤 이벤트'를 선택하여 새 트리거를 추가합니다.
3. 이벤트 이름 필드에 'web_vitals'를 설정하고 트리거 이름을 지정한 후 저장합니다.

dataLayer 변수 만들기

1. Google 태그 관리자 작업공간에서 '변수'로 이동합니다.
2. '데이터 영역 변수' 유형에서 새 사용자 정의 변수를 만듭니다.
3. 데이터 영역 변수 이름 필드에 'webVitalsData.name'을 설정하고 변수 이름 (예: 'DLV - webVitalsData.name')을 지정한 후 저장합니다.

4. 다른 4개의 필수 데이터 영역 변수에 대해 이러한 단계를 반복합니다. 'webVitalsData.value'를 만듭니다.

5. 이름 필드 'webVitalsData.id'로 다른 변수를 만듭니다.

6. 'webVitalsData.rating'을 만듭니다.

7. 'webVitalsData.delta'를 만듭니다.

8. 다음과 같은 사용자 정의 dataLayer 변수가 생성됩니다.

GA4 이벤트 태그 만들기

GA4 이벤트 태그를 만들기 전에 Google 태그가 이미 설정되어 있는지 확인하세요.

1. Google 태그 관리자 작업공간에서 '태그'로 이동합니다.
2. '새로 만들기'를 클릭한 다음 '태그 구성'을 클릭하고 'Google 애널리틱스' 섹션에서 'Google 애널리틱스: GA4 이벤트' 태그를 선택하여 GA4 이벤트 태그를 추가합니다.
3. 해당 필드에 측정 ID를 입력합니다.

4. '이벤트 이름' 입력란에서 이전에 만든 단계의 dataLayer 변수 'DLV - webVitalsData.name'을 선택합니다.

5. 스크린샷에 표시된 대로 다른 dataLayer 변수를 이벤트 매개변수로 추가합니다. 또한 코어 웹 바이탈 이벤트를 그룹화하기 위해 'Web Vitals'와 같은 값을 사용하여 'event_category' 매개변수를 추가해야 합니다.

6. 이러한 이벤트 매개변수를 맞춤 측정기준으로 등록합니다. GA4 UI에서
7. GA4 설정 요구사항에 따라 추가 설정을 적용합니다.
8. 'web_vitals' 맞춤 이벤트를 GA4 태그의 트리거로 설정합니다.
9. 필요한 경우 트리거 예외도 추가합니다.

6. GA4에서 데이터 확인

GA4로의 데이터 흐름을 확인하려면 Google 태그 관리자의 미리보기 모드로 다시 전환합니다. Tag Assistant에 URL을 제공하고 '연결'을 클릭합니다.

1. 스크롤하고 요소 또는 공백을 클릭하여 페이지와 상호작용합니다.
2. 그런 다음 Tag Assistant 및 Google 태그 관리자의 미리보기 모드가 있는 탭으로 다시 전환합니다.
3. 왼쪽에서 각 'web_vitals' 항목을 클릭하고 GA4 코어 웹 바이탈 태그가 실행되는지 확인합니다.

4. 카드를 클릭하여 GA4 태그를 열고 dataLayer에서 데이터가 올바르게 가져오는지 확인합니다. 변수를 값으로 표시해야 합니다.

5. 이제 GA4 속성으로 전환하고 실시간 보고서를 엽니다.
6. '이벤트 이름별 이벤트 수' 카드에서 코어 웹 바이탈 이벤트가 성공적으로 수집되었는지 확인할 수 있습니다.

7. 실시간 보고서에서 많은 양의 데이터가 처리되는 경우 이벤트를 쉽게 식별할 수 없을 수 있습니다. 이 경우 특정 기기의 데이터를 볼 수 있는 debugview 보고서를 사용합니다.

7. 설정 게시

설정을 성공적으로 테스트한 후 작업공간을 게시할 차례입니다.

1. Google 태그 관리자 작업공간을 엽니다.
2. UI 내 오른쪽 상단에서 '제출'을 클릭합니다.
3. 버전 이름과 버전 설명을 제공하고 '게시'를 클릭하여 설정을 라이브로 푸시합니다.

8. GA4를 Google Ad Manager 또는 Google 애드센스와 연결

GA4에서 코어 웹 바이탈 데이터를 수집한 후 대시보드가 작동하려면 광고 관련 측정항목도 GA4에서 사용할 수 있어야 합니다. Google Ad Manager와 Google 애드센스 중 하나 또는 둘 다 GA4와 연결합니다. 연결하려면 GA4에서 편집자 (또는 그 이상의) 권한이 있어야 하고 Google Ad Manager 및 Google 애드센스에서 관리자 권한이 있어야 합니다.

GA4를 Google Ad Manager와 연결

1. Google Ad Manager 네트워크로 이동합니다.
2. '관리' -> '전체 설정' -> '네트워크 설정'을 클릭합니다.
3. '보고서 설정' 섹션에서 'Ad Manager 보고서의 Google 애널리틱스 4 속성 보고서'를 사용 설정합니다.

4. 이용약관을 검토하고 '확인'을 클릭합니다.
5. 업데이트를 저장합니다.
6. '관리' -> '연결된 계정' -> 'Google 애널리틱스 4'로 이동합니다.
7. '새 Google 애널리틱스 4 속성 링크'를 클릭합니다.
8. 연결할 GA4 속성을 찾아 선택합니다.
9. '저장'을 클릭하면 완료됩니다.

GA4를 Google 애드센스와 연결

1. Google 애드센스 계정으로 이동합니다.
2. '계정' -> '액세스 및 승인' -> 'Google 애널리틱스 통합'을 클릭합니다.
3. '+새 링크'를 클릭합니다.

4. 연결할 GA4 속성을 찾아 선택합니다.
5. '링크 만들기'를 클릭합니다.

9. Looker Studio로 데이터 시각화

광고 측정항목과 함께 코어 웹 바이탈 데이터를 시각적으로 표시하려면 이 단계에서 Looker Studio 대시보드를 설정해야 합니다. 다음 단계에 따라 코어 웹 바이탈과 광고 수익을 상호 연결하세요.

1. 이 Looker Studio 대시보드 템플릿을 엽니다.
2. 대시보드를 복사합니다.
3. 드롭다운 목록에서 GA4 속성을 선택하여 데이터 소스를 업데이트합니다.
4. 완료

대시보드가 작동하고 데이터를 올바르게 표시하려면 데이터가 이 Codelab의 구문 및 이름 지정 규칙을 사용해야 합니다.

대시보드의 첫 번째 페이지에는 코어 웹 바이탈 실적의 기록 보기가 표시됩니다.

두 번째 페이지에서는 코어 웹 바이탈을 Google Ad Manager 또는 Google 애드센스의 광고 수익과 상호 연결할 수 있습니다.

세 번째 페이지에서는 광고 관련 측정항목과 함께 페이지 경로 수준에서 코어 웹 바이탈 실적을 분석할 수 있습니다.

10. 결론

축하합니다. GA4와 Google Ad Manager 및 Google 애드센스의 광고 실적 측정항목을 사용하여 코어 웹 바이탈을 측정하고 보고하는 방법을 알아보았습니다.

자세히 알아보기

• Google 도구를 사용하여 코어 웹 바이탈과 광고 수익 상호 연결
• 페이지 속도에 영향을 주지 않고 광고를 효과적으로 로드
• 최대 콘텐츠 렌더링 시간 최적화
• 레이아웃 변경 횟수 최적화
• 다음 페인트에 대한 상호작용 최적화