맞춤 변수 만들기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 가이드에는 맞춤 변수 템플릿을 만드는 방법이 나와 있습니다. 이
변수를 사용하면 값 배열을 취하고 이를 쉼표로 구분된
문자열로 반환합니다.
첫 번째 변수 템플릿을 시작하려면 왼쪽 탐색 메뉴에서
변수 템플릿 섹션에서 새로 만들기 버튼을
클릭합니다.
정보 탭에서 변수의 이름 및 설명을 정의합니다.
이름은 사용자가 태그 관리자 사용자 인터페이스에서 이 변수를 구현할 때
사용자에게 표시되는 이름입니다.
설명은 말 그대로, 이 변수의 기능에 대한 간단한
설명(영문 기준 200자 이하)입니다.
새로고침을 클릭하여 템플릿을 미리 봅니다.
필드 입력 오른쪽에 템플릿 미리보기 창이 있습니다.
편집기에서 변경될 때마다 새로고침 버튼이
표시됩니다. 새로고침을 클릭하여 변경사항이 변수의 모양에 어떻게 적용되는지
확인합니다.
필드를 클릭하여 변수 템플릿에 필드를 추가합니다.
템플릿 편집기의 필드 탭을 사용하면 변수 템플릿에서 필드를 만들고
수정할 수 있습니다. 필드는 계정 ID와 같은 맞춤 데이터를 입력하는 데
사용됩니다. 텍스트 필드, 드롭다운 메뉴, 라디오 버튼, 체크박스와 같은
표준 양식 요소를 추가할 수 있습니다.
필드 추가를 클릭하고 단순 표를 선택합니다. 기본 이름(예:
'simpleTable1')을 'list'로 바꿉니다. 템플릿 미리보기에서 새로고침을 클릭합니다.
텍스트 입력에 대해 이 단계를 반복하는데, 이를 'array'라고 합니다. 이는 'use_array'
및 'sort'라는 2개의 체크박스와 'delimiter'라는 텍스트 입력으로 이루어집니다.
'delimiter'의 경우 톱니바퀴 아이콘을 클릭하고 '기본값'을 사용하도록
설정한 다음, 새 기본값 입력 필드에 입력하여 기본값에
','를 부여합니다.
코드 탭을 클릭하고 편집기에 샌드박스 처리된 자바스크립트를 입력합니다.
var input = data.array;
if (!data.use_array) {
input = [];
for (var i = 0; i < data.list.length; i++) {
input.push(data.list[i].values);
}
}
if (data.sort) {
input.sort();
}
return input.join(data.delimiter || ',');
이 변수의 코드는 매우 간단하지만, 주목할 만한
몇 가지 사항이 있습니다.
data
필드
data
전역에서 액세스되는 몇 가지 필드가 있습니다.
data
에는 이전 단계에서 설정한 값이 포함되므로
data.use_array
, data.sort
, data.list
, data.delimiter
에
액세스할 수 있습니다.
data.delimiter
가 제공되지 않으면 delimiter
는 기본값
","
로 설정됩니다. 적절한 경우 필드의 기본값을 설정하는
것이 좋습니다. 이렇게 하면 변수를 사용하기 위해 모든 필드를
작성할 필요가 없기 때문에 사용자가 변수 템플릿을 더 쉽게
사용할 수 있습니다.
저장을 클릭하여 진행 상황을 저장합니다. 그러면 감지된 권한이 템플릿 편집기에
로드됩니다.
일부 템플릿 API에는 수행 가능한 작업과 불가능한 작업을 지정하는 권한이
연결되어 있습니다. 코드에서 sendPixel
과 같은 템플릿 API를 사용하면
태그 관리자의 권한 탭에 관련 권한이
표시됩니다.
템플릿 미리보기 탭에서 'values' 입력 값을 추가하고
코드 실행을 클릭한 후 콘솔에서 변수의 출력 값을 확인합니다.
오류가 있으면 콘솔 창에 표시됩니다.
저장을 클릭하고 템플릿 편집기를 닫습니다.
이제 변수 템플릿을 사용할 수 있습니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2023-10-27(UTC)
[null,null,["최종 업데이트: 2023-10-27(UTC)"],[[["\u003cp\u003eThis guide provides step-by-step instructions to create a custom variable template in Google Tag Manager.\u003c/p\u003e\n"],["\u003cp\u003eThis template transforms an array of values into a comma-separated string using JavaScript code within the template.\u003c/p\u003e\n"],["\u003cp\u003eThe template utilizes fields like 'list', 'array', 'use_array', 'sort', and 'delimiter' to customize its functionality.\u003c/p\u003e\n"],["\u003cp\u003eUsers can preview and test the template using the 'Template Preview' and 'Console' sections within the editor.\u003c/p\u003e\n"],["\u003cp\u003eOnce saved, the custom variable template is ready to be implemented within Google Tag Manager.\u003c/p\u003e\n"]]],["To create a variable template that returns a comma-delimited string from an array, start by creating a new template, defining its name and description in the *Info* tab. Then, in the *Fields* tab, add fields for a simple table (\"list\"), text input (\"array\"), checkboxes (\"use_array\", \"sort\"), and text input (\"delimiter\"). In the *Code* tab, enter sandboxed JavaScript to process these fields, joining the array with the specified delimiter, and save. Then preview the result and save the variable.\n"],null,["# Create a custom variable\n\nThis guide will walk you through how to create a custom variable template. When\nthis variable is used, it will take an array of values and return them as a\ncomma delimited string.\n\n1. To begin your first variable template, click Templates in the left\n navigation and click the *New* button under the *Variable Templates*\n section.\n\n2. In the *Info* tab, define the variable's *Name* and *Description*.\n\n **Name** is what will be presented to users when they go to implement this\n variable throughout the Tag Manager user interface.\n\n **Description** is just what it sounds like - a brief (200 characters or\n less) description of what this variable does.\n3. Click *Refresh* to preview your template.\n\n To the right of the field inputs, there is a *Template Preview* window.\n Every time a change is made in the editor, the **Refresh** button will\n appear. Click Refresh to see what your changes do to the appearance of your\n variable.\n4. Click *Fields* to add fields to your variable template.\n\n The Template Editor's **Fields** tab lets you create and edit fields in the\n variable template. Fields are used to enter custom data, such as an account\n ID. You can add the standard form elements like text fields, drop down\n menus, radio buttons, and checkboxes.\n5. Click *Add Field* and select *Simple table* . Replace the default name (e.g.\n *\"simpleTable1\"* ) with *\"list\"* . In the *Template Preview* , click *Refresh*.\n\n Repeat this step for a *Text Input* and call it *\"array\"* , two *Checkboxes*\n called \"*use_array* \" and *\"sort\"* , and a *Text Input* called *\"delimiter\"* .\n For *\"delimiter\"* , give it a default value of \",\" by clicking the gear icon,\n toggling *\"Default value\"* to on, and then filling in the new Default Value\n input field.\n6. Click the *Code* tab and enter sandboxed JavaScript in the editor:\n\n var input = data.array;\n\n if (!data.use_array) {\n input = [];\n for (var i = 0; i \u003c data.list.length; i++) {\n input.push(data.list[i].values);\n }\n }\n\n if (data.sort) {\n input.sort();\n }\n\n return input.join(data.delimiter || ',');\n\n The code for this variable is fairly straightforward, but there are a few\n things worth pointing out.\n - `data` fields.\n\n There are a few fields that are being accessed off of the `data` global.\n `data` will contain the values that you set up in the previous step.\n That's why we're able to access `data.use_array`, `data.sort`,\n `data.list`, and `data.delimiter`.\n - `delimiter` is set to a default value of `\",\"` if `data.delimiter` is\n not provided. It's a good practice to set default values for a field if\n one makes sense. This makes it easier for users to use the variable\n template, since they don't have to fill out every field in order to use\n the variable.\n\n7. Click *Save* to save your progress. This will load any detected permissions\n into the Template Editor.\n\n Some Template APIs have [permissions](/tag-platform/tag-manager/templates/permissions) associated with them that dictate what\n they can or cannot do. When you use a template API such as `sendPixel` in\n your code, Tag Manager will show relevant permissions in the **Permissions**\n tab.\n8. In the *Template Preview* tab, add some values for the \"values\" input, click\n **Run Code** , and look at the *Console* to see the output for your variable.\n\n If there are any errors, they will appear in the **Console** window.\n9. Click *Save*, and close the Template Editor\n\n The variable template should now be ready for use."]]