Starting a new project?
получить консультацию
Оставьте свои контактные данные, наш менеджер перезвонит вам.
Спасибо! Скоро с Вами свяжется наш менеджер.
Спасибо! Скоро с Вами свяжется наш менеджер.
| 1. document.querySelectorAll() |
| 2. JSON.parse() |
| 3 .split() and decodeURIComponent() |
| 4. Извлечь цену со страницы |
| 5. Вернуть X или Y |
| Вывод |
Статья - перевод публикации analyticsmania.com
Даже если ты проскиллованый пользователь GTM, всегда есть что-то, чего не знаешь, а искать ответы при большой загрузке долго и нервирует.
Такие понятия как JavaScript, объектная модель документа (DOM) и т. п. – сложные темы, их не объяснишь в одной статье. Все же, хочу дать несколько готовых к применению советов, которые сэкономят время в работе с GTM. Надеюсь они и вам помогут. Поехали.
Допустим, нужно отслеживать клики по конкретным элементам на странице (пунктам меню). У этих ссылок нет идентификаторов, поэтому есть два варианта:
Тогда создаем селектор, работающий со всеми необходимыми элементами. Возникает 2 вопроса:
Решение: введите document.querySelectorAll(). Этот метод покажет список всех элементов, отвечающих вашему селектору CSS. Если он возвращает слишком много элементов, значит нужно сделать свой селектор более конкретным.
Опробовать это можно в JS консоли разработчика вашего браузера. Введем туда такую команду:
Рис. 1 – Команда для показа элементов, соответствующих селектору
Замените текст your_css_selector на имя вашего селектора. В моем случае это .site-nav__link.
Жмем Enter и видим список всех элементов на странице, которые используют этот класс. В приведенном ниже примере 5 элементов. Это можно сказать по номеру рядом с NodeList, и если я щелкну треугольник рядом с ним, увижу список всех элементов HTML, которые используют этот CSS-класс site-nav__link).
Рис. 2 – NodeList
Если бы метод вернул больше элементов, мне пришлось бы сделать свой селектор более точным.
Иногда на уровне данных могут быть преобразования данных. Но они хранятся как строка, а не как объект (мы знаем, что это строка, потому что она стоит в кавычках).
Что делать, если хотите получить доступ только к определенному ключу из этой строки, например form_id? Использовать строковые методы и анализировать текст долго и не нужно.
Если есть объект (читай: сложная структура), хранящийся в виде строки (читай: простой текст), есть удобный метод JSON.parse(). Он берет эту строку и возвращает проанализированный объект. Это позволяет быстро получить необходимый ключ от объекта.
Например, предположим, что отслеживаете отправку форм, и это те данные, что у вас есть на Thank-you-page на уровне данных:
Рис. 3 – Код вызова API для отправки формы
Решить эту проблему можно созданием переменной уровня данных, которая возвращает строку. Я назвал эту переменную dlv — formData.
Рис. 4 – Переменная уровня данных
Потом создайте пользовательскую переменную JavaScript (ПП), которая будет передавать переменную уровня данных методу JSON.parse().
Рис. 5 – Код ПП
Важно: имя переменной уровня данных в коде должно быть ТОЧНО таким же, как вы назвали переменную уровня данных в интерфейсе GTM.
Если я сохраню все эти изменения, затем включу режим предварительного просмотра, а потом снова отправлю форму, увижу, что переменная уровня данных возвращает объект в виде строки (заключенной в кавычки).
Рис. 6 – Возвращенная строка
Но потом ПП парсит переменную уровня данных и возвращает объект (уже не в кавычках).
Рис. 7 – Возвращенный объект
А как получить доступ к определенному ключу в этом объекте, например form_id? Нужно обновить ПП JS следующим образом:
Рис. 8 – Код доступа к form_id
Я добавил .form_id, потому что именно так получаем доступ к ключам в объекте. Если бы я хотел получить доступ к form_name, код переменной был бы таким:
Рис. 9 – Код доступа к form_name
То есть, в конце приписываете имя того ключа, к которому хотите получить доступ.
Допустим, я хочу извлечь часть 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, но в этом руководстве я объясню этот.
Одним из способов извлечения части текста (строки) является использование метода split(). Указываем ему знак для деления, а затем он возвращает массив со всеми строками.
В консоли разработчика браузера введите команду:
Рис. 10 – Метод split()
window.location.href возвращает полный урл, который вы видите в адресной строке браузера.
.split (‘/’) значит, что этот URL будет разбит на несколько строк (текстов) каждый раз, когда будет обнаружена косая черта (/). В этом случае метод вернет массив из 6 элементов:
Рис. 11 – Возвращенный массив строк после разбиения
Теперь я хочу получить доступ к 5-му элементу данного массива, this-is-a-very-cool-%26-important-page. В JavaScript индексирование начинается с 0, поэтому индекс 5-го элемента равен 4.
Если я хочу получить доступ к нему, я должен вставить в код [4].
Обновим наш JS-код:
Рис. 12 – Код для извлечения 5 элемента
Он разделит URL-адрес и вернет 5-й элемент в массиве, а на выходе получим this-is-a-very-cool-%26-important-page.
Что насчет %26? Это закодированный амперсанд (&). Если хотите, чтобы это отображалось как & вместо %26, нужно будет применить метод decodeURIComponent().
Обновим код JS еще раз:
Рис. 13 – Код извлечения 5-го элемента с преобразованием URL
Теперь он this-is-a-very-cool-&-important-page.
Рис. 14 – Результат работы метода
Если вы хотите использовать этот код в Менеджере тегов в качестве переменной, создайте ПП с таким кодом (мы уже создали большую часть этого):
Рис. 15 – Код для GTM
И теперь его можно применять в любом нужном вам теге.
Допустим, вы отслеживаете конверсии и видите цену, отображаемую на странице Подтверждение заказа. Как использовать это в своих тегах? Одним из способов может быть извлечение с помощью пользовательской переменной.
Хотя это не рекомендуется (работа с уровнем данных надежнее), в некоторых случаях может не быть другого варианта.
Метод извлечения цены зависит от того, как она отображается на странице. Это 12,000.00 долларов США? А может быть 12 долларов? А может еще что-то? Окончательный код зависит от того, как показывается цена (все варианты описаны в этом посте).
Последний совет этой статьи связан с применением нескольких переменных. Допустим, после успешной оплаты, пользователя перебрасывает на другую страницу, чтобы подтвердить заказ. URL-адрес выглядит так: https://www.mysite.com/thanks/?order_id=123abc.
Например, вы хотите отправить этот идентификатор в Google Рекламу. Можно сказать: создайте переменную URL и используйте ее в теге. Это правильно.
Но что, если ваш сайт запрограммирован по-другому? На некоторых страницах подтверждения заказа идентификатор находится в URL-адресе, но на других этот идентификатор находится на уровне данных.
В результате у вас останется две переменные: переменная URL и переменная уровня данных. Обе могут содержать одинаковую информацию, но в основном на странице подтверждения будет доступна та или другая.
Как указать Диспетчеру тегов использовать ту или другую переменную? Ответ — ПП JavaScript. Код довольно простой:
Рис. 16 – Код выбора используемой переменной
|| означает ИЛИ. Таким образом вы инструктируете ПП возвращать первую доступную переменную. Если она не определена (читать: недоступна), метод попытается вернуть вторую переменную. Если она также недоступна, переменная вернет значение undefined.
Если будете пробовать сами, замените {{переменную 1}} и {{переменную 2}} на актуальные имена ваших переменных.
Рис. 17 – Код с нашими переменными
Вот так будет выглядеть код в нашем случае.
Надеюсь, хотя бы некоторые из этих быстрых советов научили вас чему-то новому. Из них самый популярный метод в моем стеке – document.querySelectorAll(). Им я постоянно проверяю, не возвращают ли мои условия нежелательные элементы.
А чем пользуетесь вы? Поделитесь в комментариях!
Напоминаю, в моем Телеграм-канале самая новая инфа по контекстной рекламе, SEO, ASO, аналитике и digital marketing.
Вы уже подписаны на нашу рассылку!
Подтвердите свой Email для завершения подписки.
Спасибо! Скоро с Вами свяжется наш менеджер.