Google 태그 관리자는 데이터 영역과 함께 배포될 때 가장 효과적입니다. 데이터 영역이란 웹사이트에서 태그 관리자 컨테이너로 정보를 전달할 때 사용되는 자바스크립트 개체를 말합니다. 이 정보는 태그 구성 시 변수를 채우고 트리거를 활성화하는 데 사용할 수 있습니다.
태그 관리자는 변수, 거래 정보, 페이지 카테고리 및 페이지 곳곳에 존재하는 기타 중요 신호를 참조하는 대신 데이터 영역 소스 코드에 있는 정보를 쉽게 참조하도록 설계되었습니다. 데이터 영역은 변수를 비롯한 연결된 값을 사용해 구현되기 때문에 태그를 실행해야 할 때 변수와 값을 바로 사용할 수 있습니다.
웹사이트 또는 모바일 앱이 태그 관리자 및 데이터 영역과 호환되도록 설정하려면 다음과 같이 데이터 영역이 처리해야 할 정보 카테고리에 대해서 생각해볼 필요가 있습니다.
- 제품 데이터: 제품 이름, 가격, 카테고리
- 마케팅 캠페인 정보: 트래픽 소스, 매체
- 거래 데이터: 장바구니 금액, 체크아웃 날짜
- 고객 정보: 신규 또는 재방문 고객
데이터 영역 변수 만들기
데이터 영역 변수는 태그 관리자가 데이터 영역 구현에서 값을 읽어 와서 태그, 트리거 및 기타 변수에 전달할 수 있는 방법입니다. 데이터 영역 개체는 키-값 쌍 목록으로 구성됩니다. 여기에서 키는 책의 카테고리, 제목, 저자와 같은 사물 카테고리입니다. 각 키는 값이 다를 수 있습니다.책 제목의 키 값은 'Ulysses', 'War in Peace', 'A Brief History of Time' 등이 될 수 있습니다.
웹페이지에 데이터 영역 코드 추가
데이터 영역을 설정하려면 개발자에게 의뢰하여 웹페이지에서 다음의 코드 스니펫을 컨테이너 스니펫 위에 있는 <head> 섹션에 추가하세요.
window.dataLayer = window.dataLayer || [];
</script>dataLayer.push() 명령어를 사용하여 데이터 영역에 정보를 추가하세요.
'bookCategory': 'fiction',
'bookTitle': 'Cien años de soledad',
'bookAuthor': 'Gabriel García Márquez'
});">도서 세부정보</a>
데이터 영역 구현에 대해 자세히 알아보려면 개발자 문서를 참조하세요.
데이터 영역 변수 설정
작업할 키가 모두 있다면 이제 데이터 영역 변수를 만들 수 있습니다.
- 변수를 클릭합니다.
- 사용자 정의 변수 아래에 있는 새로 만들기를 클릭합니다.
- 변수 구성을 클릭하고 데이터 영역 변수를 변수 유형으로 선택합니다.
- 데이터 영역 변수 이름 필드에 코드에 작성된 그대로 정확하게 키를 입력합니다(예: book title이 아닌 bookTitle.)
- 대부분의 경우 데이터 영역 버전을 기본값인 버전 2로 그대로 두어야 합니다. 자세히 알아보기
- 변수를 저장합니다.
- 태그 관리자에서 변수로 사용하고자 하는 모든 데이터 영역 키에 대해 이러한 단계를 반복합니다.
- 컨테이너를 게시합니다.
데이터 영역 정보 처리 방식
태그 관리자에 컨테이너가 로드되면 큐에 추가된 모든 [데이터 영역 푸시 메시지]가 처리되기 시작합니다. 태그 관리자는 선입 선출 방식으로 데이터 영역 이벤트를 처리합니다. 각 메시지는 한 번에 하나씩 처리됩니다. 메시지가 이벤트인 경우 다음 메시지로 넘어가기 전에 트리거 조건이 충족되는 태그가 실행됩니다.
페이지, 맞춤 템플릿 또는 맞춤 HTML 태그의 코드에서 gtag() 또는 dataLayer.push() 호출이 실행되는 경우 관련 메시지는 대기 중인 다른 모든 메시지가 평가된 후 처리되도록 큐에 추가됩니다. 즉, 업데이트된 데이터 영역 값이 다음 이벤트에 사용된다는 보장은 없습니다. 이러한 경우를 처리하려면 데이터가 데이터 영역으로 푸시될 때 메시지에 이벤트 이름을 추가한 다음 맞춤 이벤트 트리거로 해당 이벤트 이름을 수신합니다.