Guía de estilo de plantillas
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Esta guía de estilo se creó para ayudarte a tomar decisiones sobre cómo preparar plantillas para la Galería de plantillas de la comunidad. Esta guía de estilo se basa en los principios de redacción de Material Design de Google. En pocas palabras, estos son los siguientes:
- Sé breve.
- Escribe de forma simple y directa
- Dirigirse a los usuarios de forma clara
- Comunica los detalles esenciales
- Escribe para todos los niveles de lectura
- Sé humano: escribe para personas, no para robots
Sigue estos lineamientos para asegurarte de que todas las plantillas tengan un aspecto coherente y ayudar a los usuarios a comprender cómo usarlas.
Información
Estos lineamientos se aplican a los elementos que se encuentran en la pestaña Info del editor de plantillas.
Nombre
El nombre de la plantilla se presenta a los usuarios de Tag Manager en la interfaz de usuario de Tag Manager y en la Galería de Plantillas de la Comunidad. Aparece en la parte superior de la página de detalles de una plantilla y cuando se muestran las plantillas.
- Usa el nombre de tu empresa o organización y el nombre funcional de la plantilla: Nombre de la organización Nombre de la plantilla.
- Usa mayúsculas de título.
- Usa términos que describan la funcionalidad.
- Evita usar el término "Oficial" en los nombres de las plantillas, a menos que la organización relevante te haya autorizado a hacerlo.
Ejemplos: Etiqueta de medición de conversiones de MyCompany, variable de ID de campaña de MyCompany
Descripción
La descripción de la plantilla es una descripción de la plantilla que aparece en las páginas de detalles como un breve resumen de su funcionalidad.
- Usa oraciones claras y concisas para describir lo que hace la plantilla.
- Indica claramente cómo beneficia tu plantilla al usuario. Por ejemplo: "La plantilla del Creador de públicos de Example.com puede ayudarte a crear nuevas listas de público a partir de los visitantes del sitio web".
- Evita la jerga.
- Incluye vínculos a información, documentación y asistencia adicionales.
Ícono
El ícono de tu plantilla se representa como una miniatura cuando aparece en Tag Manager y en la Galería de plantillas de la comunidad.
- Usa PNG, JPEG o GIF para el formato de imagen.
- La imagen debe ser cuadrada, de al menos 48 px por 48 px y no más de 96 px por 96 px.
- El tamaño del archivo debe ser inferior a 50 kilobytes.
- Evita usar logotipos oficiales de la empresa, a menos que la organización relevante te autorice a hacerlo.
- Campos
- Usa la pestaña Campos del editor de plantillas para agregar elementos de formulario, como entradas de texto, casillas de verificación, etcétera.
Campos
Estos lineamientos de estilo se aplican a la pestaña Campos del editor de plantillas.
Nombre del parámetro
Este es el nombre del campo tal como aparece en el editor de plantillas, pero no como aparece para el usuario. Los nombres deben describir el tipo de datos que se usan. Dales formato a los nombres de los parámetros como lowerCamelCase. Ejemplos: userName, customerID, shoppingCartValue.
Etiquetas de campo
Las etiquetas de campo incluyen campos de nombre visible, texto de casilla de verificación y elementos relacionados.
- Usa mayúscula inicial.
- Cuanto más breve, mejor.
- Sea descriptivo.
- Usa palabras comunes.
Texto de ayuda
El texto de ayuda es contenido informativo que se muestra como una información sobre la herramienta para ayudar al usuario a ingresar un valor válido en el campo de la plantilla. Si es posible, proporciona una entrada de ejemplo y describe cómo se usa el campo de plantilla o el efecto de proporcionar ciertos valores.
- Usa mayúscula inicial.
- Sé breve, pero muestra humanidad. Está bien usar contracciones y escribir en segunda persona (tú).
- Tipos de campos admitidos
- Se permite el formato HTML básico. Ejemplos:
<strong>, <em>.
Tipos de campos admitidos
Tipo |
Descripción |
| Entrada de texto |
Entrada de texto. El valor de un parámetro de plantilla de este tipo será una cadena que puede hacer referencia a variables. El widget de entrada de texto que se renderiza en la interfaz de usuario de Tag Manager puede ser un campo de texto de una sola línea o una entrada de varias líneas. |
| Menú desplegable |
Menú desplegable en el que solo se puede seleccionar un elemento como valor del parámetro de plantilla. Enlista los elementos en orden alfabético, a menos que haya un motivo válido para hacerlo de otro modo. |
| Checkbox |
Entrada de casilla de verificación. El valor de un parámetro de plantilla de este tipo será booleano: verdadero para marcado y falso para no marcado. |
| Botón de selección |
Entrada de radio. Un parámetro de plantilla de este tipo presenta una lista de opciones en la interfaz de usuario de Tag Manager, y el usuario solo puede elegir una de ellas como valor del parámetro de plantilla. |
| Tabla simple |
Una entrada de tabla simple. Cada celda de la tabla se puede editar en su lugar y solo puede ser de dos tipos: una entrada de texto o un menú desplegable. El valor de un parámetro de plantilla de este tipo es un array de objetos: cada objeto codifica una fila, cada clave del objeto debe ser uno de los nombres de las columnas y cada valor del objeto es el valor de la celda correspondiente. |
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-07-25 (UTC)
[null,null,["Última actualización: 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. |"]]
