🖱️

요소 ID 설정하기

중요 공지

“버블박스”가 “노코더스”라는 이름으로 변경됐어요

현재 사이트는 더 이상 운영하지 않으니 노코더스 사이트로 이동해주세요

노코더스 ㅣ 노코드 툴, 버블 시작하기

개발 없이 나만의 서비스를 만드는 방법! 노코드 툴, 버블을 노코더스에서 차근차근 시작하세요.

https://nocoders.kr/

1. 클릭 이벤트를 알아내는 법

2. 요소가 지닌 속성 값의 상태가…?

1. 클릭 이벤트를 알아내는 법

구글에서 제공하는 Google Tag Manager(이하 GTM)은 태그(tag)를 활용해 유저의 활동을 추적합니다. 예를 들어, 버튼 클릭이나 스크롤 등이 있습니다. GTM이 활동을 추적하는 방식은 아래와 같습니다.

GTM에서 트리거 이벤트를 정의

유저가 트리거를 동작시키면 GTM이 태그를 GA에게 전송

GTM은 태그를 전달하기만 할 뿐, 이에 대한 확인은 GA에서 진행합니다

GA에서 테그를 집계해 유저 활동 내역을 확인

GTM 사용 방법은 아래 링크를 참고하세요

구글 태그 관리자(GTM), 어떻게 쓰면 좋을까요? | 요즘IT

구글 태그 관리자(GTM)는 이벤트 트래킹 관리를 코드 개발 없이 할 수 있도록 돕는 서비스입니다. 디지털 환경에서 태그(Tag)를 기반으로 유저의 활동을 추적하고, 기록하도록 돕습니다. 여기서 태그는 이벤트 기록 정도로 생각할 수 있습니다. 특히 초기 세팅 외에는 개발적 지식이 없어도 많은 기능을 사용할 수 있어 마케터, 데이터 분석가, PM/PO가 데이터 작업을 할 때 매력적인 선택지입니다. 이번 글에서는 구글 태그 관리자(GTM) 활용법과 기본적인 동작 원리에 대해 살펴보겠습니다.

https://yozm.wishket.com/magazine/detail/1888/

아무튼 GTM으로 이벤트를 트래킹하려면 먼저 GTM에서 트리거를 정의해야 합니다. 트리거를 지정하기 위해선 (1) 트리거 유형과 (2) 해당 유형의 상세 조건을 정의해야 합니다. 예를 들어, “회원가입 버튼 클릭”을 트리거로 정의하기 위해선 아래의 과정을 거쳐야 합니다.

트리거 유형을 [클릭]으로 설정하고

클릭 상세 조건으로 “[회원가입 버튼]을 클릭할 때”를 설정

근데 위 2번을 보면 의문이 생깁니다. [회원가입 버튼]을 GTM에게 어떻게 알려줄 수 있을까요? 그냥 버튼명이 “회원가입”라고만 쓰이면 될까요? 맞는 말이지만, 완벽하지는 않습니다. 페이지를 구성하는 텍스트, 버튼, 링크 같은 요소들은 각각 속성 값을 지니고 있습니다. 그리고 각 요소가 가지고 있는 속성 값을 활용해 [회원가입 버튼]이 무엇인지 알려줍니다. “회원가입”이란 버튼명도 버튼이 지닌 속성 값 중 하나일 뿐입니다.

각 요소가 지닌 속성 값이 무엇인지 확인하고 싶다면, 브라우저에서 개발자 도구를 들어가 확인할 수 있습니다. 예를 들어 아래의 버튼 요소는 클래스 속성을 지녔고, 이에 대한 속성 값이 “btn apply-author is-login btn-common-2 btn-white-none-border text700”입니다. 만약 해당 버튼의 클릭 이벤트를 트래킹하고 싶다면, 아래처럼 설정하면 됩니다. 참 쉽죠?

트리거 유형을 [클릭]으로 설정

class 속성이 “btn apply-author is-login btn-common-2 btn-white-none-border text700”인 요소를 클릭할 때를 상세 조건으로 지정

2. 요소가 지닌 속성 값의 상태가…?

하지만 버블로 빌드한 서비스를 보면, 위에 본 이미지와 다르게 요소가 지닌 속성 값이 길고 복잡한 걸 알 수 있습니다. 아래 버튼 요소의 class 속성 값을 보면 “clickable-element bubble-element Button baTaNdaA”입니다. “baTaNdaA” 같이 속성 값이 이상하고 불규칙적인 걸 볼 수 있습니다. 보면 다른 요소들도 어딘가 이상한 class 속성 값을 지니고 있습니다.