یک متغیر سفارشی ایجاد کنید
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
این راهنما نحوه ایجاد یک قالب متغیر سفارشی را به شما آموزش می دهد. هنگامی که از این متغیر استفاده می شود، آرایه ای از مقادیر را می گیرد و آنها را به عنوان یک رشته محدود شده با کاما برمی گرداند.
برای شروع اولین الگوی متغیر خود، روی Templates در ناوبری سمت چپ کلیک کنید و روی دکمه New در زیر بخش Variable Templates کلیک کنید.
در تب اطلاعات ، نام و توضیحات متغیر را تعریف کنید.
نام چیزی است که وقتی کاربران برای پیاده سازی این متغیر در سرتاسر رابط کاربری تگ منیجر می روند به آنها ارائه می شود.
توضیحات دقیقاً همان چیزی است که به نظر می رسد - شرح مختصری (200 کاراکتر یا کمتر) از آنچه این متغیر انجام می دهد.
برای پیش نمایش الگوی خود روی Refresh کلیک کنید.
در سمت راست ورودی های فیلد، یک پنجره پیش نمایش الگو وجود دارد. هر بار که تغییری در ویرایشگر ایجاد می شود، دکمه Refresh ظاهر می شود. روی Refresh کلیک کنید تا ببینید تغییرات شما با ظاهر متغیر شما چه می کند.
برای افزودن فیلدها به قالب متغیر خود، روی فیلدها کلیک کنید.
تب Template Editor's Fields به شما امکان می دهد فیلدهایی را در قالب متغیر ایجاد و ویرایش کنید. از فیلدها برای وارد کردن داده های سفارشی مانند شناسه حساب استفاده می شود. می‌توانید عناصر فرم استاندارد مانند فیلدهای متنی، منوهای کشویی، دکمه‌های رادیویی و کادرهای انتخاب را اضافه کنید.
روی افزودن فیلد کلیک کنید و جدول ساده را انتخاب کنید. نام پیش‌فرض (مانند "simpleTable1" ) را با "list" جایگزین کنید. در پیش نمایش الگو ، روی Refresh کلیک کنید.
این مرحله را برای یک ورودی متن تکرار کنید و آن را "آرایه" ، دو چک باکس به نام‌های " use_array " و "sort" و یک ورودی متن به نام "delimiter" نام ببرید. برای «جداکننده» ، مقدار پیش‌فرض «» را با کلیک کردن روی نماد چرخ‌دنده، روشن کردن «مقدار پیش‌فرض» و سپس پر کردن فیلد ورودی مقدار پیش‌فرض جدید به آن بدهید.
روی تب Code کلیک کنید و جاوا اسکریپت sandboxed را در ویرایشگر وارد کنید:
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 || ',');
کد این متغیر نسبتاً ساده است، اما چند نکته قابل ذکر است.
فیلدهای data
چند فیلد وجود دارد که خارج از data سراسری به آنها دسترسی پیدا می کند. data حاوی مقادیری هستند که در مرحله قبل تنظیم کرده اید. به همین دلیل است که می‌توانیم به data.use_array ، data.sort ، data.list و data.delimiter دسترسی داشته باشیم.
اگر data.delimiter ارائه نشده باشد، delimiter روی مقدار پیش‌فرض "," تنظیم می‌شود. اگر منطقی باشد، تنظیم مقادیر پیش فرض برای یک فیلد تمرین خوبی است. این کار استفاده از الگوی متغیر را برای کاربران آسان‌تر می‌کند، زیرا برای استفاده از متغیر لازم نیست همه فیلدها را پر کنند.
برای ذخیره پیشرفت خود روی ذخیره کلیک کنید. با این کار هر مجوز شناسایی شده در ویرایشگر الگو بارگیری می شود.
برخی از APIهای الگو دارای مجوزهای مرتبط با آنها هستند که به آنها دیکته می کند که چه کاری می توانند یا نمی توانند انجام دهند. وقتی از یک API الگو مانند sendPixel در کد خود استفاده می کنید، Tag Manager مجوزهای مربوطه را در برگه Permissions نشان می دهد.
در برگه پیش‌نمایش الگو ، مقداری برای ورودی «مقدار» اضافه کنید، روی Run Code کلیک کنید و به کنسول نگاه کنید تا خروجی متغیر خود را ببینید.
اگر خطایی وجود داشته باشد، در پنجره کنسول ظاهر می شود.
روی ذخیره کلیک کنید و ویرایشگر الگو را ببندید
اکنون قالب متغیر باید برای استفاده آماده باشد.
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-07-24 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-24 بهوقت ساعت هماهنگ جهانی."],[[["\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."]]
