заказать звонок
+38 057 782-28-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
456
3

Статья - перевод публикации analyticsmania.com

Даже если ты проскиллованый пользователь GTM, всегда есть что-то, чего не знаешь, а искать ответы при большой загрузке долго и нервирует.

Такие понятия как JavaScript, объектная модель документа (DOM) и т. п. – сложные темы, их не объяснишь в одной статье. Все же, хочу дать несколько готовых к применению советов, которые сэкономят время в работе с GTM. Надеюсь они и вам помогут. Поехали.


1. document.querySelectorAll()

Допустим, нужно отслеживать клики по конкретным элементам на странице (пунктам меню). У этих ссылок нет идентификаторов, поэтому есть два варианта:

  • реализовать их через разработчика;
  • или использовать селекторы CSS.

Тогда создаем селектор, работающий со всеми необходимыми элементами. Возникает 2 вопроса:

  1. Как быть уверенным, что селектор правильный и будет работать только с теми элементами, которые хотите отслеживать?
  2. Как быть уверенным, что селектор CSS не вернет какой-либо несвязанный элемент (например, ссылки нижнего колонтитула или ссылки на боковой панели)?

Решение: введите document.querySelectorAll(). Этот метод покажет список всех элементов, отвечающих вашему селектору CSS. Если он возвращает слишком много элементов, значит нужно сделать свой селектор более конкретным.

Опробовать это можно в JS консоли разработчика вашего браузера. Введем туда такую команду:

GTM команда для показа элементов

Рис. 1 – Команда для показа элементов, соответствующих селектору

Замените текст your_css_selector на имя вашего селектора. В моем случае это .site-nav__link.

Жмем Enter и видим список всех элементов на странице, которые используют этот класс. В приведенном ниже примере 5 элементов. Это можно сказать по номеру рядом с NodeList, и если я щелкну треугольник рядом с ним, увижу список всех элементов HTML, которые используют этот CSS-класс site-nav__link).

GTM NodeList

Рис. 2 – NodeList

Если бы метод вернул больше элементов, мне пришлось бы сделать свой селектор более точным.


2. JSON.parse()

Иногда на уровне данных могут быть преобразования данных. Но они хранятся как строка, а не как объект (мы знаем, что это строка, потому что она стоит в кавычках).

Что делать, если хотите получить доступ только к определенному ключу из этой строки, например form_id? Использовать строковые методы и анализировать текст долго и не нужно.

Если есть объект (читай: сложная структура), хранящийся в виде строки (читай: простой текст), есть удобный метод JSON.parse(). Он берет эту строку и возвращает проанализированный объект. Это позволяет быстро получить необходимый ключ от объекта.

Например, предположим, что отслеживаете отправку форм, и это те данные, что у вас есть на Thank-you-page на уровне данных:

GTM Код вызова API для отправки формы

Рис. 3 – Код вызова API для отправки формы

Решить эту проблему можно созданием переменной уровня данных, которая возвращает строку. Я назвал эту переменную dlv — formData.

GTM Переменная уровня данных

Рис. 4 – Переменная уровня данных

Потом создайте пользовательскую переменную JavaScript (ПП), которая будет передавать переменную уровня данных методу JSON.parse().

GTM Код пользовательской переменной

Рис. 5 – Код ПП

Важно: имя переменной уровня данных в коде должно быть ТОЧНО таким же, как вы назвали переменную уровня данных в интерфейсе GTM.

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

GTM Возвращенная строка

Рис. 6 – Возвращенная строка

Но потом ПП парсит переменную уровня данных и возвращает объект (уже не в кавычках).

GTM Возвращенный объект

Рис. 7 – Возвращенный объект

А как получить доступ к определенному ключу в этом объекте, например form_id? Нужно обновить ПП JS следующим образом:

GTM Код доступа к form_id

Рис. 8 – Код доступа к form_id

Я добавил .form_id, потому что именно так получаем доступ к ключам в объекте. Если бы я хотел получить доступ к form_name, код переменной был бы таким:

GTM Код доступа к form_name

Рис. 9 – Код доступа к form_name

То есть, в конце приписываете имя того ключа, к которому хотите получить доступ.


3 .split() and decodeURIComponent()

Допустим, я хочу извлечь часть URL. URL-адрес выглядит так: https://www.analyticsmania.com/ google-tag-manager-recipes / this-is-a-very-cool-% 26-important-page /? Gtm_debug = x. А я хочу получить вот эту часть — this-is-a-very-cool-%26-important-page.

Здесь 2 проблемы:

  • нужно каким-то образом получить только эту часть URL;
  • эта часть содержит %26. Что это такое и как от этого избавиться?

Примечание: есть другие методы извлечения части URL, но в этом руководстве я объясню этот.

Одним из способов извлечения части текста (строки) является использование метода split(). Указываем ему знак для деления, а затем он возвращает массив со всеми строками.

В консоли разработчика браузера введите команду:

GTM Метод split()

Рис. 10 – Метод split()

window.location.href возвращает полный урл, который вы видите в адресной строке браузера.

.split (‘/’) значит, что этот URL будет разбит на несколько строк (текстов) каждый раз, когда будет обнаружена косая черта (/). В этом случае метод вернет массив из 6 элементов:

  • https:
  • [пустое место] – потому что в https:// было два последовательных слэша без какой-либо информации между ними;
  • www.analyticsmania.com;
  • google-tag-manager-recipes;
  • this-is-a-very-cool-% 26-important-page;
  • ? Gtm_debug = x.

GTM Возвращенный массив строк после разбиения

Рис. 11 – Возвращенный массив строк после разбиения

Теперь я хочу получить доступ к 5-му элементу данного массива, this-is-a-very-cool-%26-important-page. В JavaScript индексирование начинается с 0, поэтому индекс 5-го элемента равен 4.

Если я хочу получить доступ к нему, я должен вставить в код [4].

Обновим наш JS-код:

GTM Код для извлечения 5 элемента

Рис. 12 – Код для извлечения 5 элемента

Он разделит URL-адрес и вернет 5-й элемент в массиве, а на выходе получим this-is-a-very-cool-%26-important-page.

Что насчет %26? Это закодированный амперсанд (&). Если хотите, чтобы это отображалось как & вместо %26, нужно будет применить метод decodeURIComponent().

Обновим код JS еще раз:

GTM Код извлечения 5-го элемента с преобразованием URL

Рис. 13 – Код извлечения 5-го элемента с преобразованием URL

Теперь он this-is-a-very-cool-&-important-page.

GTM Результат работы метода

Рис. 14 – Результат работы метода

Если вы хотите использовать этот код в Менеджере тегов в качестве переменной, создайте ПП с таким кодом (мы уже создали большую часть этого):

GTM Код для GTM

Рис. 15 – Код для GTM

И теперь его можно применять в любом нужном вам теге.


4. Извлечь цену со страницы

Допустим, вы отслеживаете конверсии и видите цену, отображаемую на странице Подтверждение заказа. Как использовать это в своих тегах? Одним из способов может быть извлечение с помощью пользовательской переменной.

Хотя это не рекомендуется (работа с уровнем данных надежнее), в некоторых случаях может не быть другого варианта.

Метод извлечения цены зависит от того, как она отображается на странице. Это 12,000.00 долларов США? А может быть 12 долларов? А может еще что-то? Окончательный код зависит от того, как показывается цена (все варианты описаны в этом посте).


5. Вернуть X или Y

Последний совет этой статьи связан с применением нескольких переменных. Допустим, после успешной оплаты, пользователя перебрасывает на другую страницу, чтобы подтвердить заказ. URL-адрес выглядит так: https://www.mysite.com/thanks/?order_id=123abc.

Например, вы хотите отправить этот идентификатор в Google Рекламу. Можно сказать: создайте переменную URL и используйте ее в теге. Это правильно.

Но что, если ваш сайт запрограммирован по-другому? На некоторых страницах подтверждения заказа идентификатор находится в URL-адресе, но на других этот идентификатор находится на уровне данных.
В результате у вас останется две переменные: переменная URL и переменная уровня данных. Обе могут содержать одинаковую информацию, но в основном на странице подтверждения будет доступна та или другая.

Как указать Диспетчеру тегов использовать ту или другую переменную? Ответ — ПП JavaScript. Код довольно простой:

GTM Код выбора используемой переменной

Рис. 16 – Код выбора используемой переменной

|| означает ИЛИ. Таким образом вы инструктируете ПП возвращать первую доступную переменную. Если она не определена (читать: недоступна), метод попытается вернуть вторую переменную. Если она также недоступна, переменная вернет значение undefined.

Если будете пробовать сами, замените {{переменную 1}} и {{переменную 2}} на актуальные имена ваших переменных.

GTM Код выбора используемой переменной

Рис. 17 – Код с нашими переменными

Вот так будет выглядеть код в нашем случае.


Вывод

Надеюсь, хотя бы некоторые из этих быстрых советов научили вас чему-то новому. Из них самый популярный метод в моем стеке – document.querySelectorAll(). Им я постоянно проверяю, не возвращают ли мои условия нежелательные элементы.

А чем пользуетесь вы? Поделитесь в комментариях!

Напоминаю, в моем Телеграм-канале самая новая инфа по контекстной рекламе, SEO, ASO, аналитике и digital marketing.


Amazon Sponsored Brands Ads

Автоматическое применение рекомендаций в Google Ads

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.