إنشاء متغيّر مخصّص
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
سيرشدك هذا الدليل إلى كيفية إنشاء نموذج متغيّر مخصّص. فعندما
يُستخدم هذا المتغير، فسيأخذ صفيفًا من القيم ويعرضها
سلسلة مفصولة بفواصل.
لبدء نموذج المتغيّر الأول، انقر على "النماذج" على يمين الصفحة.
وانقر على الزر جديد ضمن نماذج المتغيّر.
.
في علامة التبويب المعلومات، حدِّد اسم المتغيّر والوصف الخاص به.
الاسم هو ما سيتم عرضه للمستخدمين عند تنفيذ هذا الإجراء.
المتغير في جميع أنحاء واجهة مستخدم أداة "إدارة العلامات من Google".
الوصف هو كما يبدو بالضبط - وهو موجز (200 حرف أو
أقل) وصف لما يفعله هذا المتغير.
انقر على إعادة التحميل لمعاينة النموذج.
على يسار إدخالات الحقل، توجد نافذة معاينة نموذج.
وفي كل مرة يتم فيها إجراء تغيير في المحرر، سيظهر الزر إعادة تحميل
موضع الإعلان. انقر على "إعادة تحميل" لرؤية تأثير التغييرات التي أجريتها على مظهر
المتغير.
انقر على الحقول لإضافة حقول إلى نموذج المتغيّر.
تسمح لك علامة التبويب الحقول في محرر النماذج بإنشاء حقول وتعديلها في
نموذج المتغير. تُستخدَم الحقول لإدخال بيانات مخصّصة، مثل حساب
رقم التعريف يمكنك إضافة عناصر النموذج العادية، مثل الحقول النصية والقوائم المنسدلة.
والقوائم وأزرار الاختيار ومربعات الاختيار.
انقر على إضافة حقل، واختَر جدول بسيط. استبدل الاسم التلقائي (على سبيل المثال،
"simpleTable1") مع "list". في معاينة النموذج، انقر على إعادة التحميل.
كرِّر هذه الخطوة مع إدخال النص وأطلق عليه اسم "الصفيف"، وهو عبارة عن مربّعَي اختيار.
باسم "use_array" و"sort" وإدخال نص باسم "delimiter".
بالنسبة إلى "المُحدِّد"، اضبط القيمة التلقائية على "," من خلال النقر على رمز الترس،
تفعيل "القيمة التلقائية"، ثم ملء حقل إدخال القيمة التلقائية الجديد.
انقر على علامة التبويب الرمز وأدخِل JavaScript في وضع الحماية في المحرِّر:
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.
يتم ضبط delimiter على قيمة تلقائية هي "," إذا كانت قيمة data.delimiter هي
لم يتم توفيره. من الممارسات الجيدة تعيين القيم الافتراضية للحقل إذا
فإن أحدهما منطقي. هذا يجعل من السهل على المستخدمين استخدام المتغير
قالب دقيق، حيث إنه لا يضطر إلى ملء كل حقل من أجل استخدام
المتغير.
انقر على حفظ لحفظ مستوى التقدّم. سيؤدي هذا الإجراء إلى تحميل أي أذونات تم رصدها.
في محرر النماذج.
تحتوي بعض واجهات برمجة تطبيقات النماذج على أذونات مرتبطة بها تحدد ما
يمكنه فعله أو لا يمكنه فعله. عند استخدام واجهة برمجة تطبيقات نموذجية مثل sendPixel في
الرمز، ستعرض أداة "إدارة العلامات من Google" الأذونات ذات الصلة في الأذونات
.
في علامة التبويب معاينة النموذج، أضِف بعض القيم "للقيم". إدخال، انقر
يمكنك تشغيل الرمز والاطّلاع على وحدة التحكّم للاطّلاع على ناتج المتغيّر.
في حال حدوث أي أخطاء، ستظهر في نافذة وحدة التحكّم.
انقر على حفظ، ثم أغلِق "محرِّر النماذج".
من المفترض أن يكون نموذج المتغيّر جاهزًا للاستخدام الآن.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\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."]]
