GTM Variable Builder – собственный код JavaScript за 1 клик

Ноябрь 24, 2019

Ранее я писал в своем блоге о плагинах и расширениях для Google Tag Manager, и как-то вскользь упомянул о GTM Variable Builder. На мой взгляд, данное расширение заслуживает отдельного материала. И вот почему.

Как часто вы хотели извлечь какую-либо информацию со своего сайта, но не могли этого сделать, поскольку незнакомы с элементами DOM и регулярными выражениями? Например, цену товара (но без знака валюты), его наименование, идентификатор транзакции, стоимость доставки? Или число найденных результатов на странице поиска? А может быть все переменные, которые необходимы для формирования уровня данных (dataLayer) динамического ремаркетинга или в электронной торговле?

Расширение для браузера GTM Variable Builder позволяет создавать пользовательские переменные типа Собственный код JavaScript и извлекать значения элементов сайта всего за 1 клик.

Чтобы скачать расширение, перейдите по ссылке и нажмите Установить

GTM Variable Builder

Расширение GTM Variable Builder

В правом верхнем углу появится иконка расширения. Далее следует перейти на сайт, открыть консоль разработчика (клавиша F12 в Google Chrome), выбрать вкладку Console.

Затем выделить нужный элемент на странице и нажать на иконку GTM Variable Builder.

GTM Variable Builder

Код для нашей переменной GTM

В консоли появится две строчки:

  • PASTE THIS INTO THE CONSOLE TO TEST – код для проверки нашей переменной;
  • FOR USE IN A GTM CUSTOM JAVASCRIPT VARIABLE – код, который нужно скопировать и вставить в Google Tag Manager в переменную типа Собственный код JavaScript.

Чтобы проверить код переменной, скопируйте первую строчку, вставьте ее в консоль и нажмите Enter:

GTM Variable Builder

Проверка кода в консоли

Должен вернуться тот же результат. Если это так, копируйте вторую строчку с function () { и вставьте данный код в переменную GTM. Это будет выглядеть так:

GTM Variable Builder

Переменная типа «Собственный код JavaScript»

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

GTM Variable Builder

Значение нашей переменной

Все работает. Благодаря GTM Variable Builder мы получили значение переменной без валюты (значка р.), которое автоматически создало код с регулярным выражением для нашей переменной.

На других страницах переменная будет принимать значение соответствующего товара:

GTM Variable Builder

Корректное значение переменной и на других страницах

Расширение GTM Variable Builder очень сильно упрощают работу интернет-маркетологам с GTM при составлении собственных переменных, особенно тем, кто имеет ограниченные знания в JavaScript.

P.S. Автор данного расширения записал коротенькое видео по его использованию

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

По контекстной, таргетированной рекламе и аналитике