Hướng dẫn về kiểu mẫu
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Hướng dẫn tạo kiểu này được chuẩn bị để giúp bạn đưa ra quyết định về cách chuẩn bị mẫu cho Thư viện mẫu cho cộng đồng. Hướng dẫn quy tắc này dựa trên các nguyên tắc viết của Google Material Design. Nói một cách đơn giản, đó là:
- Ngắn gọn
- Viết đơn giản và trực tiếp
- Trình bày rõ ràng với người dùng
- Thông báo các chi tiết cần thiết
- Viết cho mọi cấp độ đọc
- Hãy viết cho con người, chứ không phải cho robot
Hãy làm theo các nguyên tắc này để đảm bảo rằng tất cả mẫu đều có giao diện nhất quán và giúp người dùng hiểu cách sử dụng mẫu của bạn.
Thông tin
Những nguyên tắc này áp dụng cho các mục có trong thẻ Thông tin của Trình chỉnh sửa mẫu.
Tên
Tên mẫu được hiển thị cho người dùng Trình quản lý thẻ trong toàn bộ giao diện người dùng của Trình quản lý thẻ và Thư viện mẫu cho cộng đồng. Thông tin này xuất hiện ở đầu trang chi tiết của mẫu và xuất hiện khi các mẫu được liệt kê.
- Sử dụng tên công ty/tổ chức và tên chức năng của mẫu: Tên tổ chức Tên mẫu.
- Sử dụng cách viết hoa chữ cái đầu.
- Sử dụng các thuật ngữ mô tả chức năng.
- Tránh sử dụng từ "Chính thức" trong tên mẫu, trừ phi bạn được tổ chức có liên quan uỷ quyền.
Ví dụ: Thẻ đo lường lượt chuyển đổi MyCompany, Biến mã chiến dịch MyCompany
Mô tả
Nội dung mô tả mẫu là nội dung mô tả mẫu xuất hiện trên trang chi tiết dưới dạng bản tóm tắt ngắn gọn về chức năng của mẫu.
- Sử dụng các câu rõ ràng và súc tích để mô tả chức năng của mẫu.
- Nêu rõ lợi ích của mẫu đối với người dùng. Ví dụ: "Mẫu Trình tạo đối tượng Example.com có thể giúp bạn tạo danh sách đối tượng mới từ khách truy cập trang web".
- Tránh sử dụng từ chuyên môn.
- Cung cấp đường liên kết đến thông tin bổ sung, tài liệu và dịch vụ hỗ trợ.
Biểu tượng
Biểu tượng mẫu được thể hiện dưới dạng hình thu nhỏ khi được liệt kê trong Trình quản lý thẻ và trên Thư viện mẫu cho cộng đồng.
- Sử dụng định dạng hình ảnh PNG, JPEG hoặc GIF.
- Hình ảnh phải là hình vuông, có kích thước tối thiểu là 48 pixel x 48 pixel và không lớn hơn 96 pixel x 96 pixel.
- Kích thước tệp phải nhỏ hơn 50 kilobyte.
- Tránh sử dụng biểu trưng chính thức của công ty, trừ phi bạn được tổ chức có liên quan cho phép.
- Trường
- Sử dụng thẻ Trường của Trình chỉnh sửa mẫu để thêm các thành phần biểu mẫu như mục nhập văn bản, hộp đánh dấu, v.v.
Trường
Những nguyên tắc về kiểu này áp dụng cho thẻ Trường của Trình chỉnh sửa mẫu.
Tên thông số
Đây là tên của trường xuất hiện trong Trình chỉnh sửa mẫu, nhưng không phải là tên xuất hiện trước người dùng. Tên phải mô tả loại dữ liệu được sử dụng. Định dạng tên tham số là lowerCamelCase. Ví dụ: userName, customerID, shoppingCartValue.
Nhãn trường
Nhãn trường bao gồm các trường tên hiển thị, văn bản hộp đánh dấu và các mục có liên quan.
- Sử dụng cách viết hoa đầu câu.
- Càng ngắn càng tốt.
- Hãy cung cấp thông tin mô tả.
- Sử dụng các từ phổ biến.
Văn bản trợ giúp
Văn bản trợ giúp là nội dung cung cấp thông tin, hiển thị dưới dạng chú giải công cụ, để giúp người dùng nhập giá trị hợp lệ vào trường mẫu. Cung cấp ví dụ về dữ liệu đầu vào (nếu có) và mô tả cách sử dụng trường mẫu hoặc hiệu quả của việc cung cấp một số giá trị nhất định.
- Sử dụng cách viết hoa đầu câu.
- Ngắn gọn nhưng vẫn mang tính nhân văn. Bạn có thể sử dụng từ viết tắt và viết ở ngôi thứ hai (bạn).
- Các loại trường được hỗ trợ
- Bạn được phép định dạng HTML cơ bản. Ví dụ:
<strong>, <em>.
Các loại trường được hỗ trợ
Loại |
Mô tả |
| Nhập văn bản |
Nhập văn bản. Giá trị của tham số mẫu thuộc loại này sẽ là một chuỗi có thể tham chiếu đến các biến. Tiện ích nhập văn bản hiển thị trong giao diện người dùng của Trình quản lý thẻ có thể là trường văn bản một dòng hoặc nhập nhiều dòng. |
| Trình đơn thả xuống |
Trình đơn thả xuống chỉ cho phép chọn một mục duy nhất làm giá trị của tham số mẫu. Liệt kê các mục theo thứ tự bảng chữ cái, trừ phi có lý do chính đáng. |
| Checkbox |
Nhập bằng hộp đánh dấu. Giá trị của thông số mẫu thuộc loại này sẽ là boolean: true (đã đánh dấu) đối với trường hợp đã đánh dấu và false (chưa đánh dấu) đối với trường hợp chưa đánh dấu. |
| Nút chọn |
Phương thức nhập dữ liệu dạng danh sách. Tham số mẫu thuộc loại này hiển thị danh sách các lựa chọn trong giao diện người dùng của Trình quản lý thẻ và người dùng chỉ được chọn một trong các lựa chọn đó làm giá trị của tham số mẫu. |
| Bảng đơn giản |
Dữ liệu đầu vào dạng bảng đơn giản. Bạn có thể chỉnh sửa tại chỗ từng ô trong bảng và mỗi ô chỉ có thể thuộc một trong hai loại: mục nhập văn bản hoặc trình đơn thả xuống. Giá trị của tham số mẫu thuộc loại này là một mảng đối tượng: mỗi đối tượng mã hoá một hàng, mỗi khoá trong đối tượng phải là một trong các tên cột và mỗi giá trị trong đối tượng là giá trị của ô tương ứng. |
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-25 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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. |"]]
