G Suite가 이제 업무 처리에 필요한 모든 도구를 한곳에 모은 Google Workspace로 바뀌었습니다.

웹용 사용자 정의 변수 유형

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

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

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

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

HTTP 리퍼러

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

URL

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

페이지 변수

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

맞춤 자바스크립트

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

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

데이터 영역

데이터 영역에 dataLayer.push() 호출을 통해 데이터가 푸시될 때 값이 설정됩니다.
dataLayer.push({'Data Layer Name': 'value'})

키 이름의 점('.')을 어떻게 해석해야 할지를 태그 관리자에서 지정할 수 있습니다.

  • 버전 1: 키 이름에서 점(.)을 허용합니다. 예를 들어 dataLayer.push('a.b.c': 'value')의 경우 키의 이름을 'a.b.c'({'a.b.c': 'value'})로 해석합니다.
  • 버전 2: 점을 하위 값으로 해석합니다. 예를 들어 dataLayer.push({'a.b.c': 'value'})를 3개의 하위 수준 {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 요소의 가시성을 기반으로 값이 설정됩니다. 요소 가시성 트리거와 달리 1개의 단일 요소 가시성 변수는 1개의 단일 요소의 가시성만을 보고할 수 있습니다. 요소를 선택할 때 요소 ID 또는 CSS 선택 도구를 기준으로 사용하도록 지정합니다. 지정한 CSS 선택 도구와 일치하는 요소가 여러 개인 경우 첫 번째로 일치하는 요소를 사용합니다.

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

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

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

유틸리티

상수

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

맞춤 이벤트

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

환경 이름

미리보기 모드에서 조회된 환경의 이름을 반환합니다.

Google 애널리틱스 설정

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

참고표

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

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

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

도움이 되었나요?
어떻게 하면 개선할 수 있을까요?
검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
도움말 센터 검색
true
102259
false