웹용 사용자 정의 변수 유형

Google 태그 관리자에서 기본 제공 변수로는 처리할 수 없는 특정 요구사항에 맞춰 맞춤형 사용자 정의 웹 변수를 만들 수 있습니다.

새로운 사용자 정의 변수를 만드는 방법은 다음과 같습니다.

왼쪽 탐색 메뉴에서 변수를 클릭합니다.
사용자 정의 변수 섹션에서 새로 만들기를 클릭합니다.
변수 구성을 클릭하고 원하는 변수 유형을 선택합니다.
선택한 변수 유형의 구성 옵션을 입력합니다.
변수의 이름을 지정합니다. 변수의 기능을 설명해 주는 이름 지정 방식을 사용하세요(예: '데이터 영역 변수: 제품 이름').
저장을 클릭합니다.

태그 관리자에서는 웹용으로 다음과 같은 사용자 정의 변수를 지원합니다.

탐색
- HTTP 리퍼러
- URL
페이지 변수
페이지 요소
유틸리티
사용자 제공 데이터
컨테이너 데이터

HTTP 리퍼러

값이 사용자가 방문한 이전 페이지의 URL인 HTTP 리퍼러로 설정됩니다. 예를 들어, 어떤 사람이 홈페이지에서 제품 페이지로 이동했으면 홈페이지가 리퍼러입니다. 이 변수 유형의 인스턴스는 태그 관리자에 의해 자동으로 만들어지지만, 리퍼러 URL의 다른 부분을 노출하려는 경우에는 추가 인스턴스를 만들 수 있습니다.

URL

URL 구성요소를 파싱 및 노출할 때 사용되는 변수 유형입니다. 인스턴스를 추가로 만들어 URL의 여러 부분을 노출할 수 있습니다. 선택할 수 있는 URL 구성요소는 전체 URL, 프로토콜, 호스트 이름, 포트, 경로, 파일 확장명, 쿼리, 프래그먼트입니다. 이 유형의 변수에 설정되는 입력값은 사용자가 현재 머물고 있는 페이지의 URL(document.location에서 가져옴)입니다. URL 소스를 조정하여 태그 관리자가 다른 변수를 URL 값의 소스로 사용하도록 설정할 수 있습니다.

페이지 변수

당사 쿠키

사용자가 머물고 있는 도메인의 당사 쿠키 중에 이름이 일치하는 쿠키로 값이 설정됩니다. 이름이 같은 쿠키가 동일한 도메인에 배포되어 있는 경우 첫 번째 값이 선택됩니다. 이 상황은 페이지 내에서 document.cookie를 호출하고 첫 번째 결과를 선택하는 경우와 동일합니다.

맞춤 자바스크립트

값이 자바스크립트 함수의 결과로 설정됩니다. 자바스크립트는 값을 반환하는 익명 함수의 형태를 취해야 합니다. 예를 들어 다음과 같이 사전에 정의된 모든 {{url}} 변수를 소문자로 변환하는 맞춤 자바스크립트 변수를 만들 수 있습니다.

function () { return {{url}}.toLowerCase(); }

데이터 영역

dataLayer.push() 호출을 통해 데이터가 데이터 영역으로 푸시될 때 다음과 같이 값이 설정됩니다.
dataLayer.push({"데이터 영역 이름": "value"})

태그 관리자가 키 이름에서 점('.')을 해석하는 방법을 지정할 수 있습니다.

버전 1: 키 이름에서 점(.)을 허용합니다. 예를 들어 dataLayer.push("abc": "value")의 경우 키 이름을 ‘a.b.c({"a.b.c": "value"})’로 해석합니다.
버전 2: 점을 하위 값으로 해석합니다. 예를 들어 dataLayer.push({"a.b.c": "value"})를 세 가지 중첩된 수준({a: {b: {c: "value"}}})으로 해석합니다.

자바스크립트 변수

값이 사용자가 지정한 자바스크립트 전역 변수의 값으로 설정됩니다. 찾고 있는 값이 데이터 영역에 설정되어 있지 않고(데이터 영역 변수 참고) 이 값이 DOM에 표시되지 않으면(DOM 요소 변수 참고) 값을 자바스크립트 변수에서 가져오는 것이 가능할 수 있습니다. 원하는 값을 페이지의 소스에서 전역 자바스크립트 변수의 형태로 찾을 수 있으면 이 변수 유형을 이용하세요.

페이지 요소

자동 이벤트 변수

클릭, 양식 제출, 요소 공개 상태 등의 이벤트를 트리거한 항목에 대한 정보를 포착합니다.

요소: 요소 객체를 반환합니다. 맞춤 자바스크립트의 객체(예: {{Element}}.title)처럼 취급되거나, CSS 선택자에서는 객체(예: {{Element}})가 CSS 선택자 div.foo와 일치합니다.
요소 유형: element.tagName 값(예: 'A', 'BUTTON', 'IMG')을 반환합니다.
요소 속성: 속성 이름을 지정하면 이 옵션이 해당 속성의 값을 반환합니다.
요소 클래스: 해당 요소의 class 속성에서 찾은 클래스 목록을 반환합니다.
요소 ID: id 속성의 값을 반환합니다.
요소 타겟: target 속성의 값(예: '_blank')을 반환합니다.
요소 텍스트: 요소의 텍스트 콘텐츠 값을 반환합니다.
요소 URL: href 또는 action 속성을 통해 수집한 요소의 URL을 반환합니다.
기록 신규 URL 프래그먼트: 브라우저 기록에서 새 URL 프래그먼트를 반환합니다(예: '#summary').
기록 이전 URL 프래그먼트: 브라우저 방문 기록에서 이전 URL 프래그먼트를 반환합니다(예: '#intro').
기록 신규 상태: 사이트의 pushState 호출에 의해 제어되는 신규 기록 상태 객체입니다.
기록 이전 상태: 사이트의 pushState 호출에 의해 제어되는 이전 기록 상태 객체입니다.
기록 변경 소스: 기록 변경을 유발한 이벤트(예: 'pushState', 'replaceState' 등)를 반환합니다.

DOM 요소

DOM(문서 객체 모델)의 텍스트 또는 지정된 DOM 요소 속성의 값이 이 값으로 설정됩니다. 원하는 값이 데이터 영역에 설정되어 있지 않으면(데이터 영역 변수 참고) DOM에서 값을 가져올 수 있습니다. DOM에서 값을 찾을 수 있는 경우 이 변수 유형을 사용합니다.

선택사항인 속성 이름이 설정되면 속성(예: data-food="cupcakes")에서 지정된 값이 변수의 값에서 반환됩니다. 그렇지 않으면 DOM 요소 내의 텍스트가 변수의 값이 됩니다.

요소 공개 상태

지정된 DOM 요소의 공개 상태를 기반으로 값이 설정됩니다. 요소 공개 상태 트리거와 달리 단일 요소 공개 상태 변수는 단일 요소의 공개 상태만을 보고할 수 있습니다. 요소를 선택할 때 요소 ID 또는 CSS 선택 도구를 기준으로 사용하도록 지정합니다. 지정한 CSS 선택 도구와 일치하는 요소가 여러 개인 경우 첫 번째로 일치하는 요소를 사용합니다.

이 변수의 출력 유형은 다음과 같이 선택할 수 있습니다.

True/False: 변수가 참조되었을 때 선택된 요소의 표시 여부를 불리언 값으로 나타냅니다.
비율: 변수가 참조되었을 때 선택된 요소가 화면에 표시된 비율을 숫자 값(0~100)으로 나타냅니다.

True / False를 출력 유형으로 선택하면 선택한 요소가 일정 비율 이상 화면에 표시되었을 때 해당 변수가 true를 반환하도록 최소 표시 비율 값을 지정할 수 있습니다.

유틸리티

상수

값이 제공된 문자열로 설정됩니다. 상수 문자열 변수는 동일한 계정 번호를 사용하는 태그가 여러 개인 경우에 일반적으로 사용됩니다. Google 애널리틱스 설정도 참고하세요.

맞춤 이벤트

값이 데이터 영역에 푸시된 맞춤 이벤트의 이름으로 설정됩니다.

환경 이름

미리보기 모드에 표시된 환경의 이름을 반환합니다.

Google 애널리틱스 설정

Google 애널리틱스 설정 변수는 여러 태그에서 사용되는 공통의 Google 애널리틱스 설정을 중앙에서 구성하고 공유하기 위해 웹 및 모바일(Firebase) 컨테이너의 유니버설 애널리틱스 태그에서 사용됩니다. 유니버설 애널리틱스를 사용하여 Google 애널리틱스 태그를 만들면 태그 관리자에서 Google 애널리틱스 설정 변수를 선택하거나 만들라는 메시지가 표시됩니다. 자세히 알아보기

Google 태그: 구성 설정

이 변수를 사용하면 Google 태그가 로드될 때 구성 수준 매개변수를 설정할 수 있습니다.

예를 들어 웹사이트를 여러 언어로 게시하는데 잠재고객을 사용 언어에 따라 분류한다고 가정해 보겠습니다. 각 태그를 수동으로 업데이트하는 대신 language 매개변수가 포함된 구성 변수를 만들어 Google 태그 전체에서 사용할 수 있습니다.

구성 설정을 재사용하는 방법 알아보기

Google 태그: 이벤트 설정

이 변수를 사용하면 이벤트 수준 매개변수를 설정하여 GA4 이벤트와 함께 추가 데이터를 전송할 수 있습니다.

예를 들어 온라인 상점을 소유하고 있으며 세일 행사를 진행하고 있다고 가정해 보겠습니다. 이제 제공된 할인 코드를 사용하는 사용자 수를 추적하려고 합니다. 각 태그에 discount 매개변수를 수동으로 추가하는 대신 이 매개변수를 Google 태그: 이벤트 설정 변수와 함께 재사용할 수 있습니다.

구성 설정을 재사용하는 방법 알아보기

참고표

이 값은 참고표의 지침에 따라 설정됩니다. 참고표에는 다음과 같은 두 가지 항목이 포함됩니다. (데이터가 나중에 사용되는 방식을 보여주기 위해 표가 빈 상태로 표시됨)

[변수 선택]이(가) 아래와 같을 경우	[이 변수]을(를) 다음으로 설정

참고표를 이용하여 다른 변수의 값에 따라 값이 달라지는 변수를 만들 수 있습니다. 이는 웹사이트에서 적절한 값(예: 전환 ID)을 URL, DOM 요소 또는 페이지의 다른 부분에 매핑할 수 있도록 설정된 경우에 유용합니다. 이 예에서는 전환 ID라는 변수를 만듭니다. URL에 '/thanks/buy1.html'이 있으면 값이 '12345'로 설정되고, URL에 'thanks/buy2.html'이 있으면 값이 '34567'로 설정됩니다.

{{url}}에 다음 값 포함	{{전환 ID}}을(를) 아래의 값으로 설정
/thanks/buy1.html	12345
/thanks/buy2.html	34567
/thanks/buy3.html	56789

랜덤 숫자

0과 2147483647 사이의 임의의 숫자로 값이 설정됩니다.

정규식 표

정규식 표 변수는 참고표 변수와 유사하게 작동하며, 일치시킬 항목을 대상으로 정규 표현식 패턴을 실행할 수 있는 추가 기능이 있습니다.

다음과 같이 구성된 정규 표현식 표를 살펴보겠습니다.

패턴	출력
`./page[1-3]\.html.`	foo
`./page[4-6]\.html.`	bar
`./page[7-9]\.html.`	baz

변수의 결과 값은 다음과 같습니다.

일치된 결과	값
http://example.com/page1.html	foo
http://www.example.com/page1.html	foo
http://example.com/page2.html#detail	foo
http://example.com/page5.html	bar
http://example.com/page5.html?status=new	bar
http://example.com/page6.html	bar
https://example.com/page9.html	baz

정규 표현식 참고표는 목록의 맨 위에서 맨 아래까지 실행됩니다. 일치가 발견되면 해당 결과 값이 반환됩니다.

일치 항목이 발견되지 않았을 때의 결과 값을 설정하려면 기본값 설정을 선택합니다.

기본적으로 패턴은 전체 입력 문자열과 일치해야 하며 대소문자를 구분하지 않습니다. 이 동작은 고급 설정에서 다음과 같이 조정할 수 있습니다.

대소문자 무시: 정규 표현식에 명시적으로 작성하지 않고 대문자와 소문자의 패턴을 일치시킵니다.
전체 일치만: 활성화된 경우, 패턴이 전체 입력 내용과 일치해야 합니다. 이는 패턴 주위에 시작(^) 및 종료($) 앵커를 암시적으로 사용하는 것과 동일합니다. 사용 중지된 경우 패턴이 입력 내용의 어느 곳에서든지 발견되면 일치하는 것으로 간주됩니다.
그룹 캡처 및 기능 바꾸기: 사용 설정된 경우 달러 기호 대체 문법을 사용하여 결과 내에 입력 내용을 부분적으로 포함(예: 일치하는 패턴의 그룹 캡처)할 수 있습니다. 예를 들어 일치하는 정규 표현식이 /(news)/page(2)\.html인 경우 $1을 사용하여 첫 번째 캡처 그룹('news')을 참조하고 $2를 사용하여 두 번째 캡처 그룹('2')을 참조할 수 있습니다.

'전체 일치만'이 사용 중지된 상태로 '그룹 캡처 및 기능 바꾸기'를 사용하면 예기치 않은 동작(예: 일치하는 부분이 대체되어 전체 입력 값을 반환)이 발생할 수 있습니다.

사용자 제공 데이터

이메일, 전화, 이름, 주소 등의 연락처 양식 정보를 수집합니다. 다음 모드 중 하나를 사용하여 캡처할 정보를 지정합니다.

자동 구성: 웹사이트의 양식 입력란과 새 항목을 자동으로 감지합니다.
수동 구성: 기존 태그 관리자 변수를 이메일, 전화번호, 이름, 주소 등 사용자가 제공한 데이터 필드에 매핑할 수 있습니다.
코드: 구조화된 사용자 제공 데이터 객체를 반환하는 데이터 영역 변수 또는 맞춤 자바스크립트 변수를 지정할 수 있습니다.

컨테이너 데이터

컨테이너 ID

태그 관리자 컨테이너의 ID(예: 'GTM-101010')를 반환합니다.

컨테이너 버전 번호

컨테이너가 미리보기 모드일 때 컨테이너 버전 변수에서 컨테이너의 미리보기 버전 번호가 반환됩니다. 그렇지 않은 경우 이 변수는 컨테이너의 실제 버전 번호를 반환합니다.

디버그 모드

컨테이너가 미리보기 및 디버그 모드인 경우 값이 true로, 그렇지 않은 경우 false로 설정됩니다.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?