brunch

매거진 넥스트 모바일 이야기

라이킷 2 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Mobiinside Oct 23. 2024

GTM에서 데이터레이어 활용하기

안녕하세요, 그로스 마케팅 파트너 허들러스의 박희진 그로스 엔지니어입니다.

구글 태그 매니저(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에서 위 코드를 삽입하려면, 다음과 같은 절차를 따릅니다.

1) GTM에서 [태그 만들기]로 이동한 후, [맞춤 HTML]을 선택합니다.

2) 코드를 태그로 감싸서 삽입합니다. (예: …)

3) 트리거는 상품 조회 시점에 맞춰 설정한 후, 맞춤 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은 화면에 노출된 요소들에 대해서는 강력한 기능을 제공하지만, 서버에서 관리되는 데이터나 특정 이벤트 트리거에 대해서는 한계가 있습니다.