6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 2 : 댓글 수, 작성 일자 파라미터 생성

 

 

 

앞선 아티클에서 우리는 GTM에서 유용하게 사용할 수 있는 메서드를 살펴보았습니다. 이제 이 메서드들을 실제로 적용해서 기존에 발생시켰던 이벤트를 확장해 보도록 하겠습니다.

 

 

6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 1 : Class, ID 리턴 메서드

 

 

 

 

---

 

 

 

우리가 생성했던 하트 버튼 클릭 이벤트, 즉 [click_btn] 이벤트는 파라미터로 btn_name을 갖고 있습니다. 그리고 page_title도 기본적으로 갖고 있습니다.

그런데 우리는 여기에 몇 가지 추가 정보를 얻기 위해 파라미터를 추가하고자 합니다. 바로 해당 클릭이 일어난 글의 "댓글 수", 그리고 "글 작성일자"죠. 이 두 가지 파라미터를 각각 reply_num과 write_date라고 가정하고, 해당 이벤트 파라미터를 추가해 보도록 하겠습니다.

 

 

 

 

이제 스텝별로 하나씩 살펴보도록 하겠습니다. 

 

 

 

 

 

---

 

 

 

 

○ 동적 변수 생성하기

 

이제 우리는 동적 변수를 직접 정의해서 생성하고, 해당 동적 변수를 우리가 새로 선언하는 이벤트 파라미터의 값으로 할당하는 절차를 거칠 예정입니다. 예를 들어 파라미터 [btn_name]의 value는 'heart'라는 스트링 값으로 지정했습니다. 하지만 이 value 영역이 상황에 따라 바뀌는 값이어야 한다면, 해당 value는 "특정 조건에 따라 값을 리턴하라"라는 값이 되어야 합니다. 

 

이제 이 정의를 변수에서 직접 진행하게 되는 것입니다. GTM의 메뉴에서 [Variables]로 가보겠습니다. Built-in Variables도 확인이 가능합니다. 우리가 스크롤 이벤트에서 사용했었던 "Scroll Depth Threshold"도 보입니다. 이 값 역시 동적 변수의 하나입니다. 해당 트리거 발동 시점의 스크롤 뎁스 비율을 리턴한다는 의미겠죠? 이제 이러한 형태의 변수를 직접 만들어 보겠습니다. 하단의 [New] 버튼을 클릭합니다.

 

 

 

해당 변수의 이름은 적당히 [작성자]로 진행하고, [Custom Javascript]를 선택합니다. 

 

 

 

 

그리고 다음과 같이 함수를 작성해 줍니다. 티스토리 블로그의 작성자 영역에 대해서 검사를 진행해 보면, "tt_num_g"라는 클래스를 사용하고 있다는 것을 알 수 있습니다. 해당 객체의 innerText 프로퍼티를 불러오면 작성자 이름이 나오기 때문에 이와 같은 함수를 작성한 것입니다.

 

function() {
  return document.getElementsByClassName("tt_num_g")[0].innerText;
}

 

 

 

 

동일한 방식으로 작성일자도 생성해 줍니다. 해당 함수는 [작성 일자]라는 변수명으로 저장했습니다.

 

function() {
    return document.getElementsByClassName("date")[0].innerText;
}

 

 

 

 

 

---

 

 

 

이제 [click_btn] 이벤트의 파라미터를 추가합니다. parameter name은 각각 [author] / [write_date]로 정의합니다. 다만, 기존 파라미터와 다른 점은 value에서 우리가 생성한 [작성자]와 [작성 일자]를 선택해 적용한다는 점입니다. 

 

 

 

 

이제 위 상태까지 적용된 상태에서 GTM 버전을 Submit을 진행하고 나서, 디버거를 ON 한 상태에서 하트(좋아요) 버튼 클릭을 테스트해보겠습니다. 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

참고로 위 두개의 새로 추가된 event parameter 역시 custom dimensions로 추가가 가능합니다. [Custom definitions] 메뉴에서 추가를 진행합니다.