2023. 11. 3. 17:45ㆍGA4
오늘은 실제로 CLASS가 없는 Element의 클릭 트리거를 잡는법을 배워보자
웹사이트의 상단부분 메뉴의 class 값을 찾아보자
class값이 나오지 않는다.
이럴경우 도와주는 변수는
Click Element이다.
위치를 나타내준다고 쉽게 알면된다.
( body 태그 안에 있는 header.header.main-header 등등 )
일단 한번 만들어보자 !
GTM에서 태그 이름과
이벤트 이름을 설정해주자.
이제 중요한 트리거 설정 부분인데
저번에 우리가 배웠던 Element로 추적하는 부분을 생각한다면 이렇게 제작할것이다.
왜냐하면 미리보기의 값이
이렇게 나오니 뒷부분만 포함시켜도 될거라고 생각할것이다.
하지만 저장을 하고 확인을 하면
확인되지 않는다고 나온다.
왜냐하면
Click Element는 string으로 되어있어서 헷갈릴 수 있는데
사실은 string이 아닌 객체데이터로 되어있기 때문이다
저번시간에 우리는 class를 가진 요소에는 " . " 을
id를 가진 요소에 " # " 을 붙였다.
지금 우리가 찾고자 하는것은
ui클래스 안에 있는 gnb-menu 클래스 안에 있는 d-flex > gnb-menu 라는 list클래스 안에 있는 a 태그를 찾는것이다.
그래서 click element 포함 조건으로 잡으면 안되고
CSS 선택 도구와 일치를 눌러줘야한다.
왜냐하면
선택자이기 떄문이다.
Click element는 텍스트처럼 보이지만 사실은 선택자를 반환해주기에 css선택 도구와 일치를 눌러줘야한다.
저장을 하고 확인을 해보자
Fired가 되어 잘 잡히는것을 볼 수 있다.
이제 확인을 했으니 매개변수에서 저번시간에 사용한 click text를 사용하자
저장을 하고 확인해보자 !
디버그뷰에 잘 잡히는것을 확인할 수 있다.
element는 꼭 css 선택도구와 일치를 해야한다!
그런데 우리가 지금까지 계속 매개변수에서 사용한 clickText는 오류가 발생하면 확인을 하기가 쉽지않다.
그렇기에 새로운 변수를 만들어야한다.
click element의 innerText를 가져오는 방식이다.
GTM에서 변수 - 사용자 정의 변수 - 새로만들기를 눌러
만들어보자.
변수이름을 설정하고
function 뒤에 자유롭게 이름을 넣어주고 () {}
return {{click element}}.innertext를 사용해 쉽게 innertext를 가져오게 설정하자
저장을하고 미리보기로 확인을 해보니
네비게이션 메뉴 이름으로 잘 잡히는것을 볼 수 있다.
사실 원리상으로
Clicktext는 Element의 innerText를 가져오는 변수이기에 우리가 만든 "네비게이션 메뉴 이름"과 똑같지만
우리가 직접 변수 이름을 한글로 만들수도 있고
오류가 발생해도 쉽게 확인할 수 있기에 장기적으로 관리에 용이하다
element로 css선택도구를 했을때
모바일영역과도 일치하는지 확인을 꼭 ! 해줘야한다.
콘솔창에서 위 사진 파란부분을 눌러주면 모바일 영역으로 전환된다.
모바일에서는 lnb-menus로 잡히는것을 볼 수 있다
이러면 모바일에서는 fired가 되지 않을것이다.
lnb-menu를 잡으려면 어떻게 해야할까?
위에 설명한 방식과 똑같이하면 된다 !
미리보기로 element를 확인해보면
파란줄에 있는 li.lnb-menu > a 가 보이는데
이걸 css 선택 도구와 일치로 해주면된다.
방금 만들었던 태그를 복사해서
이름을 소 네비게이션 메뉴 클릭으로 변경해주자
트리거도 똑같이 복사해주고
값을 lnb로 설정해주면 된다.
이벤트 이름도 설정해주고
저장을하고 확인을 해보자!
잘 잡히는것을 확인할 수 있다.
끗 !