제목
GTM 클릭 이벤트 트리거
작성자
모큐
작성일
2022-04-21 22:00
조회
3539
답변완료

안녕하세요 GTM 관련해서 문의 드립니다!
클릭 이벤트 트리거의 경우  링크 클릭 시 clicks element - css 도구와 일치 - selector 복사 한 값이 일반적으로 알고 있습니다. 

하지만 gtm 변수 단에서 click Text / click classes / click id 도 확인 가능한 부분인데요, 혹시 해당 변수들을 트리거의 조건으로 잘 안거는 이유는 무엇인가요? 중복값이 없다면 해당 변수로도 충분히 클릭 트리거를 잡을 수 있을 거라 판단되어 질문 드립니다! 

감사합니다.

전체 4

  • 2022-04-23 22:15

    쉼표(,)를 사용하면 여러 요소를 한번에 지정할 수 있습니다.
    위에 첨부드린 강의에서 "여러 요소 지정하기"를 검색해보시면 관련 내용을 찾으실 수 있으세요 🙂


    • 2022-04-25 22:54

      강의 참조하여 해결하였습니다! 감사합니다


  • 2022-04-22 01:27

    안녕하세요, 모큐님!
    이해하신 대로 중복 값이 없다면 click classes, click id를 활용하셔도 문제없습니다.

    - click Text의 경우에는 사이트마다 다르겠지만 다국어 페이지나 외국인이 방문하고 "브라우저의 번역 기능"을 사용한다면 버튼의 텍스트가 바뀌기 때문에 이 경우에는 데이터를 제대로 수집하지 못합니다.
    - click classes, click id의 경우에는 클릭한 요소의 정보 만을 조건으로 하기 때문에 중복이 발생할 경우에는 해당 요소 만을 특정하기 어렵습니다. 개발을 요청하여 식별자를 넣어 달라고 할 수도 있지만, GTM의 장점은 개발 작업 없이도 대부분의 이벤트를 수집할 수 있다는 점이고! 개발을 요청하기도 까다로운 조직/회사도 많기 때문에 되도록 Css Selector를 사용하시라고 권장하는 편입니다. 또, 각각의 트리거마다 조건이 Id, class, text로 제각각 설정되어 있다면 기준이 여러 개가 되기 때문에 유지 보수 차원에서도 조금 불편(?)하기도 하구요.
    - click element + css selector를 쓰면 계층 구조, 속성 등을 활용하여 식별자가 잘 정의되지 않은 페이지에서도 데이터 수집이 가능하구요. 식별자가 다른 동일한 기능의 버튼도 하나의 조건으로 동시에 추적할 수도 있습니다. 개인적으로 사이트 환경, 데이터 수집 규약에 따라 가장 유연하고 효율적으로 대처할 수 있는 방식이라고 생각합니다. 단점은 Css Selector를 작성할 수 있는 지식이 필요하다는 것이겠죠..?

    * 같은 조건(id)
    [click id - 일치 - purchase]
    [click element - css 도구와 일치 - #purchase]

    * 같은 조건(class)
    [click classes - 포함 - prd_btn cart]
    [click element - css 도구와 일치 - .prd_btn.cart]

    개인적으로 저는 다양한 회사의 프로젝트를 진행하고 추적하는 양도 많다 보니 예외 상황(대표적으로 식별자가 잘 정의되지 않은 경우)에서도 데이터를 잘 수집할 수 있는 Css Selector를 활용한 방식을 선호하고 있습니다. 그래서 강의 내용에서도 이 방식 만을 다루고 있구요! (id, classes를 활용하는 방식은 이해가 더 쉽겠지만, 공부하시는 분의 사이트에 식별자가 잘 정의되어 있지 않다면 적용할 수 없을 것입니다. )

    추가적으로 해당 방식을 사용하실 예정이라면 Selector를 복사하는 것은 참고만 하시고, 코드를 통해서 CSS Selector 구문을 작성하시는 방법을 추천드립니다. 복사되는 문장은 하나의 요소만을 지정하는 것이기 때문에 영역 단위의 클릭 추적과 유기적으로 식별자가 변경되는 환경에서는 해당 방식 만으로는 제대로 된 추적을 할 수 없습니다. 그리고 아주 작은 코드 수정에도 트리거가 먹통될 가능성도 높구요. 🙂

    다만... 제가 말씀드린 경우들은 대부분 특수한 케이스이다 보니 가장 익숙하고 편한 방식으로 작업하시면 될 것 같습니다 🙂
    CSS Selector에 대한 더 자세한 내용을 알고 싶으시다면 아래 강의를 참고해 보세요!
    - https://dachata.com/google-tag-manager/post/required-development-knowledge-css/


    • 2022-04-22 10:56

      자세하고 상세한 답변 감사합니다! 추가적으로 mo pc의 click element 는 보통 서로 다르게 되는데, or 조건을 거는 방법은 없을까요? 트리거를 pc / mo 로 분리하거나 동일 값을 찾아내는 방법정도 생각나는데, 트리거가 많아져서 문의 드립니다!

      생각보다 초기 설계가 매우 중요하군요..