[GTM] Custom Template 활용 - 1. 시작하기

[GTM] Custom Template 활용 - 1. 시작하기

---

Overview

커스텀 템플릿이란? (What is Custom Templates)

커스텀 템플릿은 GTM 태그(Tag)와 변수(Variable)을 유저가 필요한 케이스에 맞게 커스텀 로직을 적용하여 일정한 동작을 하도록 만들어주는 기능입니다. 기존에 Custom HTML tags를 이용하여 태그를 생성하거나 Custom Javascript variables를 활용하여 커스텀 변수기능을 구현하였다면 Custom Templates 기능을 활용하여 GTM에서 제공하는 Sandbox 환경에서 개발/테스트/배포를 진행할 수 있습니다.

 

템플릿 유형(Type of the Custom Templates)

1. Tag Template
2. Variable Template

 

템플릿 생성 방법(How to create a Template)

템플릿을 만드는 방법은 두가지가 있습니다. 하나는 Import를 통해 기존에 만들어진 Template을 GTM 템플릿으로 추가하는 방법이고, 다른 하나는 직접 신규로 생성하는 방법입니다. Import는 엄밀히 말하면 기존에 만들어진 기능을 가져와 내 GTM 내에 활성화하는 것이지만, 이를 가져와 Template을 추가로 변경할 수 있습니다. 새로 템플릿을 만드는 방법은 직접 필요한 입력방식 및 코드를 구현할 수 있는 자유도가 높은 구현방법입니다.

1. [방법1] 갤러리에서 템플릿 임포트하기(Import a template from the Gallery)

1) Go to the Template Gallery

Community Template Gallery에서 Google 및 여러 서드파티(3rd party)에서 만든 템플릿을 임포트하여 사용할 수 있습니다.

Tag Manager Template Gallery

2) Search or type a template you will use

유저들이 많이 쓰는 Facebook, Amplitude, Mixpanel, MMP 등 솔루션의 경우 대부분 GTM Integration을 지원합니다. 아래 예시에서는 Gallery에서 개인적으로 테스트중인 Mixpanel을 조회하여 추가하였습니다. 

Community Template Gallery

위 예시에서는 Gallery에서 조회하였으나, 직접 Tag 생성시에도 Custom Template을 조회한 다음 바로 추가하여 태그로 적용이 가능합니다. 예를 들어 Braze Actions Tag를 GTM으로 연동할 때, Braze를 입력하면 기존에 Braze 등에서 만든 Template이 조회됩니다.

Adding the Braze template in the Tag menu

3) Add to workspace

Add to workspace를 선택합니다. 그럼 다시 Tag 화면으로 돌아가는데 Braze 템플릿이 적용된 Tag 설정화면이 활성화됩니다.

Add to workspace

4) Activiating the Tag Template 

Template을 임포트하면 아래와 같이 크게 두가지 다른 영역을 확인할 수 있습니다. 하나는 Tag Permission(권한)이고 다른 하나는 Tag Type입니다. 아래 화면에서는 바로 확인되지 않지만 실제 Template을 만들때 기능에 필요한 API 모듈을 선언하면 해당 API가 사용하는 권한이 자동으로 추가되는 것을 볼 수 있습니다.

Imported Tag structure

2. [방법2] 직접 템플릿 개발하기(Create your own template)

GTM은 Import외에도 직접 템플릿을 생성하는 기능을 지원합니다. 예를 들어 우리 회사에서 내부적으로 현재 Custom HTML Tag를 만들어 분석데이터 트래킹용으로 사용하고 있을 경우 해당 기능을 Template으로 마이그레이션하여 활용이 가능합니다. 내부에서 사용하는 로직에 맞게 구현이 가능하므로 상당히 활용하기 좋은 기능입니다.

1) Template 새로 만들기 

GTM > Templates 메뉴에 들어갑니다. 위에서 소개한 것과 같이 Templates는 Tag Templates, Variable Templates로 나뉘어집니다. 

2) Tag Templates 만들기

'New' 버튼을 누르면 Template Editor가 실행됩니다.

3) Template Editor

• Info: Name(템플릿 이름), Description(템플릿 설명), Icon(템플릿 아이콘)을 순서대로 입력합니다.
• Fields: 템플릿을 구성할 UI Fields를 설정하는 메뉴입니다.
• Code: 템플릿을 통해 들어오는 입력값을 활용하여 어떤 동작을 할지 샌드박스 Javascript를 활용하여 구현하는 부분입니다.
• Permissions: Code에 추가되는 모듈에 따라 자동으로 권한이 생성됩니다. 권한에 대한 허용범위를 추가로 설정할 수 있습니다.
• Tests: Template이 정상적으로 동작하는지 단위테스트코드를 추가하고 실행할 수 있습니다.

 

템플릿 해부하기(Dissecting the template code)

1. Import 템플릿 태그 분석

Braze Actions Tag가 어떻게 구성되어 있는지 확인해보면서 템플릿 기능에 대해 분석해 보도록 하겠습니다. 템플릿에서 Braze Action Tag > Fields탭을 선택하면, 아래와 같이 Field가 추가된 것을 확인할 수 있습니다. 템플릿을 생성할 때 변수값이 일정한지(리스트 등으로 만들수 있는지) 자유롭게 입력이 필요한 형식인지에 따라 Field 타입을 선택하는 것이 좋습니다. 

Fields

아래 Braze Template을 하나씩 살펴보겠습니다.

• actionsMenu: Drop-down menu
• eventName: Text input
• customEvent: Param table
• userID: Text input
• productId: Text input
• price: Text input
• currencyCode: Text input
• purchaseProperties: Param table
• eCommercePurchaseProperties: Param table
• debug: Checkbox

Braze Tag Fields

Field Type

 

Code

템플릿이 동작하기 위한 코드를 추가할 수 있습니다. 로그를 추가하거나 템플릿으로 전달된 변수값을 읽어온 후 조건문 등으로 처리할 경우 아래와 같이 Code 영역에 구현이 가능합니다. 구글 공식 문서('템플릿 > 참조 > API')에는 웹에서 활용할 수 있는 API에 대한 설명 및 예시가 제공됩니다. 각 API는 특정한 Permission이 부여됩니다. 문서를 읽어 보시면 관련 권한이 무엇인지 명시되어 있는 것을 볼 수 있습니다.



Code 개요

• ES6(ECMAScript6) 기반의 자바스크립트 문법 사용이 가능합니다.
  • block-level scope: const, let
  • Arrow function
    • const test = (param) => { return parm; }
• require() 샌드박스 처리된 템플릿 API는 require()를 선언하여 사용 가능합니다.
• window, document 등 직접 접근이 불가능합니다. 따라서 별도의 샌드박스처리된 API를 활용하여 객체복사 후 코드를 구현해야 합니다.

 

Code 내 선언한 API 분석

• logToConsole: 예를 들어 require('logToConsole')을 사용하면 브라우저 콘솔에 로깅이 가능합니다. 자바스크립트 console.log()랑 동일한 기능을 제공한다고 이해하시면 됩니다.
• copyFromWindow: 윈도우 객체에 있는 글로벌 변수 복사
  • 예를 들어 const ga = copyFromWindow('GoogleAnalyticsObject'); 와 같이 GA 오브젝트를 복사해 오는 것이 가능합니다. 
• callInWindow: 윈도우 객체 외부의 경로에서 함수 호출
• queryPermission: 허용된 API Permission(권한) 확인
• copyFromDataLayer: DataLayer를 복사하여 키에 할당된 값 반환할 때 사용

const logToConsole = require('logToConsole');
const copyFromWindow = require('copyFromWindow');
const callInWindow = require('callInWindow');
const queryPermission = require('queryPermission');
const copyFromDataLayer = require('copyFromDataLayer');

 

Permissions

Custom template permission은 각 API별로 부여되어 있습니다. 해당 Permission은 샌드박스 자바스크립트 선언시 자동으로 인식되어 부여됩니다. 아래 그림을 보면 3가지 permission이 부여되어 있는데 각 permission창을 열어보면 세부적으로 권한 설정이 어떻게 되어 있는지 확인이 가능합니다.

Tests

GTM Template 단위테스트를 위해 Tests 기능이 함께 제공됩니다. 해당 기능은 꼭 추가되지 않더라도 배포 후 사용은 가능하나 가급적 단위테스트를 통해 템플릿 기능 유효성을 검증하는데 활용할 것을 권장합니다.

2. 직접 커스텀 템플릿 생성(Creating a custom template)

Template Gallery에서 원하는 기능이 없거나 완전히 새로운 템플릿 구현이 필요한 경우 태그 템플릿 또는 변수 템플릿을 신규로 생성하여 사용할 수 있습니다. 아래 예시 템플릿은 DataLayer를 통해 수집된 유저 이벤트 정보를 서버태그컨테이너(GCP App Engine)으로 전달하는 기능을 구현하였습니다.

Info

My own custom template

 

Fields

3가지 Feild값을 추가하였습니다.

• server_container_url: GCP App Engine Domain e.g. https://jasonnam.example.com
• event_name: Data Layer로 전달받을 이벤트명 e.g. login, product_view
• user_id: 사용자를 구분할 수 있는 유저 ID값 e.g. jason1234

Field 추가 - Template Preview

Field를 추가한 다음 Display name, Help text, Default value, Validation rule을 추가하였습니다. 해당 속성을 추가하고자 할 경우 아래 그림에 보이는 '⚙︎'모양을 클릭하시기 바랍니다.

Field 세부 속성 추가

Code

Code 구현 및 테스트

// Enter your template code here.
const log = require('logToConsole');
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

const target_server_url = data.server_container_url + '/jason-web?';

const final_url = target_server_url + 
      'n=' + encodeUriComponent(data.event_name) + 
      'u=' + encodeUriComponent(data.user_id);

log(data);

// send data to the 3rd party server(GCP)
sendPixel(final_url, data.gtmOnSuccess());

 

Permissions

Tests

단위테스트는 Template 타입에 맞춰 Tag Template, Variable Template 테스트로 구분이 됩니다. 아래 예시에서는 sendPixel로 데이터가 전송되는 기능에 대한 단위테스트를 구성하였습니다.

• mockData를 실제 Field 변수명에 맞춰 등록하였습니다.
• sendPixel API를 mock으로 묶어 해당 HTTP Get 호출 시 onSuccess가 호출되도록 등록하였습니다.
• runCode에서 mockData를 입력하여 Code Tab에 있는 코드를 실행합니다.
• assertApi를 실행하여 gtmOnSuccess가 mock과 같이 onSuccess가 호출되었는지 체크합니다.
• assertThat을 실행하여 mockData에 등록한 이벤트명을 점검합니다. (이 부분은 mockData 선언부 바로 아래에 추가하여 실행하여도 됩니다.)

 

Reference

Writing Test For Custom Templates In Google Tag Manager

Writing Tests For Custom Templates In Google Tag Manager

GTM Template Test API tips and tricks

GTM Templates Test API tips and tricks