Типы данных в Google Tag Manager

08 июля, 2022

Google Tag Manager - это инструмент, cозданный Google для управления различными HTML и JavaScript-тегами в удобном, интуитивно понятном интерфейсе. А поскольку большинство языков программирования содержат встроенные типы данных, то и диспетчер тегов Google поддерживает их. В этой статье разберем основные типы данных, которые вам неоднократно будет встречаться в процессе использования GTM.

Содержание

Типы данных

В JavaScript есть 8 основных типов:

number (число);
bigint (целое число произвольной длины);
string (строка);
boolean (булев, логический тип)
null (неизвестный, пустой тип);
undefined (не было присвоено значение);
object (объект);
symbol (символ);

Все вышеперечисленные типы, кроме object, называются примитивами. Примитив – это данные, которые не являются объектом и не имеют методов. Все типы данных в JavaScript, кроме объектов, являются иммутабельными (значения не могут быть модифицированы, а только перезаписаны новым полным значением). Существует еще девятый тип данных - function (функция), специальный случай, упрощающий определение типа для функций несмотря на то, что все функции конструктивно унаследованы от object.

JavaScript является динамически типизированным языком. Это означает, что вам не нужно определять тип переменной заранее. Он определится автоматически во время выполнения программы. Также это означает, что одну и ту же переменную можно использовать для хранения данных различных типов. Например, в один момент переменная может принять строковое значение, а в другой – числовое:

// Не будет ошибкой
var variable = "привет";
variable = 123456;

// Не будет ошибкой

var variable = "привет";

variable = 123456;

С каждым из этих типов данных вы можете встретиться при работе с Google Tag Manager. Например, в режиме предварительного просмотра на вкладке Variables (Переменные) отображается список ваших переменных с определенными значениями для каждого события и типами данных:

Return Type в режиме отладки

Рассмотрим типы данных подробнее.

Примечание: все нижеописанные примеры вы можете легко воспроизвести в своем браузере в консоли разработчика (клавиша F12 для Google Chrome) на вкладке Console (Консоль).

Консоль разработчика

number (число)

Тип данных number (число) представляется в формате 64-битного числа двойной точности с плавающей запятой.

Числа в JavaScript могут иметь две формы:

целые числа, например, 19. Мы можем использовать как положительные, так и отрицательные числа. Диапазон используемых чисел: от -2⁵³ до 2⁵³
дробные числа (числа с плавающей точкой), например, 5.6675. Опять же можно использовать как положительные, так и отрицательные числа. Для чисел с плавающей точкой используется тот же диапазон: от -2⁵³ до 2⁵³

В качестве разделителя между целой и дробной частями, как и во многих языках программирования, в JavaScript используется точка:

var n = 19;
n = 22.521;

1 2	var n = 19; n = 22.521;

Как правило, переменные с таким типом хранят в себе количественную информацию. Например: данные о стоимости товара, доставке, налоге, количестве товара, об итоговой сумме покупки и т.д. В Google Tag Manager переменные с числовым типом данных в режиме отладки подсвечиваются зеленым цветом:

Числа подсвечиваются зеленым цветом

Кроме обычных чисел, существуют так называемые специальные числовые значения, которые относятся к типу number: +Infinity (положительная бесконечность), -Infinity (отрицательная бесконечность) и NaN (Not-A-Number, не число).

Infinity представляет собой математическую бесконечность ∞. Получить его можно в результате деления на ноль:

1 / 0; // Infinity

1	1 / 0; // Infinity

Или задать явно:

var n = Infinity;
n = Infinity;

1 2	var n = Infinity; n = Infinity;

Ноль в JavaScript имеет два представления: -0 и +0. (0 это синоним +0). На практике это имеет малозаметный эффект. Например, выражение +0 === -0 является истинным. Чтобы получить -∞ (-Infinity), достаточно число разделить на -0, а чтобы получить +∞ (Infinity), необходимо число разделить на +0:

2 / +0; // Infinity
2 / -0; // -Infinity

1 2	2 / +0; // Infinity 2 / -0; // -Infinity

NaN означает вычислительную ошибку. Чаще всего, это результат неправильной математической операции, проделываемой между двумя разными типами данных. Например, деление переменной со строковым значением на числовое является ошибкой:

"привет" / 2; // NaN
true * 5; // NaN

1 2	"привет" / 2; // NaN true * 5; // NaN

Если где-то в математическом выражении есть NaN, то результатом вычислений с его участием будет NaN.

Существует множество операций для чисел, например, умножение *, деление /, сложение +, вычитание - и так далее. А также оператор typeof, который позволяет возвращать тип аргумента. Их мы рассмотрим чуть позже.

BigInt (целое число произвольной длины)

BigInt числа дают возможность работать с целыми числами произвольной длины, когда необходимо выйти за пределы 2⁵³ или -2⁵³.

Чтобы создать значение типа BigInt, необходимо добавить n в конец числового литерала или вызвать функцию BigInt, которая создаст число типа BigInt из переданного аргумента. Аргументом может быть число, строка и другие типы:

// символ "n" в конце означает, что это BigInt
const bigInt1 = 1234567890123456789012345678901234567890n;
const bigInt2 = BigInt("1234567890123456789012345678901234567890");

// символ "n" в конце означает, что это BigInt

const bigInt1 = 1234567890123456789012345678901234567890n;

const bigInt2 = BigInt("1234567890123456789012345678901234567890");

Google Tag Manager не поддерживает этот тип данных, поскольку использует изолированный JavaScript.

string (строка)

Любые текстовые данные в JavaScript являются строками (string). И вся текстовая информация должна быть заключена в кавычки:

var variant1 = "привет";
variant2 = 'Как дела?';
variant3 = `У меня все хорошо ${variant1}`; // У меня все хорошо привет

var variant1 = "привет";

variant2 = 'Как дела?';

variant3 = `У меня все хорошо ${variant1}`; // У меня все хорошо привет

В JavaScript используется три типа кавычек:

Двойные кавычки: "Привет"
Одинарные кавычки: 'Привет'
Обратные кавычки: `Привет`

Двойные кавычки: "Привет"

Одинарные кавычки: 'Привет'

Обратные кавычки: `Привет`

Двойные или одинарные кавычки являются простыми, между ними нет разницы в JavaScript. Единственное ограничение - тип закрывающей кавычки должен быть тот же, что и тип открывающей, то есть либо обе двойные, либо обе одинарные.

Обратные кавычки появились в стандарте ECMAScript 6 (ES6). Они позволяют встраивать выражения в строку, заключая их в ${…} В примере выше переменная variant3 примет значение У меня все хорошо привет, поскольку мы в ${…} использовали переменную variant1, которая равна слову привет. Выражение внутри ${…} вычисляется, и его результат становится частью строки.

Строковые переменные чаще всего встречаются в Google Tag Manager. В режиме отладки они подсвечиваются красным цветом:

Строковые данные подсвечиваются красным цветом

Все спецсимволы начинаются с обратного слеша \

Если внутри строки встречаются кавычки, то мы их должны экранировать слешем. Например, у нас есть текст "Tag Manager – инструмент компании "Google"". Теперь экранируем кавычки:

var GTM1 = "Tag Manager – инструмент компании \"Google\"";
var GTM2 = "Tag Manager – инструмент компании \'Google\'"; // другой тип кавычек

1 2	var GTM1 = "Tag Manager – инструмент компании \"Google\""; var GTM2 = "Tag Manager – инструмент компании \'Google\'"; // другой тип кавычек

boolean (булев, логический тип)

Булевый тип (boolean) представляет логическую сущность и может принимать только два состояния: true (истина) и false (ложь).

Как правило, используется для хранения значений:

Да: true значит да, правильно;
Нет: false значит нет, не правильно.

В JavaScript boolean часто применяется для того, чтобы определить какие части кода выполнять (например, в операторах if) или повторять (например, циклы for). В Google Tag Manager логический тип используется в собственных переменных JavaScript и для запуска триггеров активации и блокировки. Например, можно выполнить проверку – зашел ли пользователь на сайт с мобильного устройства? Если да, то в переменную вернуть значение true. Если нет, то false.

Пример логического типа в Google Tag Manager

И далее уже выполнять различные команды в зависимости от полученного результата.

Булевые значения также могут быть результатом сравнений:

4 > 1 // true
100 == 101 // false
'56' > '52' // true

4 > 1 // true

100 == 101 // false

'56' > '52' // true

Подробную информацию о типах данных в JavaScript читайте на сайте javascript.ru и в официальной документации Mozilla.

null (неизвестный, пустой тип)

null (неизвестный, пустой тип) – это специальное значение, которое представляет собой ничего, пусто или значение неизвестно. Другими словами, переменная имеет некоторое неопределенное значение. Это не число, не строка, не логическое значение, но все-таки оно есть.

var city = null; // null

1	var city = null; // null

Если у вас есть переменная с типом null, и вам необходимо преобразовать ее в какое-нибудь другое значение, то это можно сделать с помощью Google Tag Manager и, например, пользовательской переменной типа Переменная JavaScript, выбрав в формате значения соответствующий параметр:

Настройки формата значений в переменных

undefined (значение не было присвоено)

Если переменная объявлена, но ей не присвоено никакого значения, то ее значением будет undefined.

Часто возникает путаница между null и undefined. Отличие заключается в том, что у переменной, которой присвоено значение null, есть некоторое неопределенное значение. А у undefined вообще нет никакого значения, мы только ее объявили.

var x; // undefined
var y = undefined; // undefined

1 2	var x; // undefined var y = undefined; // undefined

null, преимущественно, используется для присвоения переменной пустого или неизвестного значения, а undefined - для проверок, была ли переменная назначена.

undefined может появляться в некоторых переменных при настройке в Google Tag Manager, а также тогда, когда вы выполнили какое-нибудь действие и в режиме предварительного просмотра просматриваете значения полученных переменных.

Пример значения undefined

Режим отладки GTM показывает значения переменных, которые существовали на момент совершения события. Если вы видите undefined, скорее всего, переменна на момент совершения события еще не была присвоена. Это распространенное явление, поскольку в диспетчере тегов мы настраиваем большое количество различных переменных, а значения им могут присваиваться только в момент совершения конкретного действия. В остальное время переменные будут существовать (объявлены, активированы), но значения им присвоены не будут.

Аналогично и с порядком активации событий. Например, если вы видите, что данные помещаются в уровень данных (dataLayer) после фрагмента контейнера Google Tag Manager (Container Loaded, gtm.js), то они не будут доступны для триггеров Просмотр страницы (All Pages). В этом случае вы должны использовать триггер Модель DOM готова (DOM Ready, gtm.dom) или Окно загружено (Window Loaded, gtm.load).

Если у вас есть переменная с изначальном типом undefined, и вам необходимо преобразовать ее в какое-нибудь другое значение, то это можно сделать, например, с помощью пользовательской переменной типа Переменная JavaScript, выбрав в формате значения соответствующий параметр:

Преобразование undefined в другое значение у переменной JavaScript

object (объект)

object (объект) – особенный тип данных, поскольку может использоваться для хранения набора свойств и более сложных объектов, а не только простых, примитивных значений, которые содержат в себе только что-то одно (будь то строка или число, или что-то еще).

В JavaScript объекты (ассоциативные массивы) используются очень часто. Объект может быть создан:

var ecommerce = new Object(); // синтаксис "конструктор объекта"
var ecommerce = {}; // с помощью фигурных скобок {…}

1 2	var ecommerce = new Object(); // синтаксис "конструктор объекта" var ecommerce = {}; // с помощью фигурных скобок {…}

Вариант с фигурными скобками {…} еще называют литералом объекта или литеральной нотацией.

Свойство – это пара ключ:значение, где ключ – это строка или символ (также называемая именем свойства), а значение может быть любого типа данных. Свойства объекта также иногда называют полями объекта.

Например:

var google = {     // объект
founder1: "Larry",  // под ключом "founder1" хранится значение "Larry"
founder2: "Sergey",  // под ключом "founder2" хранится значение "Sergey"
age: 1998 // под ключом "age" хранится значение 1998
};

var google = { // объект

founder1: "Larry", // под ключом "founder1" хранится значение "Larry"

founder2: "Sergey", // под ключом "founder2" хранится значение "Sergey"

age: 1998 // под ключом "age" хранится значение 1998

};

В объекте google находятся три свойства:

Первое свойство с именем "founder1" и значением "Larry";
Второе свойство с именем "founder2" и значением "Sergey";
Третье свойство с именем "age" и значением 1998.

Имя свойства может состоять из нескольких слов, но тогда оно должно быть заключено в кавычки:

var google = {
founder1: "Larry",
founder2: "Sergey",
age: 1998,
"Number of employees": 114096 // Число сотрудников
};

var google = {

founder1: "Larry",

founder2: "Sergey",

age: 1998,

"Number of employees": 114096 // Число сотрудников

};

Последнее свойство объекта может заканчиваться запятой:

var google = {
founder1: "Larry",
founder2: "Sergey",
age: 1998,
"Number of employees": 114096,
};

var google = {

founder1: "Larry",

founder2: "Sergey",

age: 1998,

"Number of employees": 114096,

};

Это называется висячая запятая. Такой подход упрощает добавление, удаление и перемещение свойств, так как все строки объекта становятся одинаковыми.

Мы можем записать объект таким образом, что ключ будет иметь несколько значений. Например, вот так:

var google = {
founders: ["Larry", "Sergey"],
age: 1998,
"Number of employees": 114096,
};

var google = {

founders: ["Larry", "Sergey"],

age: 1998,

"Number of employees": 114096,

};

Получить значение свойства можно с помощью операторов точки . (так называемая точечная нотация, точечная запись) или квадратных скобок [] (так называемая скобочная нотация, скобочная запись) и кавычек (подойдет любой тип кавычек).

var google = {
founders: ["Larry", "Sergey"],
age: 1998,
"Number of employees": 114096,
};

google.founders // ["Larry", "Sergey"]
google["founders"] // ["Larry", "Sergey"]

var google = {

founders: ["Larry", "Sergey"],

age: 1998,

"Number of employees": 114096,

};

google.founders // ["Larry", "Sergey"]

google["founders"] // ["Larry", "Sergey"]

Для получения доступа к значению в массиве используются квадратные скобки, за которыми следует номер позиции. Чтобы получить значение "Sergey", нам необходимо написать так:

var google = {
founders: ["Larry", "Sergey"],
age: 1998,
"Number of employees": 114096,
};

google.founders[1] // "Sergey"
google["founders"][1] // "Sergey"

var google = {

founders: ["Larry", "Sergey"],

age: 1998,

"Number of employees": 114096,

};

google.founders[1] // "Sergey"

google["founders"][1] // "Sergey"

В квадратных скобках идет номер позиции [1], поскольку массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный 0, а индекс последнего элемента равен значению свойства массива length минус 1 (length-1).

Объекты можно помещать в другие объекты. Например:

var analytics = {
tool: "Google Analytics",
data: {
owner: "Google",
commercial: "Yes",
url: "analytics.google.com",
launched: "2005"
}
};

var analytics = {

tool: "Google Analytics",

data: {

owner: "Google",

commercial: "Yes",

url: "analytics.google.com",

launched: "2005"

}

};

Здесь объект data с 4 ключами (owner, commercial, url, launched) помещен в другой объект analytics. Получить значение свойства объекта внутри другого объекта можно также с помощью точечной нотации (оператора точки) или квадратных скобок.

var analytics = {
tool: "Google Analytics",
data: {
owner: "Google",
commercial: "Yes",
url: "analytics.google.com",
launched: "2005"
}
};

analytics.data.url // " analytics.google.com"
analytics["data"]["launched"] // " 2005"
analytics.tool // " Google Analytics"

var analytics = {

tool: "Google Analytics",

data: {

owner: "Google",

commercial: "Yes",

url: "analytics.google.com",

launched: "2005"

}

};

analytics.data.url // " analytics.google.com"

analytics["data"]["launched"] // " 2005"

analytics.tool // " Google Analytics"

Используя object, вы можете создать массив с данными для отслеживания различных событий электронной торговли или динамического ремаркетинга, например: просмотр товара, добавление/удаление товаров из корзины, покупка и т.д.

Пример объекта

В JavaScript есть другие типов объектов:

Array для хранения упорядоченных коллекций данных,
Date для хранения информации о дате и времени,
Error для хранения информации об ошибке.

Формально они не являются отдельными типами, а относятся к типу данных object. Они лишь расширяют его различными способами. Google Tag Manager также будет их корректно определять. Например, array:

Пример массива

symbol (символ)

Символ (symbol) – одно из нововведений в стандарте ECMAScript 6 (ES6), примитивный тип данных, представляющий собой неизменяемый, уникальный идентификатор. Символы создаются с помощью функции Symbol():

var mySymbol = Symbol();

1	var mySymbol = Symbol();

При создании символу можно дать описание (необязательный параметр), в основном использующееся для отладки кода:

var mySymbol = Symbol("Описание символа");

1	var mySymbol = Symbol("Описание символа");

Важной особенностью символа также является то, что его значение уникально. Вы можете использовать символ как имя свойства, которое гарантированно не будет повторяться с любым другим свойством. Даже, если у двух символов одинаковое имя, то это не значит, что они равны:

var mySymbol1 = Symbol("Описание символа");
var mySymbol2 = Symbol("Описание символа");
mySymbol1 == mySymbol2 // false

var mySymbol1 = Symbol("Описание символа");

var mySymbol2 = Symbol("Описание символа");

mySymbol1 == mySymbol2 // false

На примере выше два символа с одинаковым описанием, но они не равны. Символы в JavaScript используются для безопасного добавления нового функционала в программу, а также для защиты от совпадения имен с уже существующими объектами. Подробнее о данном типе данных вы можете прочитать в этой статье.

В Google Tag Manager я пока не встречал задач, связанных с использованием данного типа данных. Сам GTM в режиме предварительного просмотра определяет symbol как object:

Пример символа

Данный материал - отрывок из электронного руководства по Google Tag Manager (2020).

Метки: Google Tag Manager, JavaScript, типы данных

Типы данных в Google Tag Manager

Типы данных

number (число)

BigInt (целое число произвольной длины)

string (строка)

boolean (булев, логический тип)

null (неизвестный, пустой тип)

undefined (значение не было присвоено)

object (объект)

symbol (символ)

Получайте бесплатные уроки и фишки

Еще статьи