GTM - 맞춤 자바스크립트 변수 추가

목표 : 웹에디터 툴바에서 고객이 자주 사용하는 기능을 트래킹 하기 위해 클릭되는 툴바 버튼명을 추적하기로 함

기본적으로는 트리거로 해당 웹에디터의 툴바 버튼을 css 선택자로 지정한 후 태그의 매개변수의 값으로 {{Click Text}}를 입력하면 완료되는 형태입니다.
툴바의 버튼영역을 클릭하면 정상적으로 버튼명 수집이 가능하였으나, 버튼영역이 아닌 버튼 이미지 클릭시에는 버튼명 수집이 불가능한 문제가 발생했습니다.

[html 형태]

<button id="moreParagraph-1" data-group-name="moreParagraph-1" type="button" tabindex="-1" role="button" class="fr-command fr-btn" data-cmd="moreParagraph" data-title="More Paragraph">
    <img src="/img/icon-align.svg" alt="moreParagraph"><span class="fr-sr-only">More Paragraph</span>
</button>

※ button 영역 클릭시 'More Paragraph' 정상 수집, 이미지 클릭시 undefined

[해결방안]
맞춤 자바스크립트 변수를 생성하여 Click Text가 없는 경우 상위 노드의 data-title 값을 가져오기로 함

ㅇ 태그구성
    - 태그유형 : Google 애널리틱스 : GA4 이벤트
    - 구성태그 : GA4_pageview (GA와 연결된 태그 선택)
    - 이벤트이름 : 웹에디터-툴바버튼클릭
    - 이벤트 매개변수
        ㄴ 매개변수 이름 : click_text
        ㄴ 값 : {{Event Element Data-Title}}

ㅇ 트리거
    - 트리거 유형 : 클릭 - 모든 요소
    - page Path - 정규표현식과 일치 - /글쓰기URL|/다른글쓰기URL
    - Click Element - CSS 선택 도구와 일치 - .fr-command, .fr-command img

ㅇ 변수 구성
    - 이름 : Event Element Data-Title
      ㄴ 태그구성의 이벤트 매개변수 값과 통일
    - 변수유형 : 맞춤 자바스크립트
    - 자바스크립트

function () {
    var click_title = {{Click Text}};
    if(click_title) return click_title;

    // Click Text값이 있는 경우 바로 리턴시킴
    // 에디터 도구의 이미지 클릭시 Text를 읽어오지 못해 parent의 data-title 확인
    
    var _ele = {{Click Element}}.parentNode;
    var parent_click_text = _ele.getAttribute('data-title');
    return parent_click_text;
}

* 호환성 문제가 발생할 수 있기 때문에 바닐라 자바스크립트로 작성

팁!
GTM 자바스크립트 작성시 getAttribute로 값을 가져와야지, dataset을 이용해 _ele.dataset('title'); 이런 형태로 작성하면 동작하지 않음. 동작에 문제가 발생하여 원인 찾는다고 시간 낭비...