Google 태그 관리자-데이터 영역

데이터 영역은 Google 태그 관리자로 전달하고 처리 할 모든 정보를 보유한 개체로 볼 수 있습니다. 이것은 약간의 기술적 개념입니다. 데이터 영역이라는 용어는 웹 사이트 / 블로그와 태그 관리자간에 데이터를 저장, 처리 및 전달하기 위해 Google 태그 관리자에서 사용하는 데이터 구조를 나타내는 데 사용됩니다.

더 자세히 설명하기 위해 데이터 계층은 방문자에 대한 분석 도구에 데이터를 제공 할 수 있습니다. 정의에 대한 또 다른 관점을 취하면 데이터 계층은 실제로 디지털 컨텍스트의 각 하위 집합에 대한 비즈니스 요구 사항 및 목표 목록입니다.

전자 상거래 웹 사이트의 예를 들어 보겠습니다. 비즈니스 요구 사항에는 다음이 포함될 수 있습니다.

• 구매 한 항목에 대한 세부 정보가 포함 된 거래 정보

• 구매 한 사람에 관한 방문자 데이터

• 구매 장소 및 시간 등 구매에 대한 기타 세부 정보

• 마지막으로 방문자가 이메일을 구독했는지 여부와 같은 기타 요인에 대한 정보

따라서 간단히 말해서 데이터 계층은 필요에 따라 다양한 도구 / 사용자 / 이해 관계자가 사용할 수있는 정보를 전달합니다.

Google 태그 관리자에서 dataLayer는 자바 스크립트 배열입니다. 키-값 쌍으로 구성됩니다. 다음은 데이터 유형이 다른 dataLayer의 빠른 예입니다.

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

여기에는 객체 배열 (제품), 숫자 값 (가격), 문자열 배열 (상점), 날짜 객체 및 객체 (이름)와 같은 다양한 값이 있습니다.

웹 사이트에 Google 태그 관리자 컨테이너 코드를 삽입하면 데이터 영역이 자동으로 생성됩니다.

그 자체로 데이터 레이어는 처음에 이해하기에는 꽤 복잡한 개념입니다. 이 장에서는 데이터 영역과 상호 작용하는 방법에 대한 자세한 정보를 제공합니다.

데이터 영역 이벤트

데이터 영역 이벤트의 빠른 예는 자동 GTM 리스너로 쉽게 추적 할 수없는 뉴스 레터 가입 양식입니다. 웹 사이트 개발자는 새 구독자가 웹 사이트에 이메일을 입력하면 데이터 영역 이벤트를 푸시하도록 지원할 수 있습니다. 이 이벤트의 코드는 다음과 같아야합니다.

push({‘event’: ‘new_subscriber’});

필요한 경우 개발자에게 양식 위치와 같은 추가 정보를 요청할 수 있습니다. 웹 사이트에 둘 이상의 양식이있는 경우 필요합니다. 다음 코드를 사용하여 얻을 수 있습니다.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

또한 Google 태그 관리자는 기본적으로 특정 값 집합을 웹 애플리케이션의 데이터 영역에 푸시합니다. 이 값은-

• gtm.js − Google 태그 관리자를 실행할 준비가되는 즉시 데이터 영역으로 푸시됩니다.

• gtm.dom − DOM이 준비되면 데이터 레이어로 푸시 됨

• gtm.load − 창이 완전히로드되면 데이터 레이어로 푸시 됨

데이터 영역 검사

지금까지 이미 알고 있듯이 화면의 상호 작용의 결과로 생성되는 특정 이벤트가 있습니다.

예를 들어,이 간단한 페이지로드 이벤트를 고려해 보겠습니다. 이벤트를 보려면 디버거를 실행해야합니다. 디버거가 실행 중이면 (미리보기 모드에서) 블로그를 방문하십시오. 왼쪽 하단의 요약 창을 보면 다음과 같은 내용이 표시됩니다.

Step 1 −로드 된 창을 클릭 한 다음 데이터 레이어를 클릭합니다.

데이터 영역 탭에 표시되는 정보는 창로드 이벤트에 대한 것입니다.

다음과 같이 표시됩니다. – {event : 'gtm.load', gtm.uniqueEventId : 3}

또한 자세히 살펴보고 싶다면 Chrome의 콘솔 탭에서 지원을 받아야합니다. Chrome 디버거를 올바른 방식으로 사용하는 방법을 알면 데이터 영역 검사가 쉬워집니다.

Step 2− 블로그에있을 때 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다. 표시된 컨텍스트 메뉴에서 검사를 클릭합니다. 패널은 요소 탭이 활성화 된 상태로 화면 오른쪽에 표시됩니다.

Step 3− 콘솔을 클릭합니다. 콘솔 모드에서 왼쪽 상단 모서리 아이콘을 클릭하여 표시된 모든 메시지를 지 웁니다. 참조를 위해 다음 스크린 샷을 참조하십시오.

Step 4− 이전 메시지에 대한 창이 지워지면 dataLayer를 입력하고 L의 대문자 사용이 완료되었는지 확인합니다. 이 이름은 Google 태그 관리자가 데이터 영역에 제공합니다. 그러나 개발자는 필요할 때 다른 이름을 지정할 수 있습니다.

Step 5− dataLayer 뒤에 Enter 키를 누릅니다. 다음 세부 정보가 표시됩니다.

세 개의 개체가 있으며 각 개체에는 몇 가지 정보가 포함되어 있습니다. 이제 이러한 개체는 위의 스크린 샷에 표시된 것처럼 동일하지 않을 수 있습니다. 데이터 레이어는 구성 가능하며 요구 사항에 따라 구성하는 것은 개발자가 제어 할 수 있습니다.

존재하는 값은 특정 위치 / 공간에서 사용중인 Blogger 가젯 때문입니다. 이것이 거기에 특정 정보가있는 이유입니다.

객체 1을 보면 시작된 이벤트가 – gtm.dom 임을 알 수 있습니다. 페이지를로드하는 동안 GTM에 의해 시작됩니다.

이러한 방식으로 데이터 영역을 검사하고 필요할 때 정보를 추가 할 수 있습니다.

데이터 영역의 변수

이제 데이터 영역에 익숙해 졌으므로 Google 태그 관리자 인터페이스를 사용하여 변수 중 하나를 읽어 보겠습니다.

여기에서는 데이터 영역 변수를 사용하여 이벤트를 읽어 보겠습니다.

위의 그림을 보면 변수 이벤트는 gtm.dom을 보유합니다 . GTM 인터페이스에서 변수를 만들고 Google 태그 관리자의 변수 탭에 어떻게 반영되는지 살펴 보겠습니다.

Step 1− Google 태그 관리자 인터페이스에서 변수로 이동합니다. 사용자 정의 변수까지 아래로 스크롤합니다. NEW를 클릭합니다.

Step 2 −이 새 변수에 이름을 제공하고 varEvent라고 부르겠습니다.

Step 3 − 설정을 시작하려면 변수 유형 선택…을 클릭합니다.

Step 4 − 목록에서 데이터 계층 변수를 선택합니다.

Step 5 − 데이터 영역 변수를 선택하면 이름과 버전을 제공해야합니다.

이 이름은 Google 태그 관리자의 실제 데이터 영역에서 따온 것입니다. 앞서 언급했듯이 추적 할 변수는 이벤트입니다.

Step 6 − 데이터 영역 변수 이름에 이벤트를 입력합니다.

Step 7 − 저장을 클릭합니다.

Step 8 − 미리보기를 클릭하여 디버거에 반영된 변경 사항을 확인합니다.

Step 9− 페이지가로드되면로드 된 창을 클릭 한 다음 변수를 클릭합니다. 변수 섹션의 맨 아래로 스크롤하면 위 스크린 샷에서 강조 표시된대로 varEvent가 표시됩니다.

위의 스크린 샷에서 볼 수 있듯이 값은 gtm.load가됩니다.

이러한 방식으로 데이터 계층을 검사하고 필요에 따라 데이터 계층의 값을 캡처 할 수 있습니다.