Panduan gaya template
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Panduan gaya ini telah disiapkan untuk membantu Anda mengambil keputusan terkait cara menyiapkan template untuk Galeri Template Komunitas. Panduan gaya ini didasarkan pada prinsip penulisan Desain Material Google. Prinsip ini adalah sebagai berikut:
- Ringkas
- Tulis secara simpel dan langsung
- Sapa pengguna dengan jelas
- Sampaikan detail yang penting
- Tulis untuk semua tingkat kemampuan baca
- Bersikaplah sebagaimana manusia: tulis untuk manusia, bukan robot
Ikuti panduan ini untuk membantu memastikan semua template memiliki tampilan dan nuansa yang konsisten, serta untuk membantu pengguna memahami cara menggunakan template Anda.
Info
Panduan ini berlaku untuk item yang ada di tab Info Editor Template.
Nama
Nama template ditampilkan kepada pengguna Tag Manager di seluruh antarmuka pengguna Tag Manager dan Galeri Template Komunitas. Template ini muncul di bagian atas halaman detail template, dan muncul saat template dicantumkan.
- Gunakan nama perusahaan/organisasi Anda dan nama fungsi template: Nama Organisasi Nama Template.
- Gunakan Kapitalisasi Judul.
- Gunakan istilah yang menjelaskan fungsi.
- Hindari penggunaan istilah "Resmi" dalam nama template, kecuali jika Anda telah diberi otorisasi untuk melakukannya oleh organisasi yang relevan.
Contoh: Tag Pengukuran Konversi MyCompany, Variabel ID Kampanye MyCompany
Deskripsi
Deskripsi template adalah deskripsi template yang muncul di halaman detail sebagai ringkasan singkat fungsi template.
- Gunakan kalimat yang jelas dan ringkas untuk mendeskripsikan fungsi template.
- Nyatakan dengan jelas bagaimana template Anda bisa bermanfaat bagi pengguna. Misalnya: "Template Pembuat Audiens Example.com dapat membantu Anda membuat daftar audiens baru dari pengunjung situs".
- Hindari jargon.
- Sertakan link untuk informasi, dokumentasi, dan dukungan tambahan.
Ikon
Ikon template Anda ditampilkan sebagai thumbnail jika tercantum di Tag Manager dan di Galeri Template Komunitas.
- Gunakan PNG, JPEG, atau GIF untuk format gambar.
- Gambar harus berbentuk persegi, minimal berukuran 48 x 48 piksel, dan tidak lebih besar dari 96 x 96 piksel.
- Ukuran file harus di bawah 50 kilobyte.
- Hindari penggunaan logo perusahaan resmi, kecuali jika Anda telah diberi otorisasi untuk melakukannya oleh organisasi yang relevan.
- Kolom
- Gunakan tab Kolom Editor Template untuk menambahkan elemen formulir seperti input teks, kotak centang, dsb.
Kolom
Panduan gaya ini berlaku untuk tab Kolom Editor Template.
Nama parameter
Ini adalah nama kolom seperti yang muncul di Editor Template, tetapi tidak seperti yang ditampilkan kepada pengguna. Nama harus mendeskripsikan jenis data yang digunakan. Format nama parameter sebagai lowerCamelCase. Contoh: userName, customerID, shoppingCartValue.
Label kolom
Label kolom mencakup kolom nama tampilan, teks kotak centang, dan item terkait.
- Gunakan kapitalisasi kalimat.
- Lebih singkat lebih baik.
- Berikan gambaran yang jelas.
- Gunakan kata yang umum.
Teks bantuan
Teks bantuan adalah konten informasi, yang ditampilkan sebagai tooltip, untuk membantu pengguna memasukkan nilai yang valid ke kolom template. Berikan contoh input, jika memungkinkan, dan jelaskan cara penggunaan kolom template atau efek dari pemberian nilai tertentu.
- Gunakan kapitalisasi kalimat.
- Ringkas, tetapi tidak kaku. Anda dapat menggunakan singkatan dan menggunakan format orang kedua (Anda) dalam tulisan.
- Jenis kolom yang didukung
- Format HTML dasar diizinkan. Contoh:
<strong>, <em>.
Jenis kolom yang didukung
Jenis |
Deskripsi |
| Input teks |
Input teks. Nilai parameter template jenis ini adalah string yang dapat merujuk ke variabel. Widget input teks yang dirender di antarmuka pengguna Tag Manager dapat berupa kolom teks satu baris atau input multibaris. |
| Menu drop-down |
Menu drop-down yang hanya mengizinkan satu item dipilih sebagai nilai parameter template. Susun item dalam urutan abjad kecuali ada alasan mendasar untuk tidak melakukannya. |
| Kotak centang |
Input kotak centang. Nilai parameter template jenis ini adalah boolean: true (benar) untuk dicentang, false (salah) untuk tidak dicentang. |
| Tombol radio |
Input radio. Parameter template jenis ini menyajikan daftar pilihan di antarmuka pengguna Tag Manager dan pengguna hanya diizinkan untuk memilih salah satu pilihan sebagai nilai parameter template. |
| Tabel sederhana |
Input tabel yang sederhana. Setiap sel dalam tabel dapat diedit secara langsung, dan setiap sel hanya dapat berupa salah satu dari dua jenis berikut: input teks atau menu drop-down. Nilai parameter template jenis ini adalah array objek: setiap objek mengenkode baris, setiap kunci dalam objek harus berupa salah satu nama kolom, dan setiap nilai dalam objek merupakan nilai dari sel yang sesuai. |
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-25 UTC.
[null,null,["Terakhir diperbarui pada 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. |"]]