GTM으로 모든 사이트에 적용 가능한 만능 클릭 태그 심기 - 2
안녕하세요.
nooreong입니다.
1편에서는 GTM에 이미 있는 기능을 잘 활용하는 방법을 소개해드렸습니다.
이전 방법
click_elements와 click_links라는 맞춤 이벤트를 생성하고, 각 이벤트를 수집하는 목적에 맞는 매개변수를 추가하는 방법이었습니다.
불완전한 이전 방법
그러나 실제로 click_elements의 이벤트와 click_class, click_element 매개변수를 조합하여 맞춤 보고서를 뽑아보면 다음과 같은 결과를 확인할 수 있습니다.
뭔가 이상하지 않나요? 분명히 GTM의 디버그 모드에서는 click_element가 선택자 형식으로 잘 수집되는 것 같았는데, 실제로 보니 어떤 객체인지만 표시되는 것이죠.
새로운 방법 소개
2번째 방법입니다. 이는 제가 GA4와 GTM 세팅 관련된 외주 작업 진행 시에만 클라이언트에게 별도 비용을 받고 진행해드리던 것이기 때문에 상세한 내용까지 모두 공개할 수는 없지만, 작업 역량에 따라 충분히 이 글에서 아이디어를 얻어 직접 작업하실 수 있다는 생각에 방법만 소개합니다.
- GTM에 click_elements라는 이벤트를 수집하는 태그를 생성한다.
- 클릭한 요소의 선택자를 반환하는 자바스크립트 코드를 작성한다.
- GTM의 맞춤 자바스크립트 변수에 작성한 코드를 입력한다.
- click_elements 이벤트 수집 시 click_selector 매개변수를 함께 수집한다.
click_elements 이벤트 
click_selector 매개변수 
새로운 방법 판매
가격 : 99,000원
구입 링크 : https://litt.ly/nooreong
구성
1. ChatGPT 명령문 (chatgpt_prompt.jpg)
2. ChatGPT가 작성한 코드 (chatgpt_jscode.txt)
3. 인간이 작성한 코드 (human_jscode.txt)
4. GTM 일괄 설정 파일 (gtm_exported_container.json)
5. 코드 수정 시 무료 업데이트
1. ChatGPT 명령문 
위는 ChatGPT에게 대신 코드를 작성해달라는 명령문입니다. 실제로 쓸만한 코드를 얻기 위해서는 몇 가지 제약 조건을 주어야 하는데요. 제약 조건이 많아서인지 ChatGPT가 말을 잘 안 듣는 감은 있습니다. 수차례 명령하여 얻게 되는 다양한 코드를 하나씩 테스트하고, 가장 나은 코드를 선택하는 다소 번거로운 방식이지만, 코드 작성 능력 없이도 맞춤 자바스크립트 변수를 생성하는 방법에 대한 힌트를 얻어가실 수 있습니다.
2. ChatGPT가 작성한 코드 
제가 위 명령문을 수차례 입력하여 나온 코드 중 가장 심플하고 무난한 결과를 반환했던 코드도 함께 드립니다. 다양한 환경에서 테스트하지는 않았고, 크롬 브라우저의 개발자 도구에서 복사한 선택자와도 꽤 차이가 있습니다.
또한 위의 Nodelist(2)에서 확인할 수 있듯이 반환된 선택자가 고유한 요소를 가리키지 않는 상황이 발생합니다. 그러나 개발 능력이 있거나 공부하고 계신 분들, 이 코드를 참고하여 새로 짜보실 분들에게는 유용합니다.
3. 인간이 작성한 코드 
크롬 브라우저의 개발자 도구를 이용하여 선택자를 복사했을 때와 동일한 결과를 반환하는 것을 목표로 개발하였습니다. 2023년 7월 기준으로 실제 운영되는 3개 이상의 웹사이트에 적용되어있는 상태입니다. 저희가 테스트 한 환경에서는 크롬 개발자도구와 100% 동일한 값이 반환됨을 확인하였으나, 각자의 환경이 다르니 대부분의 상황에서 그렇다고만 말씀드리는 게 좋을 것 같습니다.
위와 같이 웹사이트에서 특정 요소를 클릭 후 GTM을 확인해보면, 해당 변수에 정상적으로 선택자가 담기는 것을 확인할 수 있습니다.
4. GTM 일괄 설정 파일 
GTM에서 단순 import만으로 설정을 마칠 수 있도록 위 4가지 항목이 담긴 일괄 설정 파일(json 확장자)도 함께 제공합니다.
Container export and import
https://support.google.com/tagmanager/answer/6106997
주의사항
click_elements 이벤트를 수집하는 GA4 태그에서 Configuration Tag 또는 Measurement ID를 본인에게 맞게 수정하셔야 정상적으로 수집됩니다.
다음과 같은 경우 구입을 권하지 않습니다.
- 선택자를 수집해도 알아볼 능력이 없다.
- 웹사이트의 속도가 이미 너무 느리다.
- 웹사이트 이용 시 너무나 많은 클릭을 요한다.
- 웹사이트의 요소를 오랜 기간 변경할 일이 없다.
- 웹사이트에 추적하고 싶은 요소가 많지 않다.
- 미리 모든 태그를 설정하고 관리할 자신이 있다.
아래와 같은 한계가 있습니다. 
코드의 계층 구조가 너무 복잡하거나 id나 class가 너무 길게 설정된 경우 선택자가 길어질 수밖에 없는데요. 100자를 넘길 경우 GA에 제대로 보고되지 않는 문제가 있습니다. 필요하신 경우 아래 내용을 참고하여 100자 이하로 결과를 축약하시길 바랍니다.
AS-IS
return path.join(" > ");
TO-BE
var result = path.join(" > ");
return result.length <= 100 ? result : "..." + result.slice(-97);
아래 매뉴얼에 명시된 내용 참고 바랍니다.
감사합니다.
nooreong 드림.
