First-party data

[GA4] CSS 선택자 또는 JavaScript 변수 지정하기(gtag.js)

이 기능은 공개 베타의 일부이며 변경될 수 있습니다.

다음은 사용자 제공 데이터 수집을 설정하고 사용자 제공 데이터 기능 허용 페이지의 CSS 선택자 또는 JavaScript 변수 지정 옵션을 통해 사용자 제공 데이터를 식별하는 방법을 알아보려는 관리자 및 편집자를 위한 안내입니다.

가입 페이지, 리드 생성 페이지, 결제 페이지 등 사용자 제공 데이터를 수집하는 모든 페이지의 코드를 업데이트해야 합니다. 세션 내에서 데이터를 두 번 이상 전송하여 데이터가 애널리틱스로 전송되도록 할 수 있습니다.

이 안내에서는 사용자가 다음 사항을 충족했다고 가정합니다.

필드에 입력할 CSS 선택자를 확인하려면 각 필드에 대해 다음 단계를 완료하세요. 코드에 이미 해싱되지 않은 변수가 존재하는 경우 새 CSS 변수를 만드는 대신 이러한 변수를 선택할 수 있습니다. 설정할 필드에 대해 자세히 알아보세요.

참고: JavaScript 변수를 사용 중이라면 개발자에게 이러한 필드에 어떤 변수를 추가해야 하는지 물어보는 것이 가장 쉬울 수 있습니다. CSS 선택자를 사용하는 경우 아래 단계를 따르면 됩니다.

Google Chrome 브라우저 창을 엽니다.
Google 태그 관리자는 열어 둔 상태에서 웹사이트로 이동합니다.
Google 애널리틱스로 전송할 고객 데이터를 확인합니다. 예를 들어 이메일 주소를 전송하려면 페이지에서 이메일 주소가 있는 위치를 파악합니다.
필드를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. 예를 들어 이메일 주소를 캡처하려는 경우 이메일 주소를 마우스 오른쪽 버튼으로 클릭해야 합니다.
Chrome 개발자 도구 페이지에 코드 일부가 강조표시됩니다. 이 코드는 고객 데이터의 CSS 선택자를 추출해야 하는 페이지 요소입니다.
강조표시된 코드 위로 마우스를 가져간 다음 오른쪽 버튼으로 클릭합니다.
'복사'가 나올 때까지 아래로 스크롤한 다음 선택자 복사를 선택합니다.
복사한 텍스트를 Google 애널리틱스 또는 태그 관리자의 해당 필드에 붙여넣습니다.
- 복사된 텍스트는 다음과 같이 표시됩니다.
  tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail

Validate that user-provided data collection is set up correctly. Show me how.

어떻게 하면 개선할 수 있을까요?