[카페24 GA4/GTM] 복붙 설치! 전자상거래 (add_to_cart) - part 2. 트리거 만들기

Ctrl+C, V로 설정해보는 Add to cart

 

반응형

 

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

 

정말 오랜만의 글인데요.

 

최근 많은 분들이 해당 글 조회도 하시고 댓글도 남겨주셔서

다시 남기기 시작합니다!

 

 

이전에 변수 만들기 까지 진행헀는데,

 

view_item 에서 제가 이벤트는 [ 변수 - 트리거 - 태그 ] 순서로 진행된다고 하신 것을 기억하실까요?

 

그래서 Part2는 트리거 입니다.

 

 

장바구니에서 트리거는 장바구니 버튼 "클릭" 행동이 트리거가 됩니다.

 

아래 캡처를 따라서 해보세요.

 

트리거 추가 전에 변수 - 기본 제공 변수 - 구성

클릭 관련 변수를 모두 체크합니다.

 

 

 

트리거 - new - [ 클릭 - 모든요소 ] - 일부 클릭 - CSS 선택도구와 일치 - 값은 일단 임시로 TBD로 기재

 

 

그렇다면 Click Element는 어떻게 확인 하느냐?

구글 크롬 F12로 해도 되지만, GTM으로도 할 수 있습니다.

앞서 저희가 기본 제공 변수로 Click Element를 추가했기 때문이죠.

 

구글태그매니저 GTM - 미리보기 (코드가 설치된 자신의 웹사이트를 입력합니다)

 

 

자신이 코드를 설치한 웹사이트 url 입력해서 Connect

 

Connect를 누르면 새로운 창에 입력한 웹사이트가 열립니다.

"새롭게 열린 웹사이트 창"에서 상세페이지로 들어가고 장바구니를 클릭해줍니다.

 

(상품은 아무거나 담아도 상관 없습니다)

 

 

 

이제 GTM 미리보기 화면을 가면 좌측에 이벤트 History 가 보이는데, 그중 Click을 찾고,

Variable에서 Click Text를 확인 합니다.

 

Click Text를 보면 Cart, 장바구니, 장바구니 담기 등이어서 바로 알 수 있습니다.

 

GTM 디버깅 화면에서 Click Element가 줄바꿈되면서 이상하게 나오는데,

“는 문자열(String) 형태라 씌워지는 것이고 > 는 공백 1칸 에 해당합니다.

 

예를 들어 GTM에 써져있는게 [  "body#layout >"+"div".... ] 라면

 실제 Click Element는 [ body#layout div… ] 가 됩니다.

 

 

아마도 Click Element가 하단과 유사하게 되어 있을텐데, 마지막 buttom.bt~부분 정도만 복사해줍니다.

"HTMLButtonElement: html > body.theme01 > div#wrap > div#container > " +
"div#contents > div.xans-element-.xans-product.xans-product-detail.se" +
"ction > div.detailArea > div.infoArea > div.xans-element-.xans-produ" +
"ct.xans-product-action.productAction > div.action_button > button.bt" +
"nNormal.sizeL.actionCart#actionCart“


위 예시의 경우 복사할 부분은 button.bt" +"nNormal.sizeL.actionCart#actionCart“ 입니다.

앞서 기재 드렸듯이 문자열 형태로 출력되어서 특수문자가 들어가기 때문에 하단과 같은 규칙으로 치환해줍니다.

“와 +는 제거, >는 공백 1칸으로 치환

위의 예시를 치환하면 우측과 같습니다. button.btnNormal.sizeL.actionCart#actionCart  
(스킨,모듈 등 기타요소에 따라 달라질 수 있으니 반드시 자신의 웹사이트로 실행 후 복사해주세요)

 

 

 

 

임시로 TBD라고 기재했던 부분을 치환한 Click Element로 바꿔줍니다.

 

 

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

 

오늘도 방문해주셔서 감사합니다.

 

 

다음 글 Part 3.는 이 트리거를 가지고 맞춤 HTML로 장바구니 이벤트를 태그해보겠습니다.

(그렇게 발생한 이벤트를 GA4 이벤트로 다시 태그해줄 예정)

 

 

기타 문의는 kobypark@naver.com으로 주세요.

감사합니다.