우리는 앞선 아티클에서 HTML문서 요소들의 class나 id를 이용해, 해당 요소에 대한 이벤트를 정의했습니다. 이 과정에서 Javascript 함수를 이용했죠. 그러나, 모든 HTML 요소들이 class나 id를 지정하지는 않습니다. 그럼 class나 id가 없는 요소는 어떤 기준으로 이벤트를 생성할까요?
이번 아티클에서는 이렇게 class나 id가 없는 경우, ClickElement와 CSS 선택자를 통해서 동적 변수를 생성하는 방법을 살펴보도록 하겠습니다.
현재 우리가 생성해 둔 [click_btn] 이벤트에는 'btn_name'이라는 event parameter가 있습니다. 이 값이 'heart'라는 스트링 값으로 지정되어 있는데, 이 value를 Javascript를 이용해 동적 변수를 적용한 reply_num, write_date와 같이 "클릭한 버튼의 이름" 텍스트를 리턴하는 동적 변수로 만들어 봅시다.
1. Click Element 기본 제공 변수로 지정
우선 class나 id가 없는 요소를 선택하기 위해서는 CSS 선택자를 불러올 수 있는 환경을 만들어야 합니다. 이제 그 단계를 하나씩 준비하겠습니다. 우선, GTM으로 들어가 Variables > Built-In Variables 메뉴의 Configure(구성)을 클릭합니다.
여기서 Clicks > Click Element를 선택해, 기본 제공 변수 목록에 추가하겠습니다. 참고로 우리는 '댓글 수', '작성 일자'라는 변수를 Javascript로 직접 생성해 이 레벨에 추가해 둔 상태임을 참고하세요.
2. Preview 기능을 통해 요소의 Click Element 정의 확인하기
이제 특정 웹 문서 요소의 선택자를 확인해야 합니다. 이를 위해서 우리는 GTM에서 제공하는 Preview(미리보기) 기능을 사용하게 됩니다. 이제 메뉴 우측 상단의 [Preview]를 클릭해 보겠습니다. 그럼 아래 그림과 같이 GTM 프리뷰 모드 팝업이 실행됩니다.
웹사이트 URL 항목에는 우리가 확인하고자 하는 좋아요 버튼이 있는 티스토리 블로그 글 중 아무거나 하나의 URL을 입력합니다. 그리고 [Connect] 버튼을 클릭합니다.
그러면 위와 같이 디버그 모드가 실행되었다는 팝업이 실행되고, 탭 상에서 태그 어시스턴트가 실행되면서 favicon이 우리가 테스트하려고 하는 페이지의 탭을 가리키는 형태가 됩니다.
자, 이제 해당 페이지의 URL이 열린 탭으로 들어가겠습니다. 이제부터는 해당 페이지 안에서 하는 행동들이 실시간으로 기록됩니다. 마치 GA4 페이지의 Debug View와 비슷한 기능이라고 생각하면 됩니다. 아래 그림과 같이, 좋아요 버튼을 클릭해 보겠습니다. 저는 네 번 정도 클릭을 반복했습니다.
이제 Tag Assistant 탭으로 돌아와 보겠습니다. 좌측 메뉴 탭에는 해당 페이지에서 수행된 모든 이벤트가 1번부터 차례로 기록되어 있습니다. 그리고 위에 'Click' 이벤트가 있는 것을 확인할 수 있습니다. 이 이벤트를 클릭하면, 하나의 이벤트에 대한 여러 정보가 작성되는 것을 알 수 있습니다.
예를 들어 [Tags] 탭에 보면, Click이 발생했을 때 우리가 미리 설정해두었던 [GA4_이벤트_하트 버튼 클릭] 이벤트가 발생했다고 기록되어 있습니다. (만일 우리가 허공을 클릭했으면, 해당 Click은 기록되지만 이벤트는 남지 않는 방식입니다) 해당 클릭이 벌어졌을 때 일어나는 이벤트와 일어나지 않은 이벤트를 모두 보여주는 것이죠. 참고로 현재 Tags 메뉴에 등록되어 있는 태그의 종류는 아래와 같습니다. 하나의 클릭이 발생했을 때, 아래의 전체 태그 중 발생한 것과 발생하지 않은 것을 모두 보여주는 것입니다.
이제 눈치 채신분들도 있겠습니다. 여기서 우리는 변수와 관련된 정보를 확인하려고 하니, 해당 탭 중 [Variables] 탭을 확인해 보겠습니다. 자, 아래의 정보는 "우리가 하트(좋아요) 버튼을 클릭했을 때 발생한 이벤트의 변수 값들"입니다.
맨 위의 _event / _triggers / _url 을 제외한 모든 변수들은 지금 우리 GTM에 등록되어 있는 모든 변수입니다. 직접 만든 변수인 [댓글 수], [작성 일자]도 확인되네요.
자, 여기서 중요한 것은 Click Element 변수에 저장된 값입니다. 이 값은 결국 우리가 클릭한 해당 요소(버튼)의 CSS 선택자 위치를 나타내는 변수이라고 이해하시면 됩니다.
"HTMLSpanElement: html > body.theme_pink#tt-body-page > div.white#wra" + "p > div#container > main#main > div.area_view > div.area_article > d" + "iv.article_view > div.container_postbtn.#post_button_group > div.pos" + "tbtn_like > div.wrap_btn#reaction-74 > button.btn_post.uoc-icon > di" + "v.uoc-icon > span.ico_postbtn.ico_like"Event
자, 이제 Click Element라는 변수가 어떤 요소를 의미하는지 확인했습니다. 그럼 이제 이 Click Element를 활용해서 또 하나의 동적 변수를 생성해 보겠습니다. 어떤 요소의 inner text(우리 의도는 버튼 이름)을 불러오는 동적 변수이죠. 역시 이번에도 [Variables] > [User-Defined Variables]에서 [New]를 선택해 새로운 동적 변수를 만들어 보겠습니다.
3. Click Element를 활용한 동적 변수 생성하기
이번에도 변수 이름은 [버튼 이름]이라고 정의하고, Custom Javascript를 선택합니다. 이번에도 버튼 이름, 즉 요소의 inner text를 리턴해야 하므로 아래와 같이 함수를 선언하겠습니다. 참고로 아래 코드 입력 란에서 '{{'만 입력해도 자동으로 변수들을 선택할 수 있는 리스트가 출력됩니다.
function() {
return {{Click Element}}.innerText;
}
4. 새로 정의한 동적 변수 이벤트에 적용하기
이제, [버튼 이름]이라는 동적 변수를 이벤트에 실제로 적용합니다. 우선 하트 버튼 클릭 이벤트의 [btn_name] 파라미터의 값을 수정합니다.
아래와 같이 수정하고, 해당 이벤트의 변동사항을 저장합니다.
이제 이 단계까지 저장했다면, 해당 이벤트 파라미터가 잘 잡히는지 테스트를 진행해야겠죠? 우선 미리 열어두었던 Tag Assistan와 기존 블로그 글도 닫고, 새로 Preview를 실행해 줍니다. 이번에도 아까와 같은 페이지 글로 확인해 보겠습니다.
이번에는 해당 글에서 좋아요 버튼 한 번, 공유하기 버튼을 한 번 클릭해 보도록 하겠습니다.
위 두 개의 클릭 이벤트 모두 '버튼 이름'이라는 변수가 출력되는 것을 확인할 수 있습니다! 단, 주의할 것은 여기에 출력되는 변수들이 모두 '이벤트'로 적용된 것은 아직 아닙니다. 일단 변경 사항을 GTM에서 배포하지도 않은 상태이고, 해당 동적 변수는 '좋아요' 버튼에만 적용했기 때문입니다.
이제 공유하기 버튼 이벤트에도 해당 동적 변수를 적용하고, 배포까지 진행하겠습니다.
디버거 ON 후, 해당 좋아요와 공유하기 버튼을 클릭했을 때 아래와 같이 디버그 뷰에서 btn_name 이벤트 파라미터가 잡히는 것을 확인할 수 있습니다.
Click Element는 HTML 문서의 거의 대부분을 클릭하면 얻을 수 있는 CSS 선택자이기 때문에, 거의 모든 버튼 등에 적용이 가능합니다. 하지만, 우리가 테스트했을 때 처럼 허공을 클릭하면 해당 허공 영역(예를 들어 <article>태그)도 불러오기 때문에, 트리거를 주의해서 사용해야 합니다.
'Data Literacy > Google Analytics' 카테고리의 다른 글
| 7. GA4 데이터 분석하기 : Explorations (2) - 도넛차트(+세그먼트) (1) | 2023.11.16 |
|---|---|
| 7. GA4 데이터 분석하기 : Explorations (1) - 테이블 차트 (1) | 2023.11.08 |
| 6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 2 : 댓글 수, 작성 일자 파라미터 생성 (1) | 2023.11.03 |
| 6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 1 : Class, ID 리턴 메서드 (0) | 2023.10.29 |
| 6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [3/3] (0) | 2023.10.24 |
