Styleguide für Vorlagen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Dieser Stilleitfaden soll Ihnen bei der Entscheidung helfen, wie Sie Vorlagen für die Community-Galerie für Vorlagen vorbereiten. Dieser Stilguide basiert auf den Schreibprinzipien von Google Material Design. Einfach ausgedrückt:
- Präzise formulieren
- Schreiben Sie einfach und direkt.
- Nutzer klar ansprechen
- Wichtige Details mitteilen
- Für alle Leseniveaus schreiben
- Menschlich sein: Schreiben Sie für Menschen, nicht für Roboter
Beachten Sie diese Richtlinien, damit alle Vorlagen ein einheitliches Erscheinungsbild haben und Nutzer die Verwendung Ihrer Vorlage besser nachvollziehen können.
Info
Diese Richtlinien gelten für Elemente auf dem Tab Info im Vorlageneditor.
Name
Der Name der Vorlage wird Tag Manager-Nutzern in der Benutzeroberfläche von Tag Manager und in der Community-Galerie für Vorlagen angezeigt. Sie wird oben auf der Detailseite einer Vorlage und in der Liste der Vorlagen angezeigt.
- Verwenden Sie den Namen Ihres Unternehmens/Ihrer Organisation und den funktionalen Namen der Vorlage: Name der Organisation Name der Vorlage.
- Verwenden Sie Großbuchstaben am Wortanfang.
- Verwenden Sie Begriffe, die die Funktion beschreiben.
- Verwenden Sie den Begriff „Offizielle“ in Vorlagennamen nur, wenn Sie von der entsprechenden Organisation dazu berechtigt sind.
Beispiele:Conversion-Analyse-Tag von „Meine Firma“, Variable „Kampagnen-ID von „Meine Firma““
Beschreibung
Die Vorlagenbeschreibung ist eine Beschreibung der Vorlage, die auf Detailseiten als kurze Zusammenfassung der Vorlagenfunktionen angezeigt wird.
- Beschreiben Sie in klaren und prägnanten Sätzen, wozu die Vorlage dient.
- Beschreiben Sie klar, welchen Nutzen Ihre Vorlage für die Nutzer hat. Beispiel: „Mit der Zielgruppenerstellungsvorlage von beispiel.de können Sie neue Zielgruppenlisten aus Websitebesuchern erstellen.“
- Vermeiden Sie Fachjargon.
- Fügen Sie Links zu zusätzlichen Informationen, Dokumentationen und Support hinzu.
Symbol
Das Symbol Ihrer Vorlage wird in Tag Manager und in der Galerie für Community-Vorlagen als Thumbnail angezeigt.
- Verwenden Sie PNG, JPEG oder GIF als Bildformat.
- Das Bild muss quadratisch sein, mindestens 48 × 48 Pixel groß und darf maximal 96 × 96 Pixel groß sein.
- Die Dateigröße darf 50 Kilobyte nicht überschreiten.
- Verwenden Sie offizielle Unternehmenslogos nur, wenn Sie von der entsprechenden Organisation dazu berechtigt sind.
- Felder
- Auf dem Tab „Felder“ im Vorlageneditor können Sie Formularelemente wie Textfelder und Kästchen hinzufügen.
Felder
Diese Stilrichtlinien gelten für den Tab Felder im Vorlageneditor.
Parametername
Das ist der Name des Felds, wie er im Vorlageneditor angezeigt wird, nicht wie er für den Nutzer angezeigt wird. Die Namen sollten die Art der verwendeten Daten beschreiben. Formatieren Sie Parameternamen als lowerCamelCase. Beispiele:userName, customerID, shoppingCartValue.
Feldlabels
Feldlabels umfassen Anzeigenamenfelder, Kästchentext und zugehörige Elemente.
- Achten Sie auf korrekte Groß- und Kleinschreibung.
- Eine kürzere Anzeige ist besser.
- Verwenden Sie anschauliche Worte.
- Verwenden Sie gängige Wörter.
Hilfetext
Hilfetext ist ein informativer Inhalt, der als Kurzinfo angezeigt wird, um Nutzern zu helfen, einen gültigen Wert in das Vorlagenfeld einzugeben. Geben Sie nach Möglichkeit Beispieleingaben an und beschreiben Sie, wie das Vorlagenfeld verwendet wird oder welche Auswirkungen die Angabe bestimmter Werte hat.
- Achten Sie auf korrekte Groß- und Kleinschreibung.
- Seien Sie kurz, aber verständlich. Sie können auch Konjunktive verwenden und in der zweiten Person schreiben.
- Unterstützte Feldtypen
- Eine grundlegende HTML-Formatierung ist zulässig. Beispiele:
<strong>, <em>.
Unterstützte Feldtypen
Typ |
Beschreibung |
| Texteingabe |
Texteingabe Der Wert eines Vorlagenparameters dieses Typs ist ein String, der sich auf Variablen beziehen kann. Das Texteingabe-Widget, das in der Tag Manager-Benutzeroberfläche gerendert wird, kann entweder ein einzeiliges Textfeld oder eine mehrzeilige Eingabe sein. |
| Drop-down-Menü |
Drop-down-Menü, in dem nur ein Element als Wert des Vorlagenparameters ausgewählt werden konnte. Listen Sie die Elemente in alphabetischer Reihenfolge auf, es sei denn, es gibt einen triftigen Grund, dies nicht zu tun. |
| Kästchen |
Kästcheneingaben Der Wert eines Vorlagenparameters dieses Typs ist boolescher Natur: „wahr“ für angeklickt, „falsch“ für nicht angeklickt. |
| Optionsfeld |
Radioeingabe Bei einem Vorlagenparameter dieses Typs wird in der Tag Manager-Benutzeroberfläche eine Liste mit Auswahlmöglichkeiten angezeigt. Der Nutzer darf nur eine der Optionen als Wert für den Vorlagenparameter auswählen. |
| Einfache Tabelle |
Eine einfache Tabelleneingabe. Jede Zelle in der Tabelle kann direkt bearbeitet werden. Es gibt zwei Arten von Zellen: Texteingabe oder Drop-down-Menü. Der Wert eines Vorlagenparameters dieses Typs ist ein Array von Objekten: Jedes Objekt codiert eine Zeile, jeder Schlüssel im Objekt muss einer der Spaltennamen sein und jeder Wert im Objekt ist der Wert der entsprechenden Zelle. |
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-25 (UTC).
[null,null,["Zuletzt aktualisiert: 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. |"]]
