싱글뷰 – 온라인 사업 성장 파트너

구글애널리틱스4와 구글 태그 매니저로 전자상거래 설정하기

구글애널리틱스4 로고
구글애널리틱스4와 구글 태그 매니저로 모든 이커머스 데이터 수집 기능을 즉시 정확하게 활성화하는 방법이 궁금하신가요? 싱글뷰에서 개발한 GAECTK JS API를 사용하여 가장 빠르고 정확하게 구글애널리틱스4의 전자상거래 추적 코드를 설치하세요.

이 포스팅의 목적은 구글 애널리틱스 4와 구글 태그 매니저를 설정해서 실무에 필요한 모든 이커머스 데이터 수집 기능을 즉시 정확하게 활성화하는 것입니다.

이 포스팅에서 안내해 드리는 방법은 이전 포스팅에서 설명한 gaectk.js 라이브러리를 사용한다는 전제입니다.

구글 애널리틱스 4와 구글 태그 매니저를 일반적으로 소개하는 정보가 필요하시면 다른 더 좋은 정보를 찾아보시길 부탁드립니다.

1. 구글 태그 매니저 로그인 하기

gaectk.js 라이브러리를 설치하지 않고 본 포스팅에 따라 GTM만 설정하시면 이커머스 데이터가 수집되지 않습니다. 이러한 안내가 어색하시면 아래의 페이지를 먼저 세심하게 살펴보셔야 합니다.

GAECTK JS API를 소개합니다. 알아보기

여기까지 모두 숙지하셨다면 구글 태그 매니저에 로그인 하세요.

구글 태그 매니저의 계정 설정 방법은 매우 읽기 쉽고 자세한 정보가 너무 많기 때문에 이 포스팅에서는 생략하겠습니다.

구글 태그 매니저에 로그인하시면 아래와 같은 혹은 비슷한 화면을 볼 수 있습니다.

Universal Analytics GTM gaectk 설정법 01
Universal Analytics GTM gaectk 설정법 01

이 화면을 확인하셨다면 모든 사전 준비가 완료된 것입니다.

이제 구글 애널리틱스 4(=신버전) 기준으로 쇼핑몰 구매 고객의 일반적인 행동 순서를 따라서 구글 태그 매니저 설정을 시작하겠습니다.

2. 글로벌 태그 생성

태그명: GA4 global tag

  • 태그 유형: Google 애널리틱스: GA4 구성
  • 측정 ID: G-XXXXXXX (구글 애널리틱스 4 관리자에서 확인한 Measurement ID입니다.)
  • 트리거: All Pages (GTM이 이미 제공하는 트리거를 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 01
구글애널리틱스4 GTM gaectk 설정법 01

구글 애널리틱스 4의 측정 아이디는 아래의 화면에서 확인할 수 있습니다.

구글 애널리틱스 4 관리자 -> Data Stream -> Web stream details

구글애널리틱스4 GTM gaectk 설정법 02
구글애널리틱스4 GTM gaectk 설정법 02
구글애널리틱스4 GTM gaectk 설정법 03
구글애널리틱스4 GTM gaectk 설정법 03

이제 글로벌 태그를 생성하고 설정했습니다.

하나의 태그을 설정할 때마다 Tag Assistant라는 구글 태그 매니저의 독특한 디버거를 사용해서 게시하려는 사이트에서 문제없이 작동하는지 쉽게 확인할 수 있습니다. Tag Assistant 사용법은 아래의 포스팅에서 3항을 살펴보세요.

Tag Assistant 사용법 보러가기

3. 카탈로그(=상품목록) 조회 태그 생성

이제 일반적인 쇼핑몰 구매 고객의 행동 순서를 따라서 카탈로그 조회 태그를 생성할 차례입니다.

사이트 방문자의 쇼핑 행동이 구글 애널리틱스 4를 사용했다고 변할 수 없어서 설정 내용은 유니버설 애널리틱스와 동일하고 세부 사항이 조금 다른데, 구글 애널리틱스 4가 유니버설 애널리틱스에 비해 설정 내용이 좀 더 직관적이고 간단합니다.

DLV.ecommerce.items 변수 생성

좌측 메뉴에서 [변수] 탭을 클릭합니다.

  • 변수명: DLV.ecommerce.items (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.items (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

참고로, DLV는 저희 싱글뷰가 정한 DataLayer Variable의 약자일 뿐입니다.

구글애널리틱스4 GTM gaectk 설정법 04
구글애널리틱스4 GTM gaectk 설정법 04

ga4_view_item_list 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: view_item_list (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 05
구글애널리틱스4 GTM gaectk 설정법 05
구글애널리틱스4 GTM gaectk 설정법 06
구글애널리틱스4 GTM gaectk 설정법 06

아래의 배경 지식을 참고하세요.

{{DLV.ecommerce.items}}는 방금 전에 생성한 변수를 사용하겠다는 예약어입니다.

스크롤을 내리면 트리거 설정 화면이 표시됩니다.

구글애널리틱스4 GTM gaectk 설정법 07
구글애널리틱스4 GTM gaectk 설정법 07

이 섹션을 클릭해서 트리거를 생성합니다.

좌측 메뉴에서 [트리거] 탭을 클릭해서 접근할 수도 있습니다.

ga4_view_item_list 트리거 생성

  • 트리거명: ga4_view_item_list (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: view_item_list (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 08
구글애널리틱스4 GTM gaectk 설정법 08

4. 카탈로그(=상품목록)에서 개별 상품 클릭 태그 생성

카탈로그에서 상품 목록을 보던 중 어떤 상품의 상세 페이지 링크를 클릭하는 이벤트를 처리하는 태그를 생성합니다.

ga4_select_item 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 09
구글애널리틱스4 GTM gaectk 설정법 09

ga4_select_item 트리거 생성

  • 트리거명: ga4_select_item (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: select_item (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 10
구글애널리틱스4 GTM gaectk 설정법 10

5. 상품 상세페이지 조회 태그 생성

어떤 상품의 상세 페이지를 조회하는 이벤트를 처리하는 태그를 생성합니다.

ga4_view_item 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 11
구글애널리틱스4 GTM gaectk 설정법 11

ga4_view_item 트리거 생성

  • 트리거명: ga4_view_item (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: view_item (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 12
구글애널리틱스4 GTM gaectk 설정법 12

6. 장바구니 담기 태그 생성

어떤 상품의 상세 페이지에서 해당 상품을 장바구니에 담는 이벤트를 처리하는 태그를 생성합니다.

ga4_add_to_cart 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수1 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수1 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수2 – 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수2 – 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

참고로, value를 정확하게 전송하지 않아서 event value가 0으로 기록되면 이후에 add_to_cart 이벤트를 Goal로 설정하여 추적하는 작업이 원활하지 않을 수 있습니다.

구글애널리틱스4 GTM gaectk 설정법 13
구글애널리틱스4 GTM gaectk 설정법 13

ga4_add_to_cart 트리거 생성

  • 트리거명: ga4_add_to_cart (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: add_to_cart (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 14
구글애널리틱스4 GTM gaectk 설정법 14

7. 지금 구매하기 태그 생성

어떤 상품의 상세 페이지에서 해당 상품을 지금 구매하는 이벤트를 처리하는 태그를 생성합니다.

ga4_begin_checkout 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수1 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수1 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수2 – 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수2 – 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

참고로, value를 정확하게 전송하지 않아서 event value가 0으로 기록되면 이후에

begin_checkout 이벤트를 Goal로 설정하여 추적하는 작업이 원활하지 않을 수 있습니다.

구글애널리틱스4 GTM gaectk 설정법 15
구글애널리틱스4 GTM gaectk 설정법 15

ga4_begin_checkout 트리거 생성

  • 트리거명: ga4_begin_checkout (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: begin_checkout (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 16
구글애널리틱스4 GTM gaectk 설정법 16

8. 장바구니 목록 조회하기 태그 생성

장바구니 목록 페이지를 조회하는 이벤트를 처리하는 태그를 생성합니다.

유니버설 애널리틱스에서 구글 애널리틱스 4로 버전업 되면서 Recommended Events로 변경되었습니다.

이러한 안내가 어색하시면 아래의 페이지에서 관련 정보를 살펴보세요.

Google Analytics 4의 Recommended event 소개 보러 가기

그런데 유니버설 애널리틱스와 병행하시는 경우에도 이 태그를 생성하면 구글 애널리틱스 버전과 무관하게 gaectk.js와 연동하여 필요한 태그를 실행합니다.

실제로 gaectk.js 라이브러리에서는 구글 애널리틱스 버전과 무관하게 gaectkCart.viewCart()라는 동일한 인터페이스를 제공합니다.

ga4_view_cart 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 17
구글애널리틱스4 GTM gaectk 설정법 17

ga4_view_cart 트리거 생성

  • 트리거명: ga4_view_cart (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: view_cart (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 18
구글애널리틱스4 GTM gaectk 설정법 18

9. 장바구니 품목 삭제하기 태그 생성

장바구니 목록 페이지에서 개별 품목을 삭제하는 이벤트를 처리하는 태그를 생성합니다.

ga4_remove_from_cart 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 19
구글애널리틱스4 GTM gaectk 설정법 19

ga4_remove_from_cart 트리거 생성

  • 트리거명: ga4_remove_from_cart (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: remove_from_cart (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 20
구글애널리틱스4 GTM gaectk 설정법 20

10. 결제 완료 태그 생성

결제 완료 페이지가 표시되는 이벤트를 처리하는 태그를 생성합니다.

구글 애널리틱스 4와 GTM 설정 과정에서 유일하게 변수 설정이 까다롭습니다.

DLV.ecommerce.transaction_id 변수 생성

  • 변수명: DLV.ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.transaction_id (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 21
구글애널리틱스4 GTM gaectk 설정법 21

동일한 방식으로 아래의 변수를 생성합니다.

  • 변수명: DLV.ecommerce.tax (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.tax (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.ecommerce.shipping (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.shipping (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.ecommerce.value (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.value (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.ecommerce.affiliation (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.affiliation (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.ecommerce.currency (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.currency (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.ecommerce.coupon (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: ecommerce.coupon (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

ga4_purchase 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_purchase (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 구성 태그: GA4 global tag (2항에서 생성했습니다.)
  • 이벤트 이름: purchase (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: items (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.items}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: transaction_id (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.transaction_id}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: tax (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.tax}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: shipping (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.shipping}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: value (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.value}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: affiliation (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.affiliation}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: currency (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.currency}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: coupon (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.ecommerce.coupon}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)

ga4_purchase 트리거 생성

  • 트리거명: ga4_purchase (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: purchase (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 22
구글애널리틱스4 GTM gaectk 설정법 22

11. 사용자 정의 이벤트 전송 태그 생성

GTM API를 사용할 때에도 아래의 세 가지 함수를 이용해서

사용자 정의 이벤트를 GA4로 전송할 수 있습니다.

  • checkNonEcConversionGaectk(sVirtualUrl, sPageTitle)
  • sendClickEventGaectk(sCategory, sEventLbl, sLocation, sWindow)
  • sendDisplayEventGaectk(sDisplayedObject)

필요한 변수를 추가합니다.

  • 변수명: DLV.sv_event_info.page_location (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: sv_event_info.page_location (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 23
구글애널리틱스4 GTM gaectk 설정법 23

동일한 방식으로 아래의 변수를 생성합니다.

  • 변수명: DLV.sv_event_info.page_title (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: sv_event_info.page_title (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.sv_event_info.value (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: sv_event_info.value (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)
  • 변수명: DLV.sv_event_info.label (텍스트를 복사하여 붙여넣으세요)
  • 변수 유형: 데이터 영역 변수
  • 데이터 영역 변수 이름: sv_event_info.label (텍스트를 복사하여 붙여넣으세요)
  • 데이터 영역 버전: 버전 2 (선택 상자에서 선택하세요.)

checkNonEcConversionGaectk(sVirtualUrl, sPageTitle)를

실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.

ga4_virtual_pv 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)
  • 이벤트 이름: page_view (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 매개변수 이름: page_title (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.sv_event_info.page_title}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
  • 이벤트 매개변수 – 매개변수 이름: page_location (텍스트를 복사하여 붙여넣으세요)
  • 이벤트 매개변수 – 값: {{DLV.sv_event_info.page_location}} (텍스트를 복사하여 붙여넣거나 선택 상자에서 선택하세요.)
구글애널리틱스4 GTM gaectk 설정법 24
구글애널리틱스4 GTM gaectk 설정법 24

ga4_virtual_pv 트리거 생성

  • 트리거명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: virtula_pv (텍스트를 복사하여 붙여넣으세요)
구글애널리틱스4 GTM gaectk 설정법 25
구글애널리틱스4 GTM gaectk 설정법 25

동일한 방식으로 sendClickEventGaectk()를 실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.

ga4_clicked 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_clicked (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)
  • 이벤트 이름: {{DLV.sv_event_info.label}} (텍스트를 복사하여 붙여넣으세요)

ga4_clicked 트리거 생성

  • 트리거명: ga4_virtual_pv (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: clicked (텍스트를 복사하여 붙여넣으세요)

동일한 방식으로

sendDisplayEventGaectk()를 실행하기 위해서 GTM 컨테이너에 아래의 태그를 추가합니다.

ga4_displayed 태그 생성

좌측 메뉴에서 [태그] 탭을 클릭합니다.

  • 태그명: ga4_clicked (텍스트를 복사하여 붙여넣으세요)
  • 태그 유형: Google 애널리틱스: GA4 이벤트
  • 측정 ID: {{var_ga4_measurement_id}} (GA4 measurement ID를 직접 입력하거나 대응 변수 입력)
  • 이벤트 이름: {{DLV.sv_event_info.label}} (텍스트를 복사하여 붙여넣으세요)

ga4_displayed 트리거 생성

  • 트리거명: ga4_displayed (텍스트를 복사하여 붙여넣으세요)
  • 트리거 유형: 맞춤 이벤트
  • 이벤트 이름: displayed (텍스트를 복사하여 붙여넣으세요)

수고하셨습니다.

이제 사이트에 이미 설치하신 gaectk.js 라이브러리와 GTM 연결 작업이 완료되었습니다.

12. GA4 폴더 생성

이 단계는 구글 애널리틱스 4를 유니버설 애널리틱스와 병행 사용하시려는 경우에 더욱 신경쓰셔야 합니다. GTM을 열심히 활용하다보면 수 십가지 태그가 혼란스럽게 뒤섞인 상태가 될 수 있기 때문입니다.

구글애널리틱스4 GTM gaectk 설정법 26
구글애널리틱스4 GTM gaectk 설정법 26

위의 캡처 화면과 같이 Google Analytics 4 폴더를 생성하신 후 이번에 생성한 변수, 태그, 트리거를 모두 Google Analytics 4 폴더로 이동하세요.

13. 게시하기

Tag Assistant를 사용하여 설정 과정에서 오류가 없었는지 확인하신 후에 [제출] 버튼을 클릭하여 GTM이 목표 홈페이지에 태그를 게시하도록 허락합니다.

구글애널리틱스4 GTM gaectk 설정법 27
구글애널리틱스4 GTM gaectk 설정법 27

게시하시는 버전을 식별할 수 있는 자세한 정보를 자세히 기록해 두시는 습관이 항상 더 좋다는 점을 명심하세요.

구글애널리틱스4 GTM gaectk 설정법 28
구글애널리틱스4 GTM gaectk 설정법 28

수고가 많으셨습니다.

지금까지 gaectk.js 라이브러리를 이용하여 유니버설 애널리틱스, 구글 애널리틱스 4를 JS API로 직접 연결하거나 GTM과 연동하는 방법을 알아봤습니다.

“구글애널리틱스4와 구글 태그 매니저로 전자상거래 설정하기”에 대한 2개의 생각

  1. 다 설정을 했는데요.
    웹사이트에는 별도의 스크립트 설치가 없어도 되는 것일까요??
    ga4 보는데 데이터가 들어오는건지 체크가 제대로 안됩니다 ㅜ

    1. ㅇㅇㅇ님 안녕하세요

      난이도가 높은 과제에 도전하신 것 같습니다.

      1.
      결론부터 말씀드리면

      웹사이트에는 별도의 스크립트를 설치하셔야 합니다.

      본문의 시작에서 안내해 드렸듯이

      이 포스팅에서 안내해 드리는 방법은
      계속하여 소개해 드린 gaectk.js 라이브러리를
      사용한다는 전제입니다.

      그래서
      gaectk.js 라는 라이브러리를
      사이트의 모든 추적 페이지에 로드하셔야 하고

      shopping flow에 대응하는

      gaectk API를 각 페이지에 설치하셔야 합니다.

      gaectk.js 라이브러리를 설치하지 않고
      본 포스팅에 따라 GTM만 설정하시면
      이커머스 데이터가 수집되지 않습니다.

      2.
      이러한 안내가 어색하시면
      아래의 페이지를 한번 더 살펴보시길 부탁드려요

      http://singleview.co.kr/blog/19314

      GA4와 GTM을 결합한 전자상거래 snippet 코드 설치는
      UA보다 어떤 면에서는 단순해졌고
      다른 면에서는 극도로 어려워졌습니다.

      저희가 이 문제를 조금이라도 해결하려고 개발한
      gaectk.js도 어색해서 사용하지 않으실 수는 있지만

      대응하는 js snippet code를
      웹사이트에 직접 설치하시거나
      GTM의 사용자 정의 변수 – 맞춤 자바스크립트로
      일일히 설정하시는 과정도

      만만치 않게 복잡하다는 문제가 있습니다.

      gaectk.js의 소스코드는
      git repository를 살펴보실 수 있습니다.

      https://github.com/singleview-co-kr/gaectk

      gaectk.js 라이브러리에 관심을 느끼셨다면
      아래의 페이지를 살펴보시면 좋을 것 같습니다.

      http://singleview.co.kr/gaectk_howto_basic

      3.
      한번 더 살펴보시고 다른 질문이나
      의견이 있으시면 부담없이 알려주세요.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Share the Post:
위로 스크롤

무엇을 찾으시나요?