GA4) Perfomance Marketing 요소공개상태 이벤트 (선택자로 위치잡기)

저번 시간에는 ID값을 이용해 지정한 영역이 5초이상 떠있을 경우 데이터를 전송하게끔 하는 이벤트를 만들었다 

 

HTML 요소에는 ID값이 없는 경우가 대부분 많다

 

이번 시간에는 ID값이 아닌 CSS선택도구로 하는법을 배워볼 것이다.

 

댓글 등록부분에 우클릭 검사를 눌러 소스를 확인해주자 

 

별도의 ID값은 없고 class값만 있다.

 

태그매니저에서 태그를 만들어주자

 

태그 구성에서 태그 이름과 태그 구성을 적어주자

그리고 트리거로 들어와 요소 공개 상태 유형을 선택해 만들어주자  

선택 방법을 이번에는 id가 아닌 css 선택 도구를 눌러주자

 

css선택도구는 ? 

 

내가 잡고자 하는 특정 영역이 웹문서에서 어느 위치에 있는지 위치값을 반환해 줄수 있다.

 

티스토리 게시글로 돌아와

 

댓글 등록버튼의 소스에 우클릭 하여 복사 -> selector 복사를 눌러주자 

 태그매니저 css선택도구에 붙여넣기 하자

 

이게 무슨뜻이냐면 우리가 지정하고자 하는 "댓글 등록" 영역의 위치가 어디에 있냐를 설명해주는 것이다 

 

#은 id앞에 붙이는 기호이다 

> (안에 있다) 

#entry27Comment 안에있는 요소중  div태그, 안에 있는 요소중 div태그 안에 있는 요소 중 form태그 등 

이런 뜻이다.

 

사진 위쪽에 id를 펼치면 div가 여러개 나오는데 거기서 우리는 경로를 찾아낼 수 있다.

 

이렇게 위치값을 찾아냈는데

 

위치값은 여러 변경사항들이 생기면 위치가 바뀌기 떄문에 

 

개발 인력이 있다면 id를 설정하는게 가장 좋다

 

하지만 없을 경우 최후의 보루로 쓰자..

 

다 만들었다면 저장 제출 게시 계속을 눌러 

 

테스트를 해보자 !

 

잘 잡힌다 ~~

 

끗 !

 

다음 시간에는 태그매니저를 100% 활용하기 위해 자바스크립트를 최소한 배워보도록 하자