Template style guide

This style guide has been prepared to help you make decisions on how to prepare templates for the Community Template Gallery. This style guide is based on the Google Material Design writing principles. Simply put, these are:

  • Be concise
  • Write simply and directly
  • Address users clearly
  • Communicate essential details
  • Write for all reading levels
  • Be human: write for humans, not robots

Follow these guidelines to help ensure that all templates have a consistent look and feel, and to help users understand how to use your template.

Info

These guidelines apply to items found in the Template Editor's Info tab.

Name

The 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.

  • Use your company/organization name and the functional name of the template: Organization Name Template Name.
  • Use Title Case.
  • Use terms that are descriptive of the functionality.
  • Avoid use of the term "Official" in template names, unless you are authorized to do so by the relevant organization.

Examples: MyCompany Conversion Measurement Tag, MyCompany Campaign ID Variable

Description

The template description is a description of the template that appears on detail pages as a brief summary of the template functionality.

  • Use clear and concise sentences to describe what the template does.
  • 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."
  • Avoid jargon.
  • Include links for additional information, documentation, and support.

Icon

Your template icon is represented as a thumbnail when listed in Tag Manager and on the Community Template Gallery.

  • Use PNG, JPEG, or GIF for the image format.
  • Image should be square, at least 48px by 48px, and no larger than 96px by 96px.
  • File size must be less than 50 kilobytes.
  • Avoid use of official company logos, unless you are authorized to do so by the relevant organization.
  • Fields
  • Use the Template Editor's Fields tab to add form elements such as text input, checkboxes, etc.

Fields

These style guidelines apply to the Template Editor's Fields tab.

Parameter name

This 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.

Field labels

Field labels include display name fields, checkbox text, and related items.

  • Use sentence case.
  • Shorter is better.
  • Be descriptive.
  • Use common words.

Help text

Help 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.

  • Use sentence case.
  • Be concise, but be human. It's okay to use contractions and write in the 2nd person (you).
  • Supported field types
  • Basic HTML formatting is permitted. Examples: <strong>, <em>.

Supported field types

Type
 Description
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.
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.
Checkbox Checkbox input. The value of a template parameter of this type will be boolean: true for checked, false for unchecked.
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.
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.