템플릿 스타일 가이드
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 스타일 가이드는 커뮤니티 템플릿 갤러리용 템플릿을 준비하는 방법을 결정하는 데 도움을 주기 위해 작성되었습니다. 이 스타일 가이드는 Google Material Design 작성 원칙을 바탕으로 합니다. 간단히 설명하면 다음과 같습니다.
- 간결하게 작성합니다.
- 단순하고 직접적으로 작성합니다.
- 사용자에게 명확하게 알립니다.
- 핵심적인 세부정보를 전달합니다.
- 모든 수준의 독자를 위해 작성합니다.
- 로봇이 아닌 사람을 위해 작성합니다.
다음 가이드라인에 따라 모든 템플릿의 디자인이 일관되고 사용자가 템플릿 사용 방법을 이해할 수 있도록 해주세요.
정보
이 가이드라인은 템플릿 편집기의 정보 탭에 있는 항목에 적용됩니다.
이름
템플릿 이름은 태그 관리자 사용자 인터페이스와 커뮤니티 템플릿 갤러리를 통해 태그 관리자 사용자에게 표시됩니다. 템플릿이 표시될 때 템플릿의 세부정보 페이지 상단에 표시됩니다.
- 회사/조직 이름과 템플릿의 기능상 이름(조직 이름 템플릿 이름)을 사용합니다.
- 단어 첫 글자를 대문자로 표시합니다.
- 기능을 설명하는 용어를 사용합니다.
- 관련 조직의 허가를 받지 않은 경우 템플릿 이름에 '공식'이라는 용어를 사용하지 않습니다.
예: MyCompany 전환 측정 태그, MyCompany 캠페인 ID 변수
설명
템플릿 설명은 세부정보 페이지에 템플릿 기능의 간략한 요약으로 표시되는 템플릿의 설명입니다.
- 명확하고 간결한 문장을 사용하여 템플릿의 기능을 설명합니다.
- 템플릿이 사용자에게 주는 혜택을 명확하게 설명합니다. 예: "Example.com 잠재고객 생성 도구 템플릿을 사용하면 웹사이트 방문자로부터 새로운 잠재고객 목록을 만들 수 있습니다."
- 전문 용어는 피합니다.
- 추가 정보, 설명서, 지원에 대한 링크를 포함합니다.
아이콘
템플릿 아이콘은 태그 관리자 및 커뮤니티 템플릿 갤러리에 썸네일로 표시됩니다.
- PNG, JPEG 또는 GIF 이미지 형식을 사용합니다.
- 이미지는 정사각형으로 48x48픽셀 이상, 96x96픽셀 이하여야 합니다.
- 파일 크기는 50KB 미만이어야 합니다.
- 관련 조직의 허가를 받지 않은 경우 회사의 공식 로고를 사용하지 않습니다.
- 필드
- 템플릿 편집기의 필드 탭을 사용하여 텍스트 입력, 체크박스와 같은 양식 요소를 추가합니다.
필드
이 스타일 가이드라인은 템플릿 편집기의 필드 탭에 적용됩니다.
매개변수 이름
템플릿 편집기에 표시되나 사용자에게는 표시되지 않는 필드 이름입니다. 사용되는 데이터의 유형을 설명하는 이름이어야 합니다. 매개변수 이름의 형식을 lowerCamelCase로 지정하세요. 예: userName, customerID, shoppingCartValue
필드 라벨
필드 라벨에는 표시 이름 필드, 체크박스 텍스트, 관련 항목이 포함됩니다.
- 첫 글자는 대문자로 표기합니다.
- 짧을수록 효과적입니다.
- 자세히 설명합니다.
- 일반적인 단어를 사용합니다.
도움말 텍스트
도움말 텍스트는 사용자가 템플릿 필드에 유효한 값을 입력하는 데 도움이 되는 정보를 제공하는 콘텐츠입니다. 가능한 경우 예시 입력을 제공하고 템플릿 필드가 사용되는 방식 또는 특정 값을 제공하는 경우의 효과를 설명하세요.
- 첫 글자는 대문자로 표기합니다.
- 간결하면서도 이해하기 쉽도록 작성합니다. 축약형을 사용하고 독자를 2인칭으로 작성하는 것은 허용됩니다.
- 지원되는 필드 유형
- 기본 HTML 형식은 허용됩니다. 예:
<strong>, <em>.
지원되는 필드 유형
유형 |
설명 |
| 텍스트 입력 |
텍스트 입력. 이 유형의 템플릿 매개변수 값은 변수를 참조할 수 있는 문자열입니다. 태그 관리자 사용자 인터페이스에 렌더링되는 텍스트 입력 위젯은 한 줄 텍스트 필드 또는 여러 줄 입력입니다. |
| 드롭다운 메뉴 |
단일 항목만 템플릿 매개변수 값으로 선택할 수 있는 드롭다운 메뉴입니다. 특별한 이유가 없는 한 항목을 알파벳순으로 표시하세요. |
| 체크박스 |
체크박스 입력. 이 유형의 템플릿 매개변수 값은 불리언입니다. 선택된 경우 true, 선택 해제된 경우 false입니다. |
| 라디오 버튼 |
라디오 입력. 이 유형의 템플릿 매개변수는 태그 관리자 사용자 인터페이스에 선택 사항의 목록을 제공하며 사용자는 선택 항목 중 하나만 템플릿 매개변수의 값으로 선택할 수 있습니다. |
| 단순 표 |
단순 표 입력. 표의 각 셀은 그 자리에서 수정할 수 있으며 텍스트 입력 또는 드롭다운 메뉴의 두 유형만 될 수 있습니다. 이 유형의 템플릿 매개변수 값은 객체의 배열입니다. 각 객체는 하나의 행을 인코딩하고, 객체의 각 키는 열 이름 중 하나여야 하며, 객체의 각 값은 해당 셀의 값입니다. |
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eThis style guide helps you create templates for the Community Template Gallery, ensuring consistency and user-friendliness by adhering to Google Material Design writing principles.\u003c/p\u003e\n"],["\u003cp\u003eWhen naming your template, use your organization's name, a descriptive functional name in Title Case, and avoid using "Official" unless authorized.\u003c/p\u003e\n"],["\u003cp\u003eTemplate descriptions should clearly explain the template's function, benefits, and any supporting resources using concise language and avoiding jargon.\u003c/p\u003e\n"],["\u003cp\u003eTemplate icons must be square images (PNG, JPEG, or GIF) between 48px and 96px in size, under 50 kilobytes, and avoid using official logos without authorization.\u003c/p\u003e\n"],["\u003cp\u003eFor template fields, use descriptive parameter names in lowerCamelCase, concise and clear field labels in sentence case, and helpful tooltips written in a human-friendly tone.\u003c/p\u003e\n"]]],["Template guidelines for the Community Template Gallery include creating descriptive names using \"Organization Name Template Name\" in Title Case, clear descriptions detailing template functionality and user benefits, and square icons (48-96px, under 50KB). In the Fields tab, parameter names should be `lowerCamelCase`, field labels in sentence case, and concise, human-readable help text. Supported field types are text input, drop-down menu, checkbox, radio button, and simple table, with specific formatting rules.\n"],null,["# Template style guide\n\nThis style guide has been prepared to help you make decisions on how to prepare templates for the [Community Template Gallery](https://support.google.com/tagmanager/answer/9454109). This style guide is based on the [Google Material Design writing principles](https://material.io/design/communication/writing.html#principles). Simply put, these are:\n\n- Be concise\n- Write simply and directly\n- Address users clearly\n- Communicate essential details\n- Write for all reading levels\n- Be human: write for humans, not robots\n\nFollow these guidelines to help ensure that all templates have a consistent look and feel, and to help users understand how to use your template.\n\nInfo\n----\n\nThese guidelines apply to items found in the Template Editor's **Info** tab.\n\n### Name\n\nThe template name is presented to Tag Manager users throughout the Tag Manager user interface and Community Template Gallery. It appears at the top of a template's detail page, and appears when templates are listed.\n\n- Use your company/organization name and the functional name of the template: *Organization Name* *Template Name*.\n- Use Title Case.\n- Use terms that are descriptive of the functionality.\n- Avoid use of the term \"Official\" in template names, unless you are authorized to do so by the relevant organization.\n\n**Examples:** *MyCompany Conversion Measurement Tag, MyCompany Campaign ID Variable*\n\n### Description\n\nThe template description is a description of the template that appears on detail pages as a brief summary of the template functionality.\n\n- Use clear and concise sentences to describe what the template does.\n- Clearly state how your template benefits the user. For example: \"The Example.com Audience Builder template can help you build new audience lists from website visitors.\"\n- Avoid jargon.\n- Include links for additional information, documentation, and support.\n\n### Icon\n\nYour template icon is represented as a thumbnail when listed in Tag Manager and on the Community Template Gallery.\n\n- Use PNG, JPEG, or GIF for the image format.\n- Image should be square, at least 48px by 48px, and no larger than 96px by 96px.\n- File size must be less than 50 kilobytes.\n- Avoid use of official company logos, unless you are authorized to do so by the relevant organization.\n- Fields\n- Use the Template Editor's Fields tab to add form elements such as text input, checkboxes, etc.\n\nFields\n------\n\nThese style guidelines apply to the Template Editor's **Fields** tab.\n\n### Parameter name\n\nThis is the name of the field as it appears in the Template Editor, but not as it appears to the user. Names should be descriptive of the type of data used. Format parameter names as `lowerCamelCase`. **Examples:** *userName, customerID, shoppingCartValue*.\n\n### Field labels\n\nField labels include display name fields, checkbox text, and related items.\n\n- Use sentence case.\n- Shorter is better.\n- Be descriptive.\n- Use common words.\n\nHelp text\n---------\n\nHelp text is informational content, shown as a tooltip, to help the user enter a valid value into the template field. Provide example input, if possible, and describe how the template field is used or the effect of providing certain values.\n\n- Use sentence case.\n- Be concise, but be human. It's okay to use contractions and write in the 2nd person (you).\n- Supported field types\n- Basic HTML formatting is permitted. Examples: *`\u003cstrong\u003e`, `\u003cem\u003e`*.\n\nSupported field types\n---------------------\n\n| Type | Description |\n|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **Text input** | Text input. The value of a template parameter of this type will be a string that may refer to variables. The text input widget rendered in the Tag Manager user interface could be either a single-line text field or a multi-line input. |\n| **Drop-down menu** | Drop-down menu in which only a single item could be selected as the value of the template parameter. List items in alphabetical order unless there is a good reason to do otherwise. |\n| **Checkbox** | Checkbox input. The value of a template parameter of this type will be boolean: true for checked, false for unchecked. |\n| **Radio button** | Radio input. A template parameter of this type presents a list of choices in the Tag Manager user interface and the user is only allowed to pick one of the choices as the value of the template parameter. |\n| **Simple table** | A simple table input. Each cell in the table can be edited in place, and each cell can only be of two types: a text input or a drop-down menu. The value of a template parameter of this type is an array of objects: each object encodes a row, each key in the object must be one of the column names, and each value in the object is the value of the corresponding cell. |"]]