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

1. 시작하기 전에

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

실습할 내용

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

필요한 항목

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

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

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

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

이제 Google 태그 관리자 계정으로 이동하세요.

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

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

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

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

3. 웹 바이탈 태그 설정

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

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

4. dataLayer에서 Web Vitals 데이터 살펴보기

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

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

5. 세 개의 'web_vitals'도 표시됩니다. 이벤트 각각은 LCP, INP, CLS라는 하나의 Core Web Vitals를 나타냅니다.

6. 첫 번째 항목을 클릭하고 오른쪽에서 'API 호출'을 엽니다. 태그 템플릿에서 dataLayer로 푸시된 데이터를 볼 수 있습니다.

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

5. GA4로 Web Vitals 데이터 보내기

dataLayer에서 Core Web Vitals 데이터를 가져와 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. '새로 만들기', '태그 구성'을 차례로 클릭하여 GA4 이벤트 태그를 추가합니다. 'Google 애널리틱스: GA4 이벤트'를 선택합니다 'Google 애널리틱스' 태그의 섹션으로 이동합니다.
3. 해당 입력란에 측정 ID를 입력합니다.

4. '이벤트 이름' 입력 필드에서 dataLayer 변수 'DLV - webVitalsData.name'을 선택합니다. 삭제할 수 있습니다

5. 스크린샷과 같이 다른 dataLayer 변수를 이벤트 매개변수로 추가합니다. 또한 'event_category' 매개변수를 추가해야 합니다. '웹 바이탈'과 같은 값으로 Core Web Vitals 이벤트를 그룹화합니다

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 Core Web Vitals 태그가 실행되는지 확인합니다.

4. 확인할 카드를 클릭하여 GA4 태그를 엽니다. 데이터가 dataLayer에서 올바르게 추출되었는지 확인합니다. 변수를 값으로 표시해야 합니다.

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

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

7. 설정 게시

설정을 성공적으로 테스트한 후에는 작업공간을 게시해야 합니다.

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

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

GA4에서 Core Web Vitals 데이터를 수집한 후 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로 데이터 시각화

Core Web Vitals 데이터와 광고 측정항목을 시각적으로 확인하려면 이 단계에서 Looker Studio 대시보드를 설정해야 합니다. Core Web Vitals와 광고 수익을 연결하려면 다음 단계를 따르세요.

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

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

대시보드 1페이지에는 Core Web Vitals 성능에 대한 과거 내역이 표시됩니다.

두 번째 페이지에서는 Core Web Vitals를 Google Ad Manager 또는 Google 애드센스의 광고 수익과 연결할 수 있습니다.

세 번째 페이지에서는 광고 관련 측정항목과 함께 페이지 경로 수준의 Core Web Vitals 실적을 분석할 수 있습니다.

10. 결론

축하합니다. GA4로 코어 웹 바이탈을 측정하고 보고하는 방법과 Google Ad Manager 및 Google 애드센스의 광고 실적 측정항목을 배웠습니다.

자세히 알아보기

• 페이지 속도에 영향을 주지 않으면서 광고를 효과적으로 로드하기
• 최대 콘텐츠 페인트 최적화
• 누적 레이아웃 변경 최적화하기
• 다음 페인트에 대한 상호작용 최적화