안녕하세요 이번 시간에는 구글태그매니저 태깅을 위해 기본적으로 알아야 하는 개발 기초 지식 을 간단하게 살펴보려고 합니다.
1.HTML 구조와 태그 및 속성
HTML은 크롬, 익스플로러와 같은 웹 브라우저에 콘텐츠를 표현하기 위한 목적으로 사용하는 마크업 언어입니다. 즉, 우리가 보는 브라우저 상의 모든 내용은 텍스트와 숫자로 이루어져 있다는 말이 되는 것이죠. 그리고 HTML은 태그와 속성으로 이루어져 있습니다.
1)태그
HTML은 콘텐츠를 표현하기 위해 태그를 사용합니다. 기본적으로 양쪽을 < >으로 감싼 형태로 사용합니다. 예를 들어 저희 리드스팟의 “문의하기” 버튼의 HTML구조를 살펴보면 아래와 같습니다.
“문의하기”라는 텍스트는 그 자체로 소스에 들어가 있는 것을 확인 할 수 있구요, 여기서 태그는 자주색으로 되어있는 부분입니다. span이라고 되어 있는 부분을 “span 태그”라고 읽으면 됩니다.
추가적으로 위 예시에서 </span>이라는 태그를 확인 할수 있는데, 태그명 앞에 /이 들어가면 닫는 태그라고 부르며 콘텐츠의 끝을 정의하기 위해 사용합니다. 이 부분은 많이 들어보셨을거라 생각합니다. 구글 태그 관리자를 설치할때나, 구글애널리틱스 태그를 설치할때 <head>태그의 안에 설치하라는 가이드가 나오죠? <head>또한 태그로써 여는 태그 및 닫는 태그가 존재하여 <head> ~ </head> 까지가 해당 태그의 영역이라고 보시면 됩니다.
2)계층구조
태그로 감싸진 콘텐츠에는 문장뿐만 아니라 태그도 포함시킬 수 있습니다. 그림01의 내용을 다시 한번 살펴보면 태그 앞에 ▼과 ▶ 버튼이 존재하는 것을 확인할 수 있는데요, 이는 HTML문서가 태그안에 태그를 포함하는 계층구조로 구성되어 있다는 의미입니다. 그림01을 계층구조로 그려보면 다음과 같습니다.
이와 같이 HTML의 다양한 태그들은 영역을 구분하는 용도로 쓰이며, 콘텐츠를 표현하는 용도로도 사용됩니다.
태그의 다양한 종류가 있지만 우리는 GTM을 다룰 정도의 최소한의 개발 기초 지식 만 필요합니다. 여기까지만 알고 넘어가셔도 일단은 괜찮습니다.
3)속성
속성은 태그의 기능을 추가하거나 수정하는 용도로 사용합니다. 그리고 HTML상의 다양한 요소(태그와 콘텐츠를 총칭)들을 식별하기 위해 사용합니다.
그림01. 에서 다시 보면 span뒤에 주황색 글씨로 class라는 부분이 있습니다. 바로 이 부분이 속성입니다.속성은 여는 태그에 아래와 같이 사용이됩니다.
속성의 종류 또한 태그와 같이 꽤 많은 종류가 있습니다. 물론 이부분도 태그와 같이 넘어가면 좋겠지만 여기서는 Id와 class 딱 한부분만 짚고 넘어가겠습니다. 태그매니저에서는 이벤트를 추적할 요소를 지정할때 Id와 class 속성을 기본적으로 활용하기 때문입니다.
기본적으로 제공되는 제공 변수에 클릭한 Id와 클릭한 class값이 바로 위의 요소를 뜻하는 것입니다.
구글태그매니저에서 트리거를 설정할때 class명을 쓰든 ID를 쓰는 물론 설정하는 사람이 결정할 일입니다. 하지만 두개의 큰 차이점은 반드시 알고 쓰셔야합니다. Id는 페이지에서 하나의 요소에만 고유한 값을 써야하는 속성이고 class는 여러 요소에 같은 값을 써도 무방하다는 큰 특징을 가지고 있습니다.
즉 Id는 고유한 이름과 같은 존재고 class는 분류를 하는 카테고리 명칭과 같은 존재라는 것입니다. 따라서 GTM 이벤트 설정시 트리거 설정을 하실때 click classes 값을 기준으로 한다면, 페이지내에 중복되어 사용되었을 가능성이 있으므로 조심하셔야 된다는 이야기입니다.
지금까지 HTML의 기본 태그, 계층구조, 속성까지 빠르고 가볍게 알아보았는데요,
다음 개발 기초 지식 편에서는 GTM변수에 요소정보를 가져오는 방법에 대해 설명해드리는 시간을 갖도록 하겠습니다.
