範本樣式指南
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
這份格式指南旨在協助您決定如何為社群範本庫準備範本。本風格指南的依據是 Google Material Design 寫作原則。簡單來說,這些是:
- 保持精簡
- 保持精簡並切中要點
- 清楚地向使用者說明
- 提供必要詳細資料
- 為所有閱讀程度撰寫內容
- 以人為本:為人類而寫,而非機器人
請遵循下列規範,確保所有範本的外觀一致,並協助使用者瞭解如何使用範本。
資訊
這些規範適用於範本編輯器的「資訊」分頁中的項目。
名稱
代碼管理工具使用者在代碼管理工具使用者介面和社群範本庫中,都會看到範本名稱。這項資訊會顯示在範本詳細資料頁面的頂端,並會顯示在範本清單中。
- 請使用貴公司/機構名稱和範本的功能名稱:機構名稱 範本名稱。
- 使用標題大小寫格式。
- 使用描述功能的詞彙。
- 除非獲得相關機構的授權,否則請勿在範本名稱中使用「官方」一詞。
範例: MyCompany 轉換評估代碼、MyCompany 廣告活動 ID 變數
說明
範本說明是範本的說明,會顯示在詳細資料頁面上,簡要說明範本功能。
- 以簡明扼要的句子說明範本的用途。
- 清楚說明您的範本可為使用者帶來哪些好處。例如:「Example.com 目標對象建立工具範本可協助您根據網站訪客建立新的目標對象名單。」
- 避免使用專業術語。
- 加入其他資訊、說明文件和支援服務的連結。
圖示
在代碼管理工具和社群範本庫中,範本圖示會以縮圖的形式顯示。
- 使用 PNG、JPEG 或 GIF 圖片格式。
- 圖片應為正方形,大小不得小於 48 x 48 像素,且不得大於 96 x 96 像素。
- 檔案大小不得超過 50 KB。
- 除非獲得相關機構授權,否則請勿使用官方公司標誌。
- 欄位
- 使用範本編輯器的「欄位」分頁新增表單元素,例如文字輸入欄、核取方塊等。
欄位
這些樣式規範適用於範本編輯器的「欄位」分頁。
參數名稱
這是欄位在範本編輯器中顯示的名稱,但不會向使用者顯示。名稱應描述所用資料的類型。將參數名稱格式設為 lowerCamelCase
。範例: userName、customerID、shoppingCartValue。
欄位標籤
欄位標籤包括顯示名稱欄位、核取方塊文字和相關項目。
- 英文標題應採用句首字母大寫格式。
- 愈短愈好。
- 文意要明確。
- 使用常用字詞。
說明文字
說明文字是資訊內容,會以工具提示的形式顯示,協助使用者在範本欄位中輸入有效值。盡可能提供輸入範例,並說明如何使用範本欄位,或提供特定值的效果。
- 英文標題應採用句首字母大寫格式。
- 簡明扼要,但要保持人性。你可以使用縮寫字詞,並以第二人稱 (你) 書寫。
- 支援的欄位類型
- 允許使用基本 HTML 格式。例如:
<strong>
、<em>
。
支援的欄位類型
類型 |
說明 |
文字輸入 |
輸入文字。這種型別的範本參數值會是可能參照變數的字串。在代碼管理工具使用者介面中顯示的文字輸入小工具,可以是單行文字欄位或多行輸入內容。 |
下拉式選單 |
下拉式選單,只能選取單一項目做為範本參數的值。除非有充分理由,否則請依字母順序列出項目。 |
Checkbox |
核取方塊輸入。此類型的範本參數值會是布林值:勾選為 true,未勾選為 false。 |
圓形按鈕 |
無線電輸入。這種類型的範本參數會在代碼管理工具使用者介面中顯示選項清單,使用者只能選擇其中一個選項做為範本參數的值。 |
簡單表格 |
簡易表格輸入內容。表格中的每個儲存格都可以直接編輯,且每個儲存格只能是下列兩種類型:文字輸入或下拉式選單。此類型範本參數的值是物件陣列:每個物件會編碼一列,物件中的每個鍵都必須是資料欄名稱之一,而物件中的每個值都是對應儲存格的值。 |
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-07-25 (世界標準時間)。
[null,null,["上次更新時間:2025-07-25 (世界標準時間)。"],[[["\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. |"]]