模板样式指南
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
本样式指南旨在帮助您决定如何为社区模板库准备模板,它是按照 Google Material Design 撰写原则编制的。简言之,这些原则包括:
- 简洁
- 内容简单直接
- 明确解决用户问题
- 传递基本的详细信息
- 适合各种阅读水平
- 秉持人性化理念:面向人类(而非机器人)而撰写
请遵循这些准则,确保所有模板均具有一致的外观和风格,并帮助用户了解如何使用您的模板。
信息
这些准则适用于模板编辑器的信息标签页中的项。
名称
模板名称会在跟踪代码管理器界面和社区模板库中展示给跟踪代码管理器用户。它显示在模板详情页面的顶部,还会在模板以列表形式显示时出现。
- 请将您的公司/组织名称与模板的功能名称组合使用,组织名称在前,后跟模板名称。
- 采用词首字母大写形式。
- 使用描述功能的字词。
- 避免在模板名称中使用“Official”一词,除非您获得了相关组织的授权。
示例:MyCompany Conversion Measurement Tag、MyCompany Campaign ID Variable
说明
模板说明是对模板的说明,作为模板功能的简短摘要显示在详情页面上。
- 使用简明扼要的句子描述模板的功能。
- 明确说明您的模板为用户带来的优势。例如:“Example.com Audience Builder 模板可助您利用网站访问者构建新的受众群体名单”
- 避免使用行话。
- 添加指向其他信息、文档和支持服务的链接。
图标
跟踪代码管理器和社区模板库中列出的模板图标采用的是缩略图表示形式,
- 使用的是 PNG、JPEG 或 GIF 图片格式。
- 图片应为方形,至少为 48 像素 x 48 像素,且不超过 96 像素 x 96 像素。
- 文件必须小于 50 KB。
- 避免使用官方公司徽标,除非您获得了相关组织的授权。
- 字段
- 使用模板编辑器的“字段”标签页添加文本输入和复选框等表单元素。
字段
这些样式准则适用于模板编辑器的字段标签页。
参数名称
这是字段在模板编辑器中的名称,但并非面向用户显示的名称。名称应描述所用数据的类型。参数名称应采用 lowerCamelCase
格式。示例:userName、customerID、shoppingCartValue。
字段标签
字段标签包括显示名称字段、复选框文本和相关项。
- 采用句首字母大写形式。
- 越短越好。
- 客观描述。
- 使用常用字词。
帮助文本
帮助文本是以提示形式呈现的信息性内容,可帮助用户在模板字段中输入有效值。请尽可能提供输入内容示例,并描述模板字段的使用方式或提供某些值时的效果。
- 采用句首字母大写形式。
- 简洁,但秉持人性化理念。可以使用缩写,并以第二人称(您)撰写。
- 支持的字段类型
- 可以使用基本 HTML 格式。示例:
<strong>
、<em>
。
支持的字段类型
类型 |
说明 |
文本输入 |
文本输入。如果模板参数为此类型,则其值是一个可引用变量的字符串。跟踪代码管理器界面中呈现的文本输入微件可以是单行文本字段,也可以是多行输入。 |
下拉菜单 |
下拉菜单,只能选择其中的一项作为模板参数的值。除非有充分的理由,否则请按字母顺序列出各项。 |
复选框 |
复选框输入。如果模板参数为此类型,则其值将为布尔值:如果选中,则为 true;如果未选中,则为 false。 |
单选按钮 |
单选输入。此类型的模板参数会在跟踪代码管理器界面中显示一个选项列表,用户只能选择其中一项作为模板参数的值。 |
简单表格 |
简单的表格输入。表格中的每个单元格均可就地修改,并且每个单元格只能为两种类型之一:文本输入或下拉菜单。如果模板参数为此类型,则其值将为对象数组:每个对象均可以对某一行进行编码、对象中的每个键必须是其中一个列名,并且对象中的每个值均为对应单元格的值。 |
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):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. |"]]