맞춤 템플릿은 구글 태그 매니저를 사용하여 사이트에서 실행하려는 사용자 코드를 중심으로 사용자 인터페이스를 구축하는 방법을 제공합니다. 사용자 인터페이스는 GTM의 태그와 변수를 사용하면서 익숙해진 그것입니다. 문자열 입력 영역, 설정, 표, 레이블, 드랍-다운 메뉴 등으로 구성되어 있죠.
분명한 것은, UI 자체가 이미 거대한 자산이라는 겁니다. 복잡한 코드 블록 대신 사용자 인터페이스를 제공할 수 있다면, 입력 에러로 인해 발생할 수 있는 문제를 최소화하며 코드를 안정적으로 유지하는데 도움을 주죠. 하지만, 템플릿에는 또 다른, 명료하지 않은(그렇지만 임팩트가 덜 하다고 할 수 없는) 기능이 있습니다. 템플릿은 추상화된 코드에 보호 및 보안 계층을 추가합니다. 템플릿은 맞춤 자바 스크립트 프레임워크를 사용하는데, 실제로 코드가 무언가를 하도록 만들려면 사용해야만 하는 유용한 API들(application programming interfaces)를 제공합니다. 이는 가파른 학습 곡선을 타야 한다는 이야기입니다. 왜냐하면 더이상 스택 오버플로우에서 코드 복사-붙여넣기로는 할 수 없기 때문이죠. 전역 window 속성을 쓰고자 한다면, 이에 대한 API를 사용해야 합니다. 콘솔에 로그하려면, 이에 대한 API를 써야하죠. 쿠키 값을 확인하려면, 무엇을 해야할까요. 이에 대한 API를 사용해야 합니다.
기본적으로 페이지의 전역 상태에 접근하거나 전역 수준으로 정의된 기본 자바 스크립트 함수를 실행하는 코드는 API 호출이 필요합니다. 그렇다면 왜 이게 복잡성을 가중시켰을까요? 한가지 이유는, 이러한 API가 잠재적으로 위험하고, 혹은 방해가 되는 글로벌 상태 수정이 통제된 방식으로 수행되도록 하기 때문입니다. API를 사용하려고 할 때마다, 템플릿 코드 내에서 require()를 해야 합니다. 그리고 이와 같은 API를 도입하면, 템플릿은 자동으로 API 호출에 대해 설정 가능한 권한 모음을 생성합니다.
요약하자면, 템플릿은 로직을 캡슐화합니다. 그렇지 않았으면 사용자 코드와 같이 제공했어야 했을텐데 말이죠. API를 권한과 함께 제공함으로써, 안전하고 쉽게 관리되는 컨텍스트에서 템플릿이 작동하도록 구성할 수 있습니다. 추가된 보안 레벨로 정책 도입이 있습니다. 사이트 소유자가 어떤 코드를 사이트 자체에 추가할 수 있고, 템플릿 권한 할당에 따라 통제 단계를 추가할 수 있죠. 예&
#47484; 들어, 히트를 엔드포인트까지 전송하도록 설정된 태그가 있다면, 태그에 구성된 많은 엔트포인트 가운데 하나에 대한 픽셀 요청만 허용하는 페이지에 대한 정책을 작성할 수 있습니다.
해당 정책을 적용한 상태에서, 이미지 요청은 오직 엔드포인트 URL이 s://snowplow.simoahava.com/i 일 때만 실행됩니다. 다를 경우 에러가 떨어지면서 태그가 실패하고, 미리보기 모드의 오류 탭에서 에러 메시지를 확인할 수 있습니다.
템플릿 사용의 또 다른 장점은 콘텐츠 보안 정책에 위험한 unsafe-eval 키워드를 추가할 필요가 없다는 겁니다. 컨테이너를 작성할 때 템플릿을 통해 실행되는 모든 코드는 자바 스크립트로 컴파일 되므로, eval()을 사용할 필요가 없습니다. 반대로 맞춤 HTML 태그와 맞춤 자바 스크립트 변수를 사용하면, 코드가 문자열로 작성된 다음 런타임에 eval()로 컴파일 됩니다. 이는 안좋은 습관으로, 콘텐츠 보안 정책을 사용할 경우 보안을 크게 손상시킵니다. 맞춤 템플릿의 유용성을 볼 수 있기를 바랍니다. 자신의 작업을 공유하여 다른 이들이 다운로드하고 컨테이너에서 사용할 수 있는 맞춤 템플릿 라이브러리를 상상해 보세요. 최종적으로는 소규모 브랜드와 회사들도 구글 태그 매니저를 사용하여 자신의 도구와 플랫폼을 대중에게 제공할 수 있을 겁니다.
PS : 인용구 내 링크가 걸리지 않아 여기에 남깁니다. Community Template Gallery 와 Simo Ahava 님의 소개글 링크.PS2 : 가이드 내 다른 부분에 대한 링크는 번역 완료 후 갱신하겠습니다.