이번 아티클부터는 기존의 GTM에서 좀 더 확장된 기능을 사용하기 위해서 Javascript를 사용해 이벤트를 생성하고 적용하는 방법을 알아보도록 하겠습니다. 물론, 단순한 작업이야 기존의 GTM에서 제공하는 기능을 통해서 구현하면 되겠지만, Javascript를 사용하는 방법을 알아두면 좀 더 다양한 기능을 사용할 수 있게 됩니다.
우선, chrome의 콘솔에서 사용하는 메서드를 두 개만 알아보겠습니다. Javascript에 대한 이해도는 각각 다를 테니, 해당 메서드는 특정 ID나 Class가 갖는 요소(객체)를 리턴하는 명령어라고 기억해 두면 되겠습니다.
document.getElementById("ID");
document.getElementsByClassName("Class")[index];
위 메서드는 위와 같이 사용해주면 됩니다. 당연하겠지만 HTML 문서를 기준으로 하고 있으며, Javascript 메서드에 대해서는 아래의 API 문서를 참조하면 되겠습니다.
Document.getElementById() - Web API | MDN
Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element (en-US) 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게
developer.mozilla.org
Document: getElementsByClassName() method - Web APIs | MDN
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).
developer.mozilla.org
간단하게 설명하자면, ID는 고유값이므로 하나의 객체만 리턴 하지만 Class는 복수의 요소가 존재할 수 있으므로 기본적으로 Array타입으로 리턴하게 됩니다. 그래서 인덱스 값을 지정하게 되죠.
사용 예시를 살펴보겠습니다.
위의 하트모양 버튼 이미지의 클래스를 검색해 보니, ico_postbtn ico_like으로 확인됩니다. 콘솔에서 이를 활용해서 입력해 보겠습니다. 클래스이므로, 인덱스 넘버를 붙이지 않은 경우와 붙인 경우를 모두 알아보겠습니다.
인덱스 넘버를 붙이지 않은 경우에는 배열 타입으로 리턴되고, 인덱스 넘버를 붙인 경우에는 정확하게 해당 요소 <span>이 지정되어 출력됩니다. 해당 객체에는 각 요소의 이름이나 텍스트, 여러 가지 프로퍼티들이 저장되어 있을 것이고 이를 추가로 호출할 수 있겠죠?
이제 이 메서드를 활용하여 GTM에서 이벤트를 설정하는 방법을 살펴보겠습니다.
'Data Literacy > Google Analytics' 카테고리의 다른 글
| 6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 3 : ClickElement + CSS 선택자로 동적 변수 생성 (0) | 2023.11.05 |
|---|---|
| 6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 2 : 댓글 수, 작성 일자 파라미터 생성 (1) | 2023.11.03 |
| 6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [3/3] (0) | 2023.10.24 |
| 6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [2/3] (0) | 2023.10.22 |
| 6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [1/3] (0) | 2023.10.22 |
