제목
GTM이 트리거를 제대로 인식하지 못하는 것 같습니다..
작성자
헤헤
작성일
2023-06-22 22:07
조회
439
답변완료
안녕하세요!
현재 SPA 웹사이트에서 GTM으로 클릭 이벤트를 수집하고 있습니다.
개발자분의 도움으로 컴포넌트에 고유의 id값을 삽입하였고
이벤트 설정 시 트리거를 click id로 설정하였습니다.
그런데 문제는,
GTM이 click id값을 제대로 인식할 때가 있고 아닐 때가 있다는 것입니다.. ㅠㅠ
여쭤보고 싶은 부분은
gtm에서 click element - css 선택도구와 일치
** 첨부한 이미지는 동일한 버튼을 두 번 클릭했을 때, 각각 click element 값이 다르게 잡히는 상황입니다!
어떻게 위 문제를 해결하면 좋을지 감이 잡히지 않아 여쭈어 봅니다 ..! ㅠㅠ
긴 글 읽어주셔서 감사합니다.
현재 SPA 웹사이트에서 GTM으로 클릭 이벤트를 수집하고 있습니다.
개발자분의 도움으로 컴포넌트에 고유의 id값을 삽입하였고
이벤트 설정 시 트리거를 click id로 설정하였습니다.
그런데 문제는,
GTM이 click id값을 제대로 인식할 때가 있고 아닐 때가 있다는 것입니다.. ㅠㅠ
여쭤보고 싶은 부분은
- 중복되지 않는 고유의 id값을 넣었음에도 GTM이 id값을 인식하지 못하는 이유가 궁금합니다.. (spa 웹사이트인 것과 연관이 있나요?)
- 위에 대한 차선책으로, click element*값을 트리거로 활용하려하는데, 적절한 방법일까요?
- )동일한 클릭 이벤트여도 click element가 2,3가지 값으로 섞여 나오고 (이미지 첨부**)
- )사이트 내 변동사항이 생기면 click element값이 변동될까 우려됩니다 (최근 개발 서버용 웹사이트를 하나 더 생성하는 변동사항이 있었는데, 기존과 다른 click element값을 보입니다)
gtm에서 click element - css 선택도구와 일치
html > body > div#app > div.css-1p3abvt.e1dvxre60 > div.css-4bg12.ehlz6e40 > section.css-1cgw8vn.e1naqh141 > div.css-uw4ndj.e1naqh140 > div.css-1fhoxft.e555j778 > div.css-ga3b11.e555j772 > span.css-12xgrt7.e555j773 > div.css-10131v4.e555j774 > button.css-1fo62t4.e555j775#filter_day > span
로 트리거를 설정해두었습니다.** 첨부한 이미지는 동일한 버튼을 두 번 클릭했을 때, 각각 click element 값이 다르게 잡히는 상황입니다!
어떻게 위 문제를 해결하면 좋을지 감이 잡히지 않아 여쭈어 봅니다 ..! ㅠㅠ
긴 글 읽어주셔서 감사합니다.
첨부파일 2개
안녕하세요, 헤헤님
1. 현재 말씀주신 문제는 SPA와는 무관합니다.
2. a 태그가 있다면 '클릭:링크만' 유형으로 트리거를 만드셔야 하고, id 값도 a 태그안에 입력이 되어야 합니다.
a 태그가 없고 버튼에 여러 element가 있는 경우라면, 해당 element 모두에 id 또는 class가 들어가 있지않는 이상 클릭하는 위치에 따라 트리거가 동작을 안하게 됩니다.
3. GTM만으로 작업하는게 아니라 개발의 도움을 받으시는 상황이라면 id 값을 넣는것보다 개발을 통해 직접 트리거를 실행시키는 방법이 더 나으실 수 있습니다.
- 참고(맞춤 이벤트 활용하기) : https://dachata.com/google-tag-manager/post/how-to-use-gtm-datalayer/
시중의 강의나 블로그 콘텐츠에는 click id, click class를 활용한 방법이 많이 소개되고 있는데요.
사실 이 방식들은 id, class가 기존에 코드상에 잘 입력되어있고, 웹 표준에 맞춰 잘 구축된 사이트가 아니라면 실전에서 사용할 수 없는 경우가 대부분입니다.
(강의 편의를 위해 위 방식들이 소개되고 있다는 생각이 드네요 )
그렇다고 개발을 통해서 id나 class를 하나씩 넣을 바에는 차라리 위에서 말씀드린 dataLayer를 활용하거나 GTM이 아닌 gtag.js로 개발자가 직접 이벤트를 추적하는 방식이 유지보수나 관리적인 측면에서 더 낫다고 생각됩니다.
다만, GTM을 사용해서 얻을 수 있는 다른 장점들이 있기에 '클릭 트리거'를 통해 이벤트를 수집하고 싶으시다면 이미 학습하신대로 CSS Selector 구문을 잘 작성하실 수 있어야 합니다.
지금 공유주신 CSS Selector을 보니 불필요하게 여러 정보(>, class, id)들을 많이 넣어서 작성을 하신 상태인데요. 해당 방식으로 조건을 설정할 경우에는 사이트에 조금만 변화가 생겨도 트리거가 망가지게 됩니다. (중간중간 생략가능한 요소들은 제거하시는 걸 추천드려요)
현재, 방향은 잘 잡으신 상태이시고 CSS Selector를 생성 방식에 대한 내용만 좀더 학습하셔서 작성한 내용만 개선하시면 될 것으로 보입니다.
- https://dachata.com/google-tag-manager/post/required-development-knowledge-css/
- https://dachata.com/google-analytics-4/post/ga4-click-event-tagging/
마지막으로 CSS Selector의 쉼표(',')와 별표('*') 문자의 역할을 알아보시는 것을 추천드려요
자세한 답변 감사합니다! 혹시 웹 표준에 맞춰 잘 구축된 사이트는 어떠한 사이트인지 추가 설명 부탁드려도 괜찮을까요?!
제가 답변드린 '웹 표준'은 HTML이라는 마크업 언어에 한정해서 좁은 범위로 언급드린 내용입니다.
HTML의 각 태그들은 용도가 정해져 있고, 페이지 개발에 각 용도에 맞춰 사용하는 것이 권장되곤 하는데요.
현업에서 여러 서비스를 작업하다보면 용도에 맞춰서 개발이 안된 서비스들을 많이 접하게 됩니다.
예를 들면 a나 button 태그 없이 버튼을 구현한 페이지나, a 태그 안에 a 태그가 들어가는 등 생각보다 예상치(?) 않게 커스터마이징되거나 개발자라면 의문을 가질만한 방식으로 구현된 사이트들이 종종 보이곤 합니다.
물론 위 케이스가 일반적인 경우는 아니지만 id, class 뿐만 아니라 이런 사이트 구조 또한 이벤트 수집 난이도에 큰 영향을 주기 때문에 함께 언급드린 것으로 이해해주시면 좋을것 같네요 ㅎㅎ
앗 자세한 설명 정말 감사합니다!
혹시 한 가지 추가로 여쭤봐도 괜찮을까요?!
class 값의 경우, 사이트에 변화가 있을 때마다 혹은 외부 요인으로 인해
class 값이 달라질 수 있나요?
말씀주신 방법을 참고해서 css selector를 작성해보려하는데,
불필요한 정보들을 생략한다 하더라도
그 안에 class 값이 포함되는 경우가 있을 것 같은데요!
그런 경우에는
class 값의 변동으로 인해
트리거를 매번 바꿔줘야 하는 것인지 여쭤보고 싶습니다!!
특정 라이브러리나 프레임워크를 사용해서 사이트가 제작된 경우에는 class에 임의의 값이 들어가는 경우가 있는데요.
이 정보들이 말씀하신대로 불규칙적으로 변동되는 구조라면 해당 class는 트리거의 조건으로 사용하시면 안됩니다.
(변동되는 값을 조건으로 설정하신다면, 이 값이 바뀔때마다 트리거 조건도 변경되어야 합니다.)
그래서, 최대한 변동되지 않은 id, class 값만을 사용해서 트리거를 설정하셔야 하구요.
해당 값이 부족한 상태라면 어쩔 수 없이 개발자의 도움(주요 요소에 id, class 입력)을 받아서 트리거를 설정하셔야 합니다.