안녕하세요, 그로스 마케팅 파트너 허들러스의 박희진 그로스 엔지니어입니다.
구글 태그 매니저(Google Tag Manager, 이하 GTM)를 사용하다 보면 [데이터레이어(Data Layer)]라는 용어를 자주 접하게 됩니다. GTM을 효과적으로 활용하기 위해서는 이 데이터레이어를 반드시 이해하고, 적절히 활용할 수 있어야 합니다. 이번 글에서는 데이터레이어의 정의와 그 활용 방법에 대해 알아보겠습니다.
데이터레이어란 무엇인가?
데이터레이어는 웹사이트에서 발생하는 다양한 정보를 GTM에 전달하는 중간 매개체 역할을 합니다. 만약 GTM이 웹사이트에 설치되어 있다면, 데이터레이어를 통해 여러 정보를 쉽게 활용할 수 있습니다.
구글 공식 문서에서는 데이터레이어를 웹사이트와 태그 관리자 컨테이너 사이에서 정보를 전달하는 자바스크립트 배열로 설명하고 있습니다. 이 배열을 통해 전달된 정보는 태그를 구성할 때 변수나 트리거로 사용되며, 페이지 카테고리나 거래 정보 등 중요한 데이터를 관리할 수 있도록 돕습니다. 즉, 데이터레이어는 코드에 직접 접근하지 않고도 여러 중요한 값을 쉽게 참조할 수 있는 역할을 합니다.
데이터레이어 활용 방법
사용자가 웹사이트에서 버튼을 클릭하거나 페이지를 조회할 때마다, 그 활동에 대한 데이터가 데이터레이어로 전송됩니다. GTM에서는 이를 감지하여 트리거나 변수로 활용할 수 있으며, 이 데이터를 다시 GA4와 같은 분석 도구로 전송할 수 있습니다. 또한, 특정 이벤트에 대해 동적 변수를 추가하고 싶을 때는 간단한 데이터레이어 코드를 삽입함으로써 GTM에서 이를 인식하고 활용할 수 있습니다.
데이터레이어를 활용하면 웹사이트 내에서 사용자 활동 데이터를 보다 체계적으로 수집할 수 있으며, 이를 통해 마케팅 및 분석 효율을 극대화할 수 있습니다.
데이터레이어를 사용하는 이유
데이터레이어를 사용하는 주요 이유는 두 가지입니다.
1. GTM 트리거로 감지할 수 없는 이벤트 전송
첫 번째 이유는, 구글 태그 매니저(GTM)에서 트리거로 감지할 수 없는 특정 시점의 이벤트를 구글 애널리틱스 4(GA4)로 전송해야 할 때입니다.
예를 들어, 웹사이트에서 사용자가 alert 창을 조회할 때 발생하는 이벤트를 추적하고 싶다면, GTM의 기본 트리거로는 해당 시점을 잡기가 어렵습니다. 이때 웹사이트의 소스 코드에 alert 창이 열리는 시점에 데이터레이어로 이벤트 데이터를 보내는 코드를 삽입하면 해결할 수 있습니다. 이를 통해 GTM에서 해당 이벤트를 감지하고, GA4로 데이터를 전송할 수 있게 됩니다.
2. 동적 이벤트 매개변수 활용
두 번째 이유는, 이벤트 전송 시 동적인 이벤트 매개변수를 추가하기 위해서입니다.
예를 들어, 단순히 상품 상세 페이지를 조회한 이벤트만 GA4로 보내는 것보다는, 해당 상품에 대한 상세 정보(가격, 카테고리 등)를 함께 전송하는 것이 분석에 훨씬 더 유용할 수 있습니다. 정적인 매개변수는 GTM에서 상숫값으로 쉽게 전송할 수 있지만, 동적인 매개변수는 데이터레이어를 통해 전달된 데이터를 사용해야만 GTM에서 GA4로 전송할 수 있습니다. 이를 통해 더 세밀하고 유의미한 데이터를 수집하고 분석할 수 있게 됩니다.
데이터레이어의 형태
데이터레이어는 기본적으로 단순한 배열 구조를 가지고 있습니다. 이를 통해 GTM에서 데이터를 효율적으로 처리할 수 있습니다.
데이터레이어가 초기화된 상태란, 데이터레이어가 기본적으로 빈 배열로 설정된 상태를 의미합니다. 웹사이트에 GTM이 설치된 경우, 사용자가 웹사이트에 처음 접속하거나 페이지를 새로고침할 때 데이터레이어는 자동으로 초기화됩니다. 또한, 필요에 따라 의도적으로 데이터레이어를 초기화할 수도 있습니다.
데이터레이어가 초기화된 후에는 객체 데이터를 배열에 추가할 수 있으며, 이를 통해 GTM이 해당 데이터를 감지하고 사용할 수 있습니다. 객체 데이터는 {key : value} 형식으로 저장되며, 여기서 key는 데이터의 이름을, value는 해당 데이터의 값을 의미합니다.
데이터레이어 확인 방법
웹사이트에서 데이터레이어에 저장된 객체 데이터를 확인하려면, [개발자 도구]의 [콘솔] 탭을 이용하면 됩니다. 콘솔에서 “dataLayer”를 입력하면 현재 데이터레이어에 저장된 객체 데이터들을 확인할 수 있습니다. 이를 통해 데이터레이어가 정상적으로 작동하고 있는지 확인하거나, 어떤 데이터가 전달되고 있는지 파악할 수 있습니다.
“이와 같이 데이터레이어는 단순한 배열 형태로 시작하지만, 객체 데이터를 추가함으로써 웹사이트 내 다양한 정보를 GTM에 효과적으로 전달할 수 있습니다.”
데이터레이어 활용 방법
웹 분석 도구로 데이터를 전송하는 것이 우리의 주요 목적입니다. 이 과정에서 데이터레이어를 활용하여 사용자가 특정 행동을 했을 때 그 데이터를 효과적으로 전송할 수 있습니다.
1. 데이터레이어 초기화하기
데이터레이어를 사용할 때는 먼저 초기화 코드를 작성하는 것이 좋습니다. 이렇게 하면 데이터레이어가 아직 정의되지 않았을 경우에도 오류 없이 동작하게 됩니다.
특히 웹사이트 로딩 시점에 데이터레이어가 자동으로 초기화되지 않았다면, 그 이후에 데이터를 전달할 수 없기 때문에, 초기화 코드는 필수적입니다. 이를 통해 사용자가 사이트에 접속했을 때 안정적으로 데이터를 처리할 수 있게 됩니다.
2. 데이터레이어에 데이터 넣기
데이터레이어는 배열 형태로 구성되어 있으며, “push” 명령어를 사용하여 데이터를 추가할 수 있습니다. 데이터레이어에 객체 데이터를 추가하는 순간, 구글 태그 매니저(GTM)는 이를 감지하여 처리하게 됩니다.
예를 들어, 사용자가 특정 상품의 상세 페이지에 방문했을 때 view_item 이벤트를 보내야 한다고 가정해 보겠습니다. 이때 데이터를 데이터레이어로 전송하면, 상품의 ID, 이름, 카테고리, 가격 등의 정보를 함께 포함시킬 수 있습니다. 조금 더 구체적인 예로, 사용자가 “빨간색 가죽 자켓”을 조회했다면, 데이터레이어는 아래와 같은 형태로 구성될 수 있습니다.
이 코드를 통해 상품 조회 시점에 필요한 데이터를 GTM에 전송할 수 있습니다. 참고로, 변수를 추가하지 않고 이벤트만 전송할 수도 있고, 반대로 이벤트 없이 변수만 전송하는 것도 가능합니다.
3. 데이터레이어 코드 삽입 방법
웹사이트 소스 코드에 삽입하는 방법
위 코드는 상품이 조회되는 시점에 작동하는 자바스크립트 코드 내에 삽입하면 됩니다. 이 방식으로 데이터레이어는 웹사이트 내부의 특정 이벤트와 연동되어 데이터를 전송하게 됩니다.
GTM에서 삽입하는 방법
GTM에서 위 코드를 삽입하려면, 다음과 같은 절차를 따릅니다.
- GTM에서 [태그 만들기]로 이동한 후, [맞춤 HTML]을 선택합니다.
- 코드를 <script></script> 태그로 감싸서 삽입합니다. (예: <script>…</script>)
- 트리거는 상품 조회 시점에 맞춰 설정한 후, 맞춤 HTML 태그에 해당 코드를 추가합니다.
*<script> : HTML에서 Javascript 코드를 삽입하기 위해 필요한 태그
이렇게 설정하면 상품 상세 페이지를 조회할 때, [개발자 도구]의 [콘솔]에서 dataLayer를 입력하면 데이터가 정상적으로 출력되는 것을 확인할 수 있습니다.
4. 데이터레이어 – GTM 트리거로 활용하기
데이터레이어에 이벤트 데이터를 전달하면, 구글 태그 매니저(GTM)의 맞춤 이벤트 트리거를 통해 해당 이벤트를 감지할 수 있습니다. 이를 설정하려면 GTM에서 [트리거] 메뉴로 이동한 후, [맞춤 이벤트]를 선택하여 이벤트명을 입력하고 트리거를 설정합니다. 예를 들어, “view_item”과 같은 이벤트 이름을 사용하여 상품 상세 페이지 방문 시점을 감지할 수 있습니다.
5. 데이터레이어 – GTM 변수로 활용하기
데이터레이어로 전달된 매개변수 데이터의 모든 key 값은 GTM에서 변수로 활용할 수 있습니다. 이를 위해서는 [변수] 메뉴로 이동하여 [데이터 영역 변수]를 선택한 후, 데이터레이어의 key 값을 변수로 등록합니다. 이렇게 등록된 변수는 이후 다양한 태그나 트리거 설정에 사용할 수 있습니다. 예를 들어, 상품의 ID나 가격 같은 정보를 데이터 영역 변수로 설정해 두면, 이를 다양한 분석 작업에 활용할 수 있습니다.
6. 데이터레이어 – GA4로 이벤트 전송하기
GTM을 통해 데이터를 GA4로 전송하려면 [태그] 메뉴에서 [Google 애널리틱스: GA4 이벤트]를 선택해 이벤트 태그를 생성해야 합니다. 이때, 트리거로는 앞서 만든 view_item 맞춤 이벤트 트리거를 추가합니다. 또한, 매개변수는 앞서 데이터레이어로 전달된 변수들을 이벤트 매개변수로 등록해 줍니다. 예를 들어, 상품의 ID, 이름, 카테고리와 같은 데이터 영역 변수를 등록할 수 있습니다.
이제 상품 상세 페이지 조회 시 이벤트와 매개변수가 정상적으로 GA4로 전송되며, 이를 GA4의 Debug View에서 실시간으로 확인할 수 있습니다. GA4의 Debug View는 이벤트와 관련된 데이터가 제대로 전송되고 있는지 확인할 수 있는 중요한 도구입니다.
전자상거래 데이터레이어 활용 방법
비전자상거래 이벤트를 수집할 때는 데이터레이어에 입력하는 이벤트명과 변수명을 자유롭게 설정할 수 있습니다. 그러나 전자상거래 이벤트 수집을 위한 데이터레이어 코드를 삽입할 때는, 구글 공식 문서에 정의된 규칙을 엄격히 따라야 합니다. 이를 따르지 않으면 이벤트가 정상적으로 전송되지 않거나 원하는 데이터를 수집하는 데 실패할 수 있습니다.
전자상거래 데이터레이어 규칙
전자상거래 이벤트에서 규칙을 따르는 이유는 GTM과 GA4가 해당 데이터를 올바르게 인식하고 처리할 수 있도록 하기 위함입니다. 예를 들어, view_item 이벤트를 통해 상품 정보를 전송할 때, 구글에서 정의한 규칙에 맞춰 데이터를 입력해야 합니다.
필수 매개변수: item_id 또는 item_name
view_item 이벤트의 items 매개변수에는 item_id 또는 item_name 값 중 하나가 반드시 포함되어야 합니다. 이 두 가지 정보는 상품을 식별하는 데 중요한 역할을 하며, 둘 중 하나라도 빠지면 이벤트가 정상적으로 전송되지 않거나 GA4에서 인식되지 않습니다. 예를 들어, 아래와 같이 item_id와 item_name을 포함한 데이터를 데이터레이어에 추가해야 이벤트가 정상적으로 전송됩니다.
만약 item_id와 item_name 값이 모두 데이터레이어에 포함되지 않았다면, 해당 이벤트는 전송되지 않거나 오류가 발생할 수 있습니다. 따라서 전자상거래 이벤트 수집을 위한 데이터레이어 코드를 작성할 때는 구글에서 요구하는 규칙을 정확히 준수해야 합니다.
모든 데이터레이어 작업을 GTM에서 처리할 수 있을까?
데이터레이어 작업을 모두 웹사이트 소스 코드에 삽입하지 않고, 구글 태그 매니저(GTM)에서만 처리하는 것은 불가능한 경우가 있습니다. GTM은 강력한 도구이지만, 특정한 상황에서는 웹사이트 소스 코드에 직접 개입해야만 데이터레이어를 적절히 활용할 수 있습니다.
예시 1: 서버에서 관리되는 매개변수
구매 완료 페이지에서 상품 카테고리값을 매개변수로 가져오려 할 때, 해당 값이 서버에서 관리되고 있고 웹페이지에 표시되지 않는다면, GTM만으로는 이 값을 가져올 수 없습니다. GTM은 화면에 표시된 값에만 접근할 수 있기 때문에, 서버에서 관리되거나 화면에 보이지 않는 데이터는 웹사이트의 소스 코드에서 처리해야 합니다.
예시 2: alert 창 조회 시점 이벤트
alert 창이 나타나는 시점을 이벤트로 추적하려면 GTM만으로는 불가능합니다. alert 창의 조회나 클릭 같은 이벤트는 GTM의 기본 트리거로 감지할 수 없습니다. 이런 경우, 데이터레이어에 이벤트를 전달하기 위해서는 웹사이트의 소스 코드에서 직접 코드를 삽입해야 합니다.
이처럼 GTM 트리거로 잡기 어려운 이벤트나 화면에서 보이지 않는 매개변수를 처리해야 할 때는, 웹사이트의 소스 코드에 직접 데이터레이어 작업을 해야만 원하는 데이터를 수집할 수 있습니다. GTM은 화면에 노출된 요소들에 대해서는 강력한 기능을 제공하지만, 서버에서 관리되는 데이터나 특정 이벤트 트리거에 대해서는 한계가 있습니다.
요약
- 데이터레이어는 웹사이트에서 태그 관리자 컨테이너로 정보를 전달하는 매개체 역할을 합니다.
- 사용자의 버튼 클릭 또는 페이지 조회와 같은 활동 데이터를 데이터레이어로 전달하고, 이를 GTM에서 트리거나 변수로 활용해 GA4로 이벤트 데이터를 전송할 수 있습니다.
- 데이터레이어를 사용하는 이유는 GTM 트리거로 감지할 수 없는 이벤트를 GA4로 전송하거나, 동적인 이벤트 매개변수를 GTM에서 GA4로 전송하기 위해서입니다.
- 전자상거래 이벤트는 구글 공식 문서에 정의된 데이터레이어 규칙을 준수하여 삽입해야 합니다.
해당 글은 그로스 마케팅 파트너 허들러스와 모비인사이드의 파트너쉽으로 제공되는 기사입니다.
