Tworzenie zmiennej niestandardowej
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Z tego przewodnika dowiesz się, jak utworzyć szablon zmiennej niestandardowej. Kiedy
będzie używana ta zmienna, pobierze tablicę wartości i zwróci je jako
rozdzielany przecinkami.
Aby rozpocząć tworzenie pierwszego szablonu zmiennej, kliknij po lewej stronie Szablony.
i kliknij przycisk Nowy w sekcji Szablony zmiennych.
.
Na karcie Informacje określ Nazwę i Opis zmiennej.
Nazwa to element, który zostanie przedstawiony użytkownikom przy wdrażaniu tej funkcji.
w interfejsie Menedżera tagów.
Opis musi być krótki (200 znaków lub
mniej szczegółów) wraz z opisem działania tej zmiennej.
Kliknij Odśwież, aby wyświetlić podgląd szablonu.
Po prawej stronie danych wejściowych w polach znajduje się okno Podgląd szablonu.
Po każdej zmianie wprowadzonej w edytorze przycisk Odśwież będzie
. Kliknij Odśwież, aby sprawdzić, jak zmiany wpłyną na wygląd
.
Aby dodać pola do szablonu zmiennych, kliknij Pola.
Karta Pola edytora szablonów umożliwia tworzenie i edytowanie pól w
szablonu zmiennej. Pola służą do wprowadzania danych niestandardowych, np. konta
ID. Możesz dodać standardowe elementy formularza, takie jak pola tekstowe,
menu, przyciski i pola wyboru.
Kliknij kolejno Dodaj pole i Prosta tabela. Zastąp nazwę domyślną (np.
"simpleTable1") z "listą". W sekcji Podgląd szablonu kliknij Odśwież.
Powtórz ten krok w przypadku opcji Dane wejściowe i nazwij ją „tablica” oraz dwa pola wyboru.
o nazwie „use_array”. i „sort”, a także w polu tekstowym o nazwie „separator”.
W polu „separator” nadaj mu wartość domyślną „,”. kliknij ikonę koła zębatego
włącz opcję „Wartość domyślna”, a następnie wpisz nową wartość domyślną.
pola do wprowadzania danych.
Kliknij kartę Kod i wpisz w edytorze JavaScript w piaskownicy:
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 || ',');
Kod tej zmiennej jest dość prosty, ale zawiera kilka
o których warto zwrócić uwagę.
data pól.
Do niektórych pól uzyskuje się dostęp poza globalną grupę data.
Pole data będzie zawierać wartości skonfigurowane w poprzednim kroku.
Dlatego mamy dostęp do usług data.use_array, data.sort,
data.list i data.delimiter.
delimiter ma domyślną wartość ",", jeśli data.delimiter ma wartość
nie podano. Warto ustawić wartości domyślne pola, jeśli
ma sens. Ułatwia to użytkownikom korzystanie ze zmiennej
szablonu, ponieważ nie muszą one wypełniać wszystkich pól,
tę zmienną.
Kliknij Zapisz, aby zapisać postępy. Spowoduje to wczytanie wszystkich wykrytych uprawnień.
w Edytorze szablonów.
Niektóre interfejsy API szablonów mają powiązane uprawnienia, które określają,
co mogą, a czego nie mogą zrobić. Jeśli używasz interfejsu API szablonów, takiego jak sendPixel
Twojego kodu, Menedżer tagów wyświetli odpowiednie uprawnienia w sekcji Uprawnienia.
.
Na karcie Podgląd szablonu dodaj wartości w polach „Wartości”. dane wejściowe, należy kliknąć
Uruchom kod i sprawdź w Konsoli dane wyjściowe zmiennej.
Jeśli wystąpią błędy, pojawią się one w oknie Konsola.
Kliknij Zapisz i zamknij Edytor szablonów.
Szablon zmiennej powinien być gotowy do użycia.
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-25 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-25 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."]]
