Membuat variabel kustom
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Panduan ini akan memandu Anda melalui langkah-langkah untuk membuat template variabel kustom. Saat digunakan, variabel ini akan mengambil array nilai dan menampilkannya sebagai string yang dipisahkan koma.
Untuk memulai template variabel pertama Anda, klik Template di navigasi sebelah kiri, lalu klik tombol Baru di bagian Template Variabel.
Di tab Info, tentukan Nama dan Deskripsi variabel.
Nama adalah apa yang akan ditampilkan kepada pengguna saat mereka menerapkan variabel ini di seluruh antarmuka pengguna Tag Manager.
Deskripsi adalah persis seperti namanya - deskripsi singkat (200 karakter atau kurang) tentang fungsi variabel ini.
Klik Refresh untuk melihat pratinjau template Anda.
Di sebelah kanan input kolom, ada jendela Pratinjau Template.
Setiap kali perubahan dibuat dalam editor, tombol Refresh akan muncul. Klik Refresh untuk melihat apa yang dilakukan perubahan pada tampilan variabel Anda.
Klik Kolom untuk menambahkan kolom ke template variabel Anda.
Tab Kolom Editor Template memungkinkan Anda membuat dan mengedit kolom di template variabel. Kolom digunakan untuk memasukkan data kustom, seperti ID akun. Anda dapat menambahkan elemen formulir standar seperti kolom teks, menu drop-down, tombol pilihan, dan kotak centang.
Klik Tambahkan Kolom dan pilih Tabel sederhana. Ganti nama default (misalnya, "simpleTable1") dengan "daftar". Di Pratinjau Template, klik Refresh.
Ulangi langkah ini untuk Input Teks dan beri nama "array", dua Kotak centang yang disebut "use_array" dan "sort", serta Input Teks yang disebut "delimiter".
Untuk "delimiter", berikan nilai default "," dengan mengklik ikon roda gigi, alihkan "Nilai default" ke aktif, lalu isi kolom input Nilai Default yang baru.
Klik tab Kode dan masukkan JavaScript dengan sandbox di editor:
var input = data.array;
if (!data.use_array) {
input = [];
for (var i = 0; i < data.list.length; i++) {
input.push(data.list[i].values);
}
}
if (data.sort) {
input.sort();
}
return input.join(data.delimiter || ',');
Kode untuk variabel ini cukup sederhana, tetapi ada beberapa hal yang penting untuk dijelaskan.
Kolom data.
Ada beberapa kolom yang sedang diakses dari data global.
data akan berisi nilai yang Anda siapkan di langkah sebelumnya.
Itulah sebabnya kita dapat mengakses data.use_array, data.sort,
data.list, dan data.delimiter.
delimiter ditetapkan ke nilai default "," jika data.delimiter tidak diberikan. Sebaiknya tetapkan nilai default untuk kolom jika memungkinkan. Hal ini memudahkan pengguna untuk menggunakan template variabel, karena mereka tidak perlu mengisi setiap kolom untuk menggunakan variabel.
Klik Simpan untuk menyimpan progres. Tindakan ini akan memuat izin yang terdeteksi
ke Editor Template.
Beberapa API Template memiliki izin yang dikaitkan dengannya yang menentukan fungsi yang dapat atau tidak dapat dilakukannya. Saat Anda menggunakan API template seperti sendPixel di
kode Anda, Tag Manager akan menampilkan izin yang relevan di tab
Izin.
Di tab Pratinjau Template, tambahkan beberapa nilai untuk input "nilai", klik
Jalankan Kode, dan lihat Konsol untuk melihat output untuk variabel Anda.
Jika ada error, error tersebut akan muncul di jendela Konsol.
Klik Simpan, lalu tutup Editor Template
Template variabel kini telah siap digunakan.
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 2023-10-27 UTC.
[null,null,["Terakhir diperbarui pada 2023-10-27 UTC."],[[["\u003cp\u003eThis guide provides step-by-step instructions to create a custom variable template in Google Tag Manager.\u003c/p\u003e\n"],["\u003cp\u003eThis template transforms an array of values into a comma-separated string using JavaScript code within the template.\u003c/p\u003e\n"],["\u003cp\u003eThe template utilizes fields like 'list', 'array', 'use_array', 'sort', and 'delimiter' to customize its functionality.\u003c/p\u003e\n"],["\u003cp\u003eUsers can preview and test the template using the 'Template Preview' and 'Console' sections within the editor.\u003c/p\u003e\n"],["\u003cp\u003eOnce saved, the custom variable template is ready to be implemented within Google Tag Manager.\u003c/p\u003e\n"]]],["To create a variable template that returns a comma-delimited string from an array, start by creating a new template, defining its name and description in the *Info* tab. Then, in the *Fields* tab, add fields for a simple table (\"list\"), text input (\"array\"), checkboxes (\"use_array\", \"sort\"), and text input (\"delimiter\"). In the *Code* tab, enter sandboxed JavaScript to process these fields, joining the array with the specified delimiter, and save. Then preview the result and save the variable.\n"],null,["# Create a custom variable\n\nThis guide will walk you through how to create a custom variable template. When\nthis variable is used, it will take an array of values and return them as a\ncomma delimited string.\n\n1. To begin your first variable template, click Templates in the left\n navigation and click the *New* button under the *Variable Templates*\n section.\n\n2. In the *Info* tab, define the variable's *Name* and *Description*.\n\n **Name** is what will be presented to users when they go to implement this\n variable throughout the Tag Manager user interface.\n\n **Description** is just what it sounds like - a brief (200 characters or\n less) description of what this variable does.\n3. Click *Refresh* to preview your template.\n\n To the right of the field inputs, there is a *Template Preview* window.\n Every time a change is made in the editor, the **Refresh** button will\n appear. Click Refresh to see what your changes do to the appearance of your\n variable.\n4. Click *Fields* to add fields to your variable template.\n\n The Template Editor's **Fields** tab lets you create and edit fields in the\n variable template. Fields are used to enter custom data, such as an account\n ID. You can add the standard form elements like text fields, drop down\n menus, radio buttons, and checkboxes.\n5. Click *Add Field* and select *Simple table* . Replace the default name (e.g.\n *\"simpleTable1\"* ) with *\"list\"* . In the *Template Preview* , click *Refresh*.\n\n Repeat this step for a *Text Input* and call it *\"array\"* , two *Checkboxes*\n called \"*use_array* \" and *\"sort\"* , and a *Text Input* called *\"delimiter\"* .\n For *\"delimiter\"* , give it a default value of \",\" by clicking the gear icon,\n toggling *\"Default value\"* to on, and then filling in the new Default Value\n input field.\n6. Click the *Code* tab and enter sandboxed JavaScript in the editor:\n\n var input = data.array;\n\n if (!data.use_array) {\n input = [];\n for (var i = 0; i \u003c data.list.length; i++) {\n input.push(data.list[i].values);\n }\n }\n\n if (data.sort) {\n input.sort();\n }\n\n return input.join(data.delimiter || ',');\n\n The code for this variable is fairly straightforward, but there are a few\n things worth pointing out.\n - `data` fields.\n\n There are a few fields that are being accessed off of the `data` global.\n `data` will contain the values that you set up in the previous step.\n That's why we're able to access `data.use_array`, `data.sort`,\n `data.list`, and `data.delimiter`.\n - `delimiter` is set to a default value of `\",\"` if `data.delimiter` is\n not provided. It's a good practice to set default values for a field if\n one makes sense. This makes it easier for users to use the variable\n template, since they don't have to fill out every field in order to use\n the variable.\n\n7. Click *Save* to save your progress. This will load any detected permissions\n into the Template Editor.\n\n Some Template APIs have [permissions](/tag-platform/tag-manager/templates/permissions) associated with them that dictate what\n they can or cannot do. When you use a template API such as `sendPixel` in\n your code, Tag Manager will show relevant permissions in the **Permissions**\n tab.\n8. In the *Template Preview* tab, add some values for the \"values\" input, click\n **Run Code** , and look at the *Console* to see the output for your variable.\n\n If there are any errors, they will appear in the **Console** window.\n9. Click *Save*, and close the Template Editor\n\n The variable template should now be ready for use."]]