Как создать пользовательскую переменную
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
В этом руководстве рассказывается, как создать шаблон пользовательской переменной, которая преобразовывает массив значений в строку, разделенную запятыми.
Чтобы создать свой первый шаблон переменной, выберите пункт "Шаблоны" в меню навигации слева и нажмите кнопку Создать в разделе Шаблоны переменных.
На вкладке Информация задайте название и описание переменной.
Название переменной будет видно пользователям, добавляющим ее через интерфейс Менеджера тегов.
Описание переменной позволяет пояснить, для чего она используется. Оно может содержать не более 200 символов.
Нажмите Обновить и проверьте шаблон.
Справа от поля ввода находится окно для предварительного просмотра шаблона.
Кнопка Обновить появляется в этом окне после каждого изменения, сделанного в редакторе. Чтобы посмотреть, как изменился тег, нажмите эту кнопку.
Нажмите на вкладку Поля, чтобы добавить поля в шаблон переменной.
На вкладке Поля можно создавать и изменять поля, которые будут включены в шаблон переменной. Это позволяет сохранять произвольную информацию, например идентификаторы аккаунтов. Вы можете использовать стандартные элементы формы, например текстовые поля, раскрывающиеся меню, переключатели и флажки.
Нажмите Добавить поле и выберите вариант Простая таблица. Замените название по умолчанию (например, simpleTable1) на list. Нажмите кнопку Обновить в окне предварительного просмотра.
Аналогичным образом создайте следующие поля: текстовое поле с названием array, два флажка с названиями use_array и sort, а также текстовое поле с названием delimiter.
Для поля 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 не задано другое значение. Значения по умолчанию рекомендуется задавать в случаях, когда это имеет практический смысл: например, избавляет пользователей от необходимости заполнять все поля, работая с шаблоном переменной.
Нажмите Сохранить. Все обнаруженные разрешения будут загружены в Редактор шаблонов.
С некоторыми API пользовательских шаблонов связаны разрешения, определяющие допустимость тех или иных действий. Когда вы добавляете API шаблона, например sendPixel, соответствующие разрешения отображаются на вкладке Разрешения в Менеджере тегов.
На вкладке Предварительный просмотр шаблона добавьте значения в текстовые поля, где это необходимо, нажмите кнопку Выполнить код и проверьте результирующее значение переменной в окне Консоль.
Если возникнут ошибки, они будут указаны в окне Консоль.
Нажмите Сохранить и закройте Редактор шаблонов.
Шаблон переменной готов к использованию.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-10-27 UTC.
[null,null,["Последнее обновление: 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."]]