[카페24 GA4/GTM] 복붙 설치! 전자상거래 (view_item)

반응형

 

 

Ctrl+C, V로 설정해보는 view_item

 

잠깐! View_item은 이미 설치 완료하셨나요?

그럼 add_to_cart를 보러가세요

 

add_to_cart - 복붙 설치 보러가기 (클릭)

 

안녕하세요 마케팅하는 캥거루 캥캥입니다.

 

이전 글에서 Ctrl + C, Ctrl +V식으로

GA4 전자상거래를 설치하는건 거의 불가능하다고 했습니다.

 

임대몰의 경우에는 맞춤 HTML로 코딩 지식 없이도 어느정도 설치가 가능합니다.

 

 

GTM 스니펫 코드만 설치하고, 그외에는 GTM으로만 태깅하긴 하지만,

사이트 오작동 하지 않는지 꼭 디버그로 체크하시길 바랍니다.

 

 

 

바로 본론으로 들어가겠습니다. 해당 예시는 카페 24입니다.

(GA4 구성 및 기타 기본 셋팅은 완료된 상태라고 보겠습니다)

 

GA4 구성 및 기타 기본셋팅은 구글창에 GTM설치라고만 쳐도

엄청나게 많이 있으니, 해당내용 따라 설치해주고, 이 글을 진행하시는게 좋습니다,

---

 

이벤트 수집 설치는 크게

[ 변수 설정 ]  -  [ 트리거 설정 ]  - [ 태그 설정 ]

으로 나뉩니다.

 

 

 

* 여기서 보통 처음 접하시는 분들이 이 구조를 많이 어려워하시더군요 *

 

좋은 예시는 아니지만, 이해하시기 쉽게 비유하자면,

이벤트 수집을 레스토랑에서 요리가 나오는 것이라고 하면,

다음과 같습니다.

변수 설정	재료 정하기
트리거 설정	준비된 재료(변수)로 조리하기
태그 설정	완성된 음식에 이름 붙이기 (파스타, 피자 등등)

 

그래서 보통 이벤트에 이름만 붙이면 다 될 것 같이 보이지만,

재료도 하나하나 다 정해주어야 하고(면 200g 등등).

준비된 재료를 언제 어떻게 조리할지(= 고객이 어떤 행동을 할때 발동시킬지)

정해주어야 합니다.

 

 

 

 

 

그럼 먼저 변수 설정 부터 해보겠습니다.

 

---

1. 변수 설정

 

 

GTM 에서 변수 - NEW를 클릭

 

변수 유형은 맞춤 자바스크립트 선택

 

 

아래 코드로 작성해주세요.

 

function() {
  var productdetail = [{
    item_id: iProductNo,
    item_name: product_name,
    price: product_price,
    item_category: iCategoryNo
  }];
  return producdetail;
}

 

해당 코드는 구글애널리틱스가 요구하는 매개변수명에 맞게 변수값을 넣어주는, 매칭하는 코드입니다.

item_id, item_name... = 구글애널리틱스가 요구하는 변수명

iProductNo, product_name... = 카페24에서 제공하는 변수명

 

 

** 카페24 변수는 스킨/모듈별로 달라지나 기본적으로 저것과 같습니다**

 

 

** 만약 변수명이 맞을지 확인하고 싶다면 하단 과정을 따라해보세요 **

 

자신의 웹사이트 상품 상세페이지에서 (크롬창)으로 F12

1	자신의 웹사이트 상품 상세페이지에서 (크롬창)으로 F12
2
3	2번 같은 창이 뜰텐데, Conosle 선택 - 이후 확인을 원하는 변수명을 Conosle.log(카페24 변수명) 입력해보시면 됩니다.
4	그러면 이렇게 출력되는 값을 확인할 수 있습니다.

 

값이 잘 출력되는지 확인하고, .GTM에 잘 저장하셨다면

변수 설정 = 재료 준비 및 손질은 모두 완료되었습니다.

 

 

 

 

---

 

 

2.  트리거 설정

 

 

Trigger - New

 

트리거 유형은 Dom Ready

 

일부 Dom Ready 이벤트만 트리거 - Page Path

하단 내용을 복사해서 넣어주세요.

/product/.*/category/.*/display/.*

 

정규식과 일치 [  .*  ]  뜻은 뒤에 어떤문자가 오든 포함으로 간주한다는 것입니다.

 

엑셀로 예를 들면 와일드카드 문자입니다.

엑셀에서 "경기도 지하철" 을 A1 셀에 입력했다고 할때, =countif(ragne,"경기도")하면 값이 0으로 나옵니다.

하지만 countif(range,"*"&"경기도"&"*")하면 앞뒤에 어떤문자가 있든 포함되기만 하면 count 합니다 (값이 1로 나옵니다)

 

 

 

보통 카페24 상품 상세페이지 주소가 /product/~~~~/category/~~/display/~~~로 되서, 대부분의 형식이 이를 만족하나,

혹시 자신의 웹사이트가 다른 형태를 띄고있지는 않을지 꼭 확인해보시기 바랍니다.

 

 

 

* Pagepath는 https://markangter.tistory.com/테스트용_유알엘입니다. Url에서

앞의 https://markangter.tistory.com/ 부분을 뺀 뒷부분 전체입니다.

 

어떤 경로로 가든 자신의 웹사이트 앞에 ~~.com은 기본적으로 붙으니

해당 경로를 당연한 것으로 여겨 제외하고 나오는 것입니다.

 

 

 

* 뒤에 트리거 하나를 더 설정해야하나, 태그설정때 같이 설명하는게 이해가 수월하니 

참고해주시기 바랍니다. *

 

 

---

3. 태그 설정

 

 

원래 Datalayer 스크립트는 사이트내에 따로 작성하여 값을 push해주어야하나,

여기에서는 맞춤 HTML로 통해

코딩을 몰라도 할 수 있꼐

GTM내에서 조금 간편하게 해보도록 하겠습니다.

 

 

Tag - New

 

 

태그 유형은 맞춤 HTML

 

 

<script>
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
  event: "html_view_item",
  ecommerce: {
    items: {{CJS-Productdetail}}
  }
  });
</script>

 

 

빨간색의 변수 부분은 1. 변수 설정 에서 만들었던 GTM 변수명과 동일해야 합니다.

 

만약 잘 모르겠다면 GTM Html 코드 상에서 {{  만 입력하시면

하단과 같이 모든 변수가 자동완성으로 나오니

자동완성되는 것중 자신이 입력한 변수명인 걸 선택하세요.

왼쪽 자동완성되는 변수명   오른쪽 1.변수 설정에서 만들었던 것 = 자동완성에 나올 변수명

 

---

 

이제 이렇게 발동된 Datalayer 이벤트를 바탕으로 GA4 전자상거래 이벤트를 발동시켜주어야 합니다.

 

태그 - 태그 새로만들기 - GA4 이벤트

 

 

구성 태그는 자신의 데이터를 보낼 구글애널틱스 ID Manaual로 입력하시거나, 기존에 구성태그를 설정하셨다면, 그걸로 선택해주세요.

 

 

이벤트 이름과 패러미터명은 다음과 같이 해주세요.

 

이벤트이름: view_item

매개변수 명: items

매개변수 명: currency   (매개변수 값: KRW)

 

대소문자, 공백 어느 것 하나 다르면 안됩니다.

 

 

 

 

items 매개변수 값은 우측의 + 아이콘을 클릭해주세요

 

우측 상단 + 클릭

 

데이터 레이어 변수 유형으로 선택

 

 

다음과 같이 설정 후 저장

데이터 레이어 변수명: ecommerce.items

데이터 레이어 변수명은 대소문자, 공백, . 모두 제가 기재한 것과 일치해야합니다

 

 

그러면 이렇게 들어갑니다.

 

 

 

해당 태그의 트리거는 새로 만들어야합니다.

 

 

트리거 유형 - 맞춤이벤트

 

왼쪽 이벤트 이름 설정 오른쪽 맞춤 html에서 설정했던 이벤트 이름

맞춤 이벤트 이름: html_view_item

대소문자, 공백, . 모두 제가 기재한 것과 일치해야합니다

 

앞선 html에서 발동시켰던 이벤트 명이 발동되면 ga4 이벤트가 발동되게 합니다.

 

 

 

최종적인 화면은 이렇습니다. 이 상태로 저장 및 preview의 디버그모드로

view_item 이벤트가 잘 작동하는지 확인 후 게시하세요.

 

 

맞춤 HTML은 스니펫만으로도 전자상거래 추적이 가능하다는 장점이 있지만,

다음과 같은 단점이 있습니다.

 

1. 작성되는 코드가 많아 사이트 속도가 조금 느려질 수 있습니다.

2. 이벤트가 2번 발동되는거라 중복집계 될 수 있습니다.

3. 추후 유지보수가 번거롭습니다 (page path변경 등..)

 

(저의 경우에는 이를 방지하기 위해 html_로 네이밍을 하여 따로 구분은 해주었으나

GA4 보고서에는 html_view_item과 view_item 이벤트가 모두 각각 따로 기록됩니다...

이벤트 수가 별로 없다면 크게 신경 안써도 되겠지만,

추적할 이벤트가 그외에도 많다거나, 사이트 트래픽이 늘어날수록 번거롭겠죠.)

 

 

 

장바구니와 purchase까지 하게 되면 글이 너무 길어지기도 하고

정말 수요가 있는 정보글일지 반응 지켜보다가 올리려고 합니다.

 

오늘 글은 여기까지 입니다.

 

 

질문 있으시면 댓글 남겨주시길 바라며,

장바구니와 purchase 추적도 원하시는 분들이 많을 경우 업로드 하겠습니다.

 

[ 장바구니 설치 글로 이동하기 ]

 

감사합니다.