Benutzerdefinierte Variable erstellen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
In diesem Leitfaden erfahren Sie, wie Sie eine Vorlage für benutzerdefinierte Variablen erstellen. Wann?
verwendet sie diese Variable, nimmt sie ein Array von Werten und gibt sie
String mit kommagetrennten Werten.
Um mit Ihrer ersten Variablenvorlage zu beginnen, klicken Sie links auf „Vorlagen“
und klicken Sie unter Variablenvorlagen auf Neu.
.
Legen Sie auf dem Tab Info den Namen und die Beschreibung der Variable fest.
Der Name ist der Name, den die Nutzer sehen, wenn sie diese implementieren
auf der gesamten Benutzeroberfläche von Tag Manager.
Eine Beschreibung ist genau das, wonach es sich anhört: eine kurze (200 Zeichen oder
eine Beschreibung der Funktion dieser Variable.
Klicken Sie auf Aktualisieren, um eine Vorschau der Vorlage zu sehen.
Rechts neben den Feldeingaben befindet sich das Fenster Vorlagenvorschau.
Jedes Mal, wenn im Editor eine Änderung vorgenommen wird, wird die Schaltfläche Aktualisieren angezeigt. Klicken Sie auf Aktualisieren, um zu sehen, wie sich Ihre Änderungen auf das Erscheinungsbild
.
Klicken Sie auf Felder, um Ihrer Variablenvorlage Felder hinzuzufügen.
Auf dem Tab Felder des Vorlageneditors können Sie Felder in der
Variablenvorlage. Felder werden verwendet, um benutzerdefinierte Daten einzugeben, z. B. ein Konto.
ID. Sie können Standardformularelemente wie Textfelder, Dropdown-Menüs
Optionsfeldern und Kontrollkästchen.
Klicken Sie auf Feld hinzufügen und wählen Sie Einfache Tabelle aus. Ersetzen Sie den Standardnamen (z.B.
"simpleTable1") durch "list" Klicken Sie in der Vorlagenvorschau auf Aktualisieren.
Wiederholen Sie diesen Schritt für eine Text Input und nennen Sie sie "array", zwei Checkboxes.
namens use_array und "sort" sowie eine Texteingabe namens "delimiter".
Legen Sie für "delimiter" den Standardwert "," fest. indem Sie auf das Zahnradsymbol
aktivieren Sie Standardwert und geben
Eingabefeld.
Klicken Sie auf den Tab Code und geben Sie den JavaScript-Code für die Sandbox in den Editor ein:
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 || ',');
Der Code für diese Variable ist recht einfach,
erwähnenswert ist.
data-Felder.
Es gibt einige Felder, auf die über das globale data-Objekt zugegriffen wird.
data enthält die Werte, die Sie im vorherigen Schritt festgelegt haben.
Deshalb können wir auf data.use_array, data.sort,
data.list und data.delimiter.
delimiter ist auf den Standardwert "," gesetzt, wenn data.delimiter Folgendes ist:
nicht angegeben. Es empfiehlt sich, Standardwerte für ein Feld festzulegen, wenn
macht Sinn. Dies erleichtert den Nutzenden die Verwendung der Variablen
da nicht jedes Feld ausgefüllt werden muss,
die Variable.
Klicken Sie auf Speichern, um Ihren Fortschritt zu speichern. Dadurch werden alle erkannten Berechtigungen geladen
in den Vorlageneditor.
Einige Vorlagen-APIs sind mit Berechtigungen verknüpft, die festlegen,
was sie tun können oder nicht. Wenn Sie eine Vorlagen-API wie sendPixel in
Ihren Code ein, werden die entsprechenden Berechtigungen in Tag Manager unter Berechtigungen angezeigt.
.
Fügen Sie auf dem Tab Vorlagenvorschau einige Werte für die Werte Eingabe, Klick
Führen Sie Code aus und sehen Sie sich in der Console die Ausgabe für Ihre Variable an.
Etwaige Fehler werden im Fenster Konsole angezeigt.
Klicken Sie auf Save (Speichern) und schließen Sie den Vorlageneditor.
Die Variablenvorlage sollte jetzt einsatzbereit sein.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-25 (UTC).
[null,null,["Zuletzt aktualisiert: 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."]]
