テンプレート スタイルガイド
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
このスタイルガイドでは、コミュニティ テンプレート ギャラリーで公開するテンプレートを作成する際のガイドラインについて説明します。このスタイルガイドは、Google マテリアル デザインのライティング原則に基づいています。基本原則は以下のとおりです。
- 簡潔であること
- シンプルかつ直接的であること
- 人称を適切に使い分けること
- 重要なポイントが伝わるようにすること
- あらゆる読解レベルのユーザーが理解できること
- 機械的でなく、親しみやすいトーンを使用すること
これらのガイドラインに準拠することで、テンプレートのデザインに一貫性を持たせ、ユーザーにとって使いやすいテンプレートを作成することができます。
情報
以下のガイドラインは、テンプレート エディタの [情報] タブの項目に適用されます。
名前
テンプレートの名前は、タグ マネージャーのユーザー インターフェースとコミュニティ テンプレート ギャラリーのテンプレート詳細ページの上部、およびテンプレートの一覧に表示されます。
- 「会社名 テンプレート名」のように、会社名（または組織名）とテンプレートの機能名を併記します。
- 語頭を大文字にします（アルファベットの場合）。
- 用途が一目でわかる名前を付けます。
- 関連団体の許可を得ているのでない限り、テンプレート名に「公式」という語は使用しないでください。
例: MyCompany コンバージョン測定タグ、MyCompany キャンペーン ID 変数
説明
テンプレートの説明とは、詳細ページに表示されるテンプレートの機能の概要です。
- テンプレートで何ができるかを、わかりやすく簡潔に説明します。
- テンプレートを使用するメリットが明快に伝わるようにします。たとえば、「Example.com オーディエンス ビルダーを使用すると、ウェブサイトを訪れるユーザーのデータを基に新しいオーディエンス リストを作成できます」と記載できます。
- 専門用語は使わないようにします。
- 詳細情報、ドキュメント、サポートへのリンクを含めます。
アイコン
タグ マネージャーとコミュニティ テンプレート ギャラリーのテンプレートの一覧には、テンプレートのアイコンがサムネイルとして表示されます。
- 画像形式には PNG、JPEG、GIF を使用します。
- 画像はスクエア形式で、48×48 ピクセル以上、96×96 ピクセル以下である必要があります。
- ファイルサイズは 50 KB 未満である必要があります。
- 公式の企業ロゴは、関連団体の許可がない限り使用しないでください。
- 項目
- テンプレート エディタの [項目] タブを使用して、テキスト入力、チェックボックスなどのフォーム要素を追加します。
項目
以下のガイドラインは、テンプレート エディタの [項目] タブに適用されます。
パラメータ名
テンプレート エディタに表示される項目の名前です。これはユーザーに表示される名前とは異なりますどのようなデータを扱うパラメータなのかが、わかるような名前を付けます。パラメータ名の形式は、lowerCamelCase にします。例: userName、customerID、shoppingCartValue
項目のラベル
項目のラベルには、表示名、チェックボックスのテキスト、関連アイテムなどが含まれます。
- 文頭を大文字にします（アルファベットの場合）。
- できる限り短くします。
- わかりやすいラベルを付けます。
- 専門用語は使用しません。
ヘルプテキスト
ヘルプテキストとは、テンプレートの項目に入力できる有効な値についてユーザーにヒントを提供するため、ツールチップとして表示される情報コンテンツです。可能であれば入力例を示して、その項目がどのように使用されるか、指定した値がどのように適用されるかを説明します。
- 文頭を大文字にします（アルファベットの場合）。
- 簡潔、かつ親しみやすいトーンを使用します。短縮形、二人称（you）を使用することもできます。
- サポートされている項目のタイプ
- 簡易 HTML の形式を使用できます（例:
<strong>、<em>）。
サポートされている項目のタイプ
タイプ |
説明 |
| テキスト入力 |
テキスト入力。このタイプのテンプレート パラメータの値は文字列になります。変数を参照する場合もあります。タグ マネージャーのユーザー インターフェースに表示されるテキスト入力ウィジェットでは、1 行または複数行のテキスト項目になります。 |
| プルダウン メニュー |
プルダウン メニューからの選択。ユーザーは 1 つの値のみをテンプレート パラメータの値として選択できます。特に理由がなければ、選択肢はアルファベット順にリストしてください。 |
| チェックボックス |
チェックボックスの入力。このタイプのテンプレート パラメータの値は、ブール値になります。オンの場合は true、オフの場合は false です。 |
| ラジオボタン |
ラジオ入力。このタイプのテンプレート パラメータは、タグ マネージャーのユーザー インターフェースに選択肢のリストを表示します。ユーザーは 1 つの値のみをテンプレート パラメータの値として選択できます。 |
| シンプルな表 |
シンプルな表の入力。セルごとに編集が可能です。各セルは、テキスト入力かプルダウン メニューからの選択のいずれかの形式になります。このタイプのテンプレート パラメータの値は、オブジェクトの配列になります。各オブジェクトは行をエンコードしたもので、オブジェクトの各キーはいずれかの列名、オブジェクトの各値は対応するセルの値になります。 |
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-25 UTC。
[null,null,["最終更新日 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. |"]]
