제목
GTM 사용자 맞춤변수에 속성정보 가져오는 방법 문의
작성자
Dayunish
작성일
2023-12-08 14:26
조회
403
답변완료
안녕하세요.
도움주셔서 늘 감사합니다.
<a>태그 클릭 이벤트를 생성하여, 변수값을 h3태그 내 텍스트로 잡으려고 합니다.
-
GTM
트리거: CSS정규식 일치 div.feature-intro a
태그: Click text로 변수를 설정한 태그를 설정 시, a태그 하위에 있는 모든 텍스트가 잡힘
ㄴ 하여 h3태그 내 텍스트를 사용자 맞춤변수로 설정하려고 함
-
질문:
개발자도구 콘솔에서 나름 이것저것 쳐봤는데 null값만 뜨네요ㅜ
가르침을 부탁 드립니다! 감사합니다! (_ _)
도움주셔서 늘 감사합니다.
<a>태그 클릭 이벤트를 생성하여, 변수값을 h3태그 내 텍스트로 잡으려고 합니다.
-
GTM
트리거: CSS정규식 일치 div.feature-intro a
태그: Click text로 변수를 설정한 태그를 설정 시, a태그 하위에 있는 모든 텍스트가 잡힘
ㄴ 하여 h3태그 내 텍스트를 사용자 맞춤변수로 설정하려고 함
-
질문:
- 해당 강좌(https://dachata.com/google-tag-manager/post/get-element-etc-to-gtm-variables/)에서와 같이 아래 같은 변수를 설정할 때 getAttribute에 들어갈 값이 무엇인지?
function () {
return {{Click Element}}.getAttribute('src');
} - 사용자 맞춤변수 외 다른 더 쉬운 방법이 있을지?
개발자도구 콘솔에서 나름 이것저것 쳐봤는데 null값만 뜨네요ㅜ
가르침을 부탁 드립니다! 감사합니다! (_ _)
첨부파일 1개
안녕하세요, Dayunish님
해당 영역의 HTML 구조를 봐야 정확하게 알 수 있겠지만,
일단은 아래와 같이 커스텀 변수를 만들어 보시겠어요?
function() {
return {{Click Element}}.querySelector('h3').innerText;
}
1. 텍스트 정보는 getAttribute가 아닌 innerText로 값을 가져옵니다.
2. 사이트마다 구현된 HTML 코드가 다르기 때문에, 기본적인 유형이 아닌 값들은 GTM에서도 동일하게 커스텀하게 가져오셔야 합니다.
h3에 해당하는 여러 항목의 텍스트라서 querySelectorAll로 시도해봤는데 GTM variables 에서 'undefined'라고 뜨네요ㅜ
1.
function() {
return {{Click Element}}.querySelectorAll('h3').innerText;
}
2. function() {
return {{Click Element}}.querySelectorAll('.gtm(=클래스명) h3').innerText;
}
3.
function() {
return {{Click Element}}.querySelector('h3').innerText;
}
댓글 주신바와 같이 설정 시 첫 번째 h3태그는 정상적으로 가져옵니다! 1, 2번 변형된 자바스크립트가 잘못된 것 같은데.. 비 개발자라 그런지 응용이 어렵네요. ㅜㅜ 도움을 부탁 드립니다!
제가 여기서 더 이해한 바로는..
1, 2번과 같이 querySelectorAll 명령어로 개발자도구 콘솔에서 입력 시 해당하는 노드 리스트가 출력되고,
3번의 경우 개발자도구 콘솔에서도 정확한 값(=h3 텍스트=features main monitoring)이 출력되는 차이가 있습니다.
querySelectorAll은 조건에 부합하는 모든 요소를 '리스트'로 형태로 가져오는 함수이기 때문에 그렇습니다. 리스트는 뒤에 [1], [2]을 붙여서 리스트 내에서의 특정 값을 꺼낼 수 있습니다.
querySelector은 조건에 맞는 첫 번째 '요소'만 가져오는 함수이라 바로 innerText를 써도 문제가 없는 것이구요 🙂
혹시, 해당 h3를 구분할만한 class나 id는 따로 없으실까요?
있다면 공유주신 2번처럼 querySelector 함수의 입력 값에 해당 정보들을 추가하실 수 있구요!
없으시다면 a 태그 기준으로 해당 요소의 위치를 직접 지정하여 값을 가져오실 수도 있습니다.
이 내용은 아래 글에서 '인접한 요소의 텍스트' 부분을 참고해 보세요.
- https://dachata.com/google-tag-manager/post/get-element-text-to-gtm-variables/