이 기능은 공개 베타의 일부이며 변경될 수 있습니다.
다음은 웹사이트에서 사용자 제공 데이터를 식별하고 Google 태그 관리자에 해당 데이터를 입력하려는 관리자 및 편집자를 위한 안내입니다.
개요
가입 페이지, 리드 생성 페이지, 결제 페이지 등 사용자 제공 데이터를 수집하는 모든 페이지의 코드를 업데이트해야 합니다. 세션 내에서 데이터를 두 번 이상 전송하여 데이터가 애널리틱스로 전송되도록 할 수 있습니다.
시작하기 전에
이 안내에서는 사용자가 다음 사항을 충족했다고 가정합니다.
- 웹사이트의 태그 관리자 컨테이너에 대한 액세스 권한 보유
- 사용자 제공 데이터 수집을 활성화했고 사용자 제공 데이터 기능을 허용함
- 태그 관리자 컨테이너에서 Google 애널리틱스: GA4 이벤트 태그 설정하기
안내
- Google 태그 관리자에 로그인합니다.
- 작업공간 탭에서 왼쪽에 있는 태그를 클릭합니다.
- 고객 데이터를 수집하는 Google 애널리틱스: GA4 이벤트 태그를 엽니다.
- 웹사이트의 사용자 제공 데이터 포함을 선택합니다.
- 사용자 데이터 드롭다운 메뉴에서 사용자 제공 데이터 변수를 선택하거나 만듭니다.
- 사용자 제공 데이터 변수에서 수동 구성을 선택합니다.
- 각 필드에 대해 드롭다운 메뉴를 펼치고 변수를 선택합니다.
- 데이터 필드의 변수를 만드는 경우 다음 단계를 완료합니다.
- 변수 구성 > DOM 요소를 클릭합니다.
- 상단에 변수 이름을 입력합니다.
- 선택 방법 필드에서 CSS 선택자를 선택합니다.
- 요소 선택 도구 필드에 고객 데이터를 참조하는 CSS 선택자를 입력합니다. 사용자 제공 데이터 필드의 CSS 선택자를 식별하는 방법 알아보기
- 속성 이름 필드는 비워둡니다.
- 잠재적인 설정 문제를 방지하려면 값 형식 지정 필드를 건너뜁니다.
- DOM 요소 변수를 저장합니다.
- 수집하려는 각 필드에 대해 이 단계를 반복합니다.
- 사용자 제공 데이터 변수에서 값 형식 지정 필드를 건너뜁니다.
- 이벤트 태그를 저장합니다.
- 오른쪽 상단에서 제출을 클릭하여 변경사항을 게시합니다.
사용자 제공 데이터 필드의 CSS 선택자 확인
필드에 입력할 CSS 선택자를 확인하려면 각 필드에 대해 다음 단계를 완료하세요. 코드에 이미 해싱되지 않은 변수가 존재하는 경우 새 CSS 변수를 만드는 대신 이러한 변수를 선택할 수 있습니다. 설정할 필드에 대해 자세히 알아보세요.
참고: JavaScript 변수를 사용 중이라면 개발자에게 이러한 필드에 어떤 변수를 추가해야 하는지 물어보는 것이 가장 쉬울 수 있습니다. CSS 선택자를 사용하는 경우 아래 단계를 따르면 됩니다.
- Google Chrome 브라우저 창을 엽니다.
- Google 태그 관리자는 열어 둔 상태에서 웹사이트로 이동합니다.
- Google 애널리틱스로 전송할 고객 데이터를 확인합니다. 예를 들어 이메일 주소를 전송하려면 페이지에서 이메일 주소가 있는 위치를 파악합니다.
- 필드를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. 예를 들어 이메일 주소를 캡처하려는 경우 이메일 주소를 마우스 오른쪽 버튼으로 클릭해야 합니다.
- Chrome 개발자 도구 페이지에 코드 일부가 강조표시됩니다. 이 코드는 고객 데이터의 CSS 선택자를 추출해야 하는 페이지 요소입니다.
- 강조표시된 코드 위로 마우스를 가져간 다음 오른쪽 버튼으로 클릭합니다.
- '복사'가 나올 때까지 아래로 스크롤한 다음 선택자 복사를 선택합니다.
- 복사한 텍스트를 Google 애널리틱스 또는 태그 관리자의 해당 필드에 붙여넣습니다.
- 복사된 텍스트는 다음과 같이 표시됩니다.
tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail
- 복사된 텍스트는 다음과 같이 표시됩니다.
Next steps
Validate that user-provided data collection is set up correctly. Show me how.