고객지원 > 지식/노하우

지식/노하우

지식/노하우

태그 관리를 위해 알아두면 좋은 IT 지식

페이지 정보

작성일2020-04-09

본문

 

태그 관리를 위해 알아두면 좋은 IT 지식

 
(주)넷스루 전략기획실


태그 관리 솔루션 제공자에 따라 차이가 있지만 모든 태그 관리 솔루션에는 기본으로 제공하는 태그와 트리거가 있습니다. (태그와 트리거에 대한 내용은 “태그관리솔루션” 글 참고) 대부분의 태그 관리 솔루션은 방문 페이지 분석부터 양식(Form) 분석, 전환 분석 등 일반적으로 많이 사용하는 분석이 가능하도록 태그와 트리거를 제공합니다. 하지만 고객사 사이트의 특성이나 분석 목적에 따라 추가로 데이터를 수집하고 분석하려면 활용 목적에 맞는 태그를 정의하고 관리해야 합니다. 이렇게 태그 관리 솔루션이 제공하는 기능을 적극적으로 이용하기 위해서는 다음과 같이 관련된 IT기술의 역할을 이해하고 있어야 합니다.

HTML
HTML은 대부분 웹사이트를 작성하는 언어입니다. 웹사이트를 구성하는 Paragraph, Table, Heading과 같은 Element와 <h1></h1>과 같은 Tag, 그리고 추가 정보를 담는 Attribute가 있습니다. <a href=”http://www.nethru.co.kr”>Nethru Homepage</a>에서 Attribute는 href입니다.
4b1d3699a04af327e41bfb199145f1e8_1586399
 
HTML의 Tag는 <head>, <body>, <table>, <title> 등이 있으며 모든 웹사이트는 <head>와 <body>로 구성됩니다.
HTML지식이 태그 관리기를 사용할 때 어떻게 유용한지 예를 들어 설명하겠습니다. 어떤 이미지를 클릭하면 가격정책 페이지로 리다이렉션된다고 할 때 다음과 같이 코드가 적혀있습니다.
 
<img class=”full-width-main-img” id=”hero-img” src=”main-img.jpg” alt=”learn more about the pricing”>
여기서 이미지의 alt Attribute를 이용하여 이미지를 클릭한 행동을 분석해야 합니다. 이렇게 HTML의 구성요소를 이해하면 쉽게 원하는 변수를 찾아서 태그 관리기에서 이용할 수 있습니다.

CSS Selector
HTML을 이용하여 웹페이지의 내용을 구성할 수 있으나 스타일을 정의할 수는 없습니다. 웹페이지를 시각적으로 표현하기 위해서 사용하는 언어가 CSS(Cascading Style Sheets)입니다. CSS를 이용하여 HTML Tag 요소의 글자색, 배경이미지, 배열 등을 정의할 수 있습니다. 
4b1d3699a04af327e41bfb199145f1e8_1586399
 
CSS Selector는 HTML 태그 이름, Class 이름, 태그 요소에 부여된 ID 등을 이용하여 데이터를 담고 있는 페이지 구성요소를 선택할 때 매우 유용하게 사용할 수 있습니다.

태그 관리기를 이용하면 위 예시 코드의 “h1”, “h1.red-hello”, “red-hello”, “heading1”와 같은 CSS 구성요소를 Selector로 사용하여 특정 Element, 그 Element의 속성값, 텍스트 등을 손쉽게 선택할 수 있습니다.

DOM (Document Object Model)
웹사이트의 페이지는 HTML 언어를 이용하여 작성된 구조화된 문서입니다. DOM은 웹사이트 문서의 HTML 구조를 해석하여 트리와 같이 계층 형태로 표현한 것입니다. 태그를 관리할 때 DOM에 대해서는 기본적인 이해가 필요합니다.

HTML  Tag와 Attribute, CSS Selector 등은 모두 DOM Element 중 하나입니다. 자바스크립트에서 웹 문서를 구성하는 각 Element에 접근할 수 있는 수단을 제공하며 웹 문서를 구성하는 Element들을 추가, 수정, 삭제할 수 있는 기능도 지원합니다. 또한 document.getElementByID(“id”)와 같은 함수로 웹사이트 Element를 반환하게 하고, document.querySelector(“.price-item_label”)을 이용하여 특정 CSS Selector와 일치하는 Element를 반환하게 합니다. 따라서 태그 관리기에서 DOM Element 변수를 사용하면 원하는 조건과 일치하는 웹사이트 Element의 값을 읽어올 수 있습니다.

Regular Expression (정규표현식)
Regex(Regular Expression 약자)는 검색 패턴에서 하나 이상 매칭되는 것을 찾을 때 사용하는 문자열을 말합니다. 태그 관리기에서 비슷한 패턴의 URL을 여러 번 정의하는 대신 Regex를 사용하면 편리합니다.
4b1d3699a04af327e41bfb199145f1e8_1586399
위와 같이 3번 정의해야 하는 URL을 정규표현식을 이용하면 

 

4b1d3699a04af327e41bfb199145f1e8_1586399

와 같이 한번에 정의하여 활용할 수 있습니다.

 

JavaScript
JavaScript를 조금이라도 알면 태그관리기를 사용하여 웹페이지에 있는 데이터를 가져오거나 다루는데 도움이 됩니다. 웹사이트에 이미 정의된 JavaScript 변수가 있을 수도 있습니다. 예를 들어 Shopify라는 웹사이트 소스코드를 보면 로그인한 사용자 ID가 ShopifyAnalytics.meta.page.customeId와 같은 JavaScript 변수로 정의되어 있는 것을 알 수 있습니다. JavaScript를 잘 알면 Custom JavaScript 변수, Custom HTML Tags, Custom Templates을 사용할 때도 유용하게 활용할 수 있습니다.


데이터레이어 (Data Layer)
Data Layer는 GTM (Google Tag Manager)의 핵심 컴포넌트입니다. Data Layer는 웹사이트와 GTM 사이에 있고, GTM에 보낼 정보는 Data Layer를 거쳐서 전달됩니다. 따라서 GTM을 사용하지 않는 웹사이트는 Data Layer가 없습니다. (넷스루 WIseCollector를 사용하는 경우에는 Data Layer를 사용하지 않습니다.)

 

4b1d3699a04af327e41bfb199145f1e8_1586399

 


Data Layer에 데이터를 추가하려면 dataLayer.push() 함수를 사용하면 됩니다.  

4b1d3699a04af327e41bfb199145f1e8_1586399 
4b1d3699a04af327e41bfb199145f1e8_1586399
 
Data Layer에 어떤 정보가 있는지 확인하고, 새로운 정보를 생성하여 활용할 수 있습니다.

마지막으로 태그 관리에 꼭 필요한 지식은 테스트를 잘하는 방법을 아는 것입니다. 삽입한 태그가 제대로 동작하는지 확인하기 위하여 브라우저에서 제공하는 개발자 툴 사용법을 익혀야 합니다.

태그 관리 시스템은 직접 소스 코드를 건드리지 않고 코드를 체계적으로 관리할 수 있다는 장점이 있지만 여전히 적용된 기술을 이해해야 더 잘 사용할 수 있습니다. 마케터와 분석가도 관련된 IT 지식을 이해하고 소통할 수 있어야 더 의미있는 분석을 할 수 있게 됩니다.
 
태그 관리에 필요한 경험과 노하우를 가진 좋은 파트너를 활용하면 분석을 위한 데이터 수집을 위한 기술적인 부분보다 데이터 활용 부분에 더 집중할 수 있게 될 것입니다. 넷스루는 자체 태그 관리 솔루션인 WiseCollector를 납품할 때, 담당 컨설턴트가 비즈니스 적용 범위를 정의하고, 태그 설정 작업뿐만 아니라 맞춤 태그 설정까지 전반적인 태그 관리의 노하우를 전수해드립니다.
  • 트위터로 보내기
  • 페이스북으로 보내기

모바일 페이지로 이동