맞춤 템플릿 빠른 시작 가이드

맞춤 템플릿을 사용하면 태그 및 변수 정의를 직접 작성할 수 있으므로 조직 내 다른 사용자가 기본 제공 태그 및 변수 템플릿과 함께 사용할 수 있습니다. 맞춤 템플릿의 샌드박스 처리된 권한 중심 특성 덕분에 맞춤 HTML 태그 및 맞춤 자바스크립트 변수를 사용할 때보다 안전하고 효율적인 방식으로 맞춤 태그 및 변수를 작성할 수 있습니다.

맞춤 태그 및 변수 템플릿은 Google 태그 관리자의 템플릿 섹션에 정의되어 있습니다. 기본 템플릿 화면에는 컨테이너에 이미 정의되어 있는 모든 태그 또는 변수 템플릿이 표시됩니다. 이 화면에서 새 템플릿을 만들 수도 있습니다.

템플릿을 내보내 조직의 다른 사용자와 공유할 수 있으며 커뮤니티 템플릿 갤러리에서 더 광범위하게 배포할 수 있는 템플릿을 개발할 수 있습니다.

템플릿 편집기

템플릿 편집기를 사용하면 맞춤 템플릿을 만들고 미리 보고 테스트할 수 있습니다. 태그 템플릿을 정의하는 데 도움이 되는 네 가지 기본 입력 영역이 있습니다.

  • 정보 - 태그 또는 변수 이름 및 아이콘과 같은 템플릿의 기본 속성을 정의합니다.
  • 필드 - 태그 템플릿에 입력란을 추가하기 위한 비주얼 편집기입니다.
  • 코드 - 샌드박스 처리된 자바스크립트를 입력하여 태그 또는 변수의 동작을 정의합니다.
  • 권한 - 태그 또는 변수가 실행할 수 있도록 허용된 작업을 보고 한도를 설정합니다.

첫 번째 맞춤 태그 템플릿 만들기

이 예에서는 기본 픽셀 태그 예를 만드는 방법을 설명합니다. 이 태그가 웹페이지에서 실행되면 조회가 올바른 계정 정보와 함께 태그 제공업체의 서버로 전송됩니다.

1. 첫 번째 템플릿을 시작하려면 왼쪽 탐색 메뉴에서 템플릿을 클릭하고 태그 템플릿 섹션에서 새로 만들기 버튼을 클릭합니다.

2. 정보를 클릭하고 태그의 이름(필수), 설명, 아이콘을 정의합니다.

이름은 사용자가 태그 관리자 사용자 인터페이스에서 이 태그를 구현할 때 사용자에게 표시되는 이름입니다.

설명은 말 그대로, 이 태그의 기능에 대한 간단한 설명(영문 기준 200자 이하)입니다.

아이콘을 사용하면 아이콘 속성을 지원하는 목록에 태그가 표시될 때 표시되는 이미지를 선택할 수 있습니다. 아이콘 이미지는 50KB 이하, 64x64픽셀 이상의 정사각형 PNG, JPEG 또는 GIF 파일이어야 합니다.

3. 새로고침을 클릭하여 템플릿을 미리 봅니다.

필드 입력 오른쪽에 템플릿 미리보기 창이 있습니다. 편집기에서 변경사항이 생길 때마다 새로고침 버튼이 표시됩니다. 새로고침을 클릭하여 변경사항이 태그의 모양에 어떻게 적용되는지 확인합니다.

4. 필드를 클릭하여 태그 템플릿에 필드를 추가합니다.

템플릿 편집기의 필드 탭을 사용하여 태그 템플릿에서 필드를 만들고 수정할 수 있습니다. 필드는 계정 ID와 같은 맞춤 데이터를 입력하는 데 사용됩니다. 텍스트 필드, 드롭다운 메뉴, 라디오 버튼, 체크박스와 같은 표준 양식 요소를 추가할 수 있습니다.

5. 필드 추가를 클릭하고 텍스트 입력을 선택합니다. 기본 이름(예: 'text1')을 'accountId'로 바꿉니다. 템플릿 미리보기에서 새로고침을 클릭합니다.

필드 옆에 익숙한 변수 선택기(변수 선택기 아이콘) 아이콘이 표시됩니다. 이 템플릿의 사용자는 변수 선택기 아이콘을 클릭하여 이 컨테이너에서 활성 상태인 변수를 선택할 수 있습니다.

다음 단계에서는 필드에 라벨을 추가합니다.

6. 텍스트 필드 옆의 펼치기 아이콘(펼치기 아이콘)을 클릭하여 이 필드의 옵션 더보기를 엽니다. '표시 이름' 필드에 '계정 ID'를 입력합니다. 템플릿 미리보기에서 새로고침을 클릭합니다.

필드 위에 '계정 ID'라는 텍스트 라벨이 표시됩니다.

7. 코드 탭을 클릭하고 편집기에 샌드박스 처리된 자바스크립트를 입력합니다.

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

첫 번째 코드 줄 const sendPixel = require('sendPixel')는 sendPixel API를 가져옵니다.

두 번째 코드 줄 const encodeUriComponent = require('encodeUriComponent')는 encodeUriComponent API를 가져옵니다.

다음 줄 const account = data.accountId;은 5단계에서 만든 accountId 값을 가져와 account라는 상수에 저장합니다.

세 번째 코드 줄 const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);는 애널리틱스 데이터와 태그가 구성된 인코딩된 계정 ID를 로깅하는 고정 URL 엔드포인트를 연결하는 url 상수를 설정합니다.

마지막 줄 sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)은 필수 매개변수로 sendPixel() 함수를 실행하고 지정된 URL에 요청을 보냅니다. data.gtmOnSuccess 및 data.gtmOnFailure 값은 태그가 작업을 완료하거나 이에 실패했을 때 Google 태그 관리자에게 알린 다음 Google 태그 관리자에서 태그 시퀀싱 또는 미리보기 모드와 같은 기능에 사용됩니다.

8. 저장을 클릭하여 진행 상황을 저장합니다. 이렇게 하면 감지된 권한이 템플릿 편집기에 로드됩니다.

일부 템플릿 API에는 수행 가능한 작업과 불가능한 작업을 지정하는 권한이 연결되어 있습니다. 코드에서 sendPixel과 같은 템플릿 API를 사용하면 태그 관리자의 권한 탭에 관련 권한이 표시됩니다.

9. 권한을 클릭하여 sendPixel에서 데이터를 전송할 수 있는 도메인을 미세 조정합니다. 픽셀 전송 항목의 경우 펼치기 아이콘(펼치기 아이콘)을 클릭하고 허용된 URL 일치 패턴에 https://endpoint.example.com/을 입력합니다.

태그 템플릿이 데이터를 전송하도록 구성된 경우 데이터 전송 위치를 제한하려면 연결된 권한 아래에 허용된 URL 일치 패턴을 지정해야 합니다. 코드에 지정된 URL이 허용된 URL 일치 패턴과 일치하지 않으면 sendPixel 호출이 실패합니다.

URL 일치 패턴은 HTTPS를 사용하고 호스트 및 경로 패턴을 지정해야 합니다. 호스트는 도메인(예: 'https://example.com/') 또는 특정 하위 도메인(예: 'https://sub.example.com/')일 수 있습니다. 경로는 최소한 '/'로 구성해야 합니다. 별표(*)를 와일드 카드로 사용하여 임의의 길이의 하위 도메인 또는 경로 패턴을 표시할 수 있습니다(예: 'https://\*.example.com/test/'). 별표는 다양한 가능한 패턴을 포착하는 와일드 카드 문자입니다. 예를 들어 '\*.example.com/'은 www.example.com, shop.example.com, blog.example.com 등과 일치합니다. 별표는 백슬래시 문자('\*')로 이스케이프 처리해야 합니다. 추가 문자가 없는 URL(예: 'https://example.com/')은 와일드 카드(예: https://example.com/\*)로 끝나는 것으로 간주됩니다.

추가 URL 일치 패턴을 별도의 행에 지정합니다.

10. 코드 실행을 클릭하고 콘솔 창에서 문제가 있는지 확인합니다.

감지된 오류는 콘솔 창에 표시됩니다.

11. 저장을 클릭하고 템플릿 편집기를 닫습니다.

이제 태그 템플릿을 사용할 수 있습니다.

새 태그 사용하기

새로 정의된 맞춤 태그 템플릿을 사용하는 새 태그를 만드는 과정은 다른 태그와 같습니다.

  1. Google 태그 관리자에서 태그 > 새로 만들기를 클릭합니다.
  2. 새 태그가 새 태그 창의 맞춤 섹션에 표시됩니다. 새 태그를 클릭하여 태그 템플릿을 엽니다.
  3. 태그 템플릿 구성에 필요한 필드를 입력합니다.
  4. 트리거를 클릭하고 태그를 실행할 적절한 트리거를 선택합니다.
  5. 태그를 저장하고 컨테이너를 게시합니다.

첫 번째 맞춤 변수 템플릿 만들기

맞춤 변수 템플릿은 태그 템플릿과 비슷하지만 몇 가지 주목할 만한 차이가 있습니다.

  • 맞춤 변수 템플릿은 값을 반환해야 합니다.

    변수는 완료를 표시하기 위해 data['gtmOnSuccess']를 호출하는 대신 값을 직접 반환합니다.

  • 맞춤 변수 템플릿은 태그 관리자 UI의 여러 부분에서 사용됩니다.

  • 태그 > 새로 만들기로 이동하여 맞춤 변수를 기반으로 새 변수를 만드는 대신 변수 > 새로 만들기로 이동합니다.

맞춤 변수 템플릿 만들기에 관한 전체 가이드는 맞춤 변수 만들기를 참고하세요.

내보내기 및 가져오기

맞춤 템플릿을 조직과 공유하려면 맞춤 템플릿을 내보내고 다른 태그 관리자 컨테이너로 가져오면 됩니다. 템플릿을 내보내는 방법은 다음과 같습니다.

  1. 태그 관리자에서 템플릿을 클릭합니다.
  2. 목록에서 내보내려는 템플릿의 이름을 클릭합니다. 이렇게 하면 템플릿 편집기에서 템플릿이 열립니다.
  3. 추가 작업 메뉴()를 클릭하고 내보내기를 선택합니다.

템플릿을 가져오는 방법은 다음과 같습니다.

  1. 태그 관리자에서 템플릿을 클릭합니다.
  2. 새로 만들기를 클릭합니다. 템플릿 편집기에 빈 템플릿이 열립니다.
  3. 추가 작업 메뉴()를 클릭하고 가져오기를 선택합니다.
  4. 가져올 .tpl 파일을 선택합니다.