Google Tag Manager для googлят: Руководство по управлению тегами

Universal Analytics, Пользовательский HTML и многие другие теги работают на основе JavaScript. Если они загружаются на странице, на которой отключена поддержка JavaScript, то теги не сработают.

В связи с этим разработчики Google предусмотрели возможность загрузки через тег </strong>. А он, в свою очередь, загружается частью контейнера <strong><noscript> </strong>и показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.</p><p>Именно для этих целей и нужна вторая часть кода контейнера Google Tag Manager, которую Google просит разместить после открывающего тега <strong><body></strong>:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_403.png"></img></div><p>Рис. 403. Фрагменты кода контейнера GTM</p><br/><p>Наиболее частое применение тега <strong>«Пользовательское изображение» </strong>в GTM – отслеживание посещений для пикселя Facebook. У этого типа тега всего две настройки:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_404.png"></img></div><p>Рис. 404. Настройки пользовательского изображения</p><br/><p>● <strong>URL изображения </strong>– поле, где содержится адрес изображения со всеми параметрами, которые нужно передать;</p><p>● <strong>Включить блокировку кэша (параметр gtmcb по умолчанию) </strong>– при включении обращения будут регистрироваться в том числе с браузеров с кэшированным изображением.</p><p>Знаете ли вы почему сайты загружаются так быстро? Одной из причин является <em>кэширование</em>. Первый раз, когда вы заходите на новый сайт, все статические элементы (шрифты, изображений, стили, скрипты и т.д.) загружаются во временную папку, которая будет хранить все эти файлы и в последующих заходах каждый раз показывать на соответствующих страницах. Периодически браузер проверяет, не обновились ли эти файлы на стороне сервера, и при необходимости загружает их заново.</p><p>С точки зрения пользователя – это удобно. Нет необходимости ждать очередной полной загрузки страницы. С точки зрения интернет-маркетологов и веб-аналитиков – это не очень хорошо, поскольку на странице данные не поменялись, файлы загрузились один раз во временную папку пользователя и больше отследить к ним обращения возможности нет.</p><p>Если отключить галочку параметра <strong>«Включить блокировку кэша»</strong>, то тег сработает только при первой загрузке сайта, так как изображение будет загружено во временное хранилище. А при включении опции Google Tag Manager добавит параметр gtmcb к URL изображения со случайным значением. Например, так:</p><p><strong>site.ru/image.jpeg?gtmcb=1713862799</strong></p><p>Поскольку значение в URL всегда разное, браузеру придется каждый раз скачивать изображение. А раз это будет происходить каждый раз, то мы сможем отслеживать это событие постоянно. Поэтому этот параметр лучше всегда держать включенным.</p><p>В категории тегов <strong>«Еще» </strong>содержатся шаблоны к сервисам, которые не так популярны у нас, но которые часто используются в мире. Это и <strong>comScore Unified Digital Measurement</strong>, и тег <strong>Adroll Smart Pixel</strong>, и <strong>Criteo One Tag</strong>, и <strong>Hotjar Tracking Code</strong>, и другие. Руководства по настройке какого-либо тега из этой категории вы найдете на сайте поставщика.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_405.png"></img></div><p>Рис. 405. Теги сторонних сервисов</p><br/><p>Обычно теги активируются при загрузке страницы или в ответ на какое-либо действие на ней. В Google Tag Manager вы устанавливаете триггеры, определяющие, когда должны активироваться теги. Например, триггер <strong>«Все страницы» </strong>будет запускать тег на всех страницах при загрузке сайта.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_406.png"></img></div><p>Рис. 406. Триггер активации – All Pages</p><br/><p>Для тегов можно задавать как триггеры активации, так и триггеры блокировки (исключения).</p></section><section><p>Отладчик</p><p>Режим отладки (он же режим предварительного просмотра) позволяет проверить корректность настроек тегов Google Tag Manager перед публикацией контейнера, выявить текущие проблемы на этапе тестирования и снизить риск их возникновения в будущем.</p><p>Режим предварительного просмотра в GTM еще называют режимом отладки. Проще говоря – это этап, на котором обнаруживают, локализуют и устраняют ошибки. Почему не активируется тег, не срабатывает событие, не определяется переменная? Ответить на эти и многие другие вопросы поможет именно отладка.</p><p>Предположим, что в своем контейнере вы настроили какие-то теги, добавили триггеры, переменные, и теперь хотите проверить корректность их выполнения. Чтобы включить режим предварительного просмотра, в интерфейсе Google Tag Manager нажмите на кнопку <strong>«Предварительный просмотр»</strong>.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_407.png"></img></div><p>Рис. 407. Предварительный просмотр</p><br/><p>Таким образом вы активируете режим предварительного просмотра и сверху в оранжевом прямоугольнике появится надпись:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_408.png"></img></div><p>Рис. 408. Предварительный просмотр активирован</p><br/><p>Доступны три функции:</p><p>● <strong>Обновить </strong>– если в процессе отладки, не выходя из режима, вы внесли изменения в тегах, триггерах или переменных, то после каждого такого изменения следует обновлять предварительный просмотр, иначе Google Tag Manager не увидит правок и будет показывать предыдущую версию контейнера;</p><p>● <strong>Выйти из режима предварительного просмотра </strong>– выход из режима отладки;</p><p>Перед выходом GTM переспросит у вас:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_409.png"></img></div><p>Рис. 409. Окно выхода</p><br/><p>● <strong>Поделиться ссылкой для просмотра </strong>– отправить доступ другим людям;</p><p>Режим предварительного просмотра доступен только в том браузере, в котором был включен этот режим. Но вы можете предоставить доступ другим пользователям. Для этого необходимо нажать на кнопку <strong>«Поделиться ссылкой для просмотра»</strong>. Далее вводите целевой URL, разрешаете отладку при просмотре (gtm_debug=x), копируете ссылку и отправляете ее другому пользователю.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_410.png"></img></div><p>Рис. 410. Поделиться ссылкой для просмотра</p><br/><p>Пользователь, в свою очередь, должен будет перейти по ссылке и кликнуть на целевой URL. После этого режим предварительного просмотра в его браузере будет активирован.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_411.png"></img></div><p>Рис. 411. Preview Container</p><br/><p>После активации предварительного просмотра в соседней вкладке откройте ваш сайт. В нижней части окна браузера появится консоль отладки с подробной информацией о запущенных тегах, порядке их активации и собираемых данных. Эту консоль будете видеть только вы – другим посетителям сайта она недоступна.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_412.png"></img></div><p>Рис. 412. Панель отладки</p><br/><p>Если после проделанных работ вы не увидели нижнюю консоль, то это может быть связано с тем, что:</p><p>● вы используете какие-либо блокировщики, например, AdBlock или AdGuard (хотя в некоторых случаях GTM корректно работает и с ними);</p><p>● ваш антивирус блокирует всплывающие окна;</p><p>● сам браузер настроен таким образом, что воспрепятствует появлению дополнительных окон.</p><p>Если ничего из вышеперечисленного не помогло, попробуйте зайти в режим отладки с другого браузера или компьютера.</p><p>Давайте разберем полностью всю навигацию консоли отладки.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_413.png"></img></div><p>Рис. 413. Интерфейс панели отладки</p><strong>1. Сводка, шкала временных событий</strong><p>В этом блоке отображаются все события в хронологическом порядке, которые зафиксировал Google Tag Manager. Как мы уже знаем, по умолчанию диспетчер тегов Google передает на уровень данных 3 события вне зависимости от того, настроили вы что-то еще или нет. Это <strong>gtm.js (Page View), gtm.dom (DOM Ready) </strong>и <strong>gtm.load (Window Loaded)</strong>. Цифра рядом с каждым событием означает порядок активации. В данном случае событие <strong>«Page View» (1) </strong>было зафиксировано раньше остальных.</p><p>При клике на любое событие из списка мы можем посмотреть дополнительную информацию о нем. Например, событие gtm.click:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_414.png"></img></div><p>Рис. 414. Дополнительная информация о событии gtm.click</p><br/><p>Если наверху выбрана вкладка <strong>«Tags (Теги)»</strong>, то мы можем увидеть какие теги были активированы по данному события, а какие нет.</p><p><strong>Tags Fired On This Page </strong>– теги, которые были активированы (цифра 3);</p><p><strong>Tags Not Fired On This Page </strong>– теги, которые не были активированы (цифра 4);</p><p>В данном примере ни один из тегов не был активирован.</p><p>Если выбрана вкладка <strong>«Variables (Переменные)»</strong>, то мы получаем подробные сведения о переменных в выбранном событии в тот момент, когда оно произошло. GTM будет передавать те значения переменных, которые были активированы в интерфейсе, даже если они не определены (undefined).</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_415.png"></img></div><p>Рис. 415. Сопоставление переменных</p><br/><p>На вкладке <strong>«Data Layer (Уровень данных)» </strong>отображается информация объекта в двух состояниях:</p><p>● в том виде, в каком она была передана в уровень данных в момент события;</p><p>● содержимое уровня данных после того, как произошло событие.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_416.png"></img></div><p>Рис. 416. Data Layer</p><br/><p>Верхний пункт <strong>«Summary» </strong>показывает общую информацию о работе всех тегов GTM, которые сработали на данной странице за все время работы независимо от времени их загрузки.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_417.png"></img></div><p>Рис. 417. Summary</p><br/><p>Если тег сработал несколько раз, то в Summary рядом с этим тегом будет изменено значение <strong>Fired .. time (s)</strong></p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_418.png"></img></div><p>Рис. 418. Количество совершенных событий Fired X time(s)</p><br/><p>В Summary информация по переменным недоступна, поскольку их значения меняются в зависимости от события.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_419.png"></img></div><p>Рис. 419. Please select a Data Layer message to view variable values</p><br/><p>Ее необходимо просматривать только тогда, когда вы выбираете конкретное событие.</p><p>В Summary на вкладке <strong>«Data Layer» </strong>выводится вся информацию по уровню данных в хронологическом порядке – события с номерами, та информация, которая была передана по событию и общая информация об уровне данных на текущий момент, <strong>Current values of the Data Layer </strong>(блок выделен зеленым):</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_420.png"></img></div><p>Рис. 420. Summary – Data Layer</p><br/><p>Если событий было зафиксировано большое количество, то с помощью кнопки <strong>«Show more» </strong>можно просмотреть предыдущий список событий.</p><p>Возвращаемся назад к временной шкале событий и на вкладку <strong>«Tags» </strong>(цифра 2).</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_421.png"></img></div><p>Рис. 421. Вкладка Tags</p><br/><p>Нажав на тег, можно просмотреть его свойства и значения, а также триггеры активации (<strong>Firing Triggers</strong>) и блокировки (<strong>Blocking Triggers</strong>).</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_422.png"></img></div><p>Рис. 422. Свойства и значения</p><br/><p>Триггер активации сработал и нет (отличия):</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_423.png"></img></div><p>Рис. 423. Триггер активации и триггер блокировки (отличия)</p><br/><p>Активация триггера может состоять из нескольких условий. В этом случае какие-то отдельные условия могут сработать, а какие-то нет:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_424.png"></img></div><p>Рис. 424. Несколько условий активации триггера</p><br/><p>При несоблюдении хотя бы одного условия триггер не сработает. В верхней части блока отладки на вкладке «Tags» есть настройка, которая называется <strong>Display Variables as</strong>.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_425.png"></img></div><p>Рис. 425. Настройка Display Variables as</p><br/><p>Она позволяет выбрать режим представления переменных: в виде имени (Names) или в виде значения (Values) переменной в момент активации.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_426.png"></img></div><p>Рис. 426. Различия в отображении</p><br/><p>На примере выше условия активации триггера изменились с <strong>Click Element, Page URL </strong>и <strong>_event </strong>(названия переменных) на значения переменных в момент активации.</p><p>Как мы уже знаем, для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Она можно использоваться внутри обработчика того или иного события. Если event отсутствует или не задано, то в режиме отладки мы увидим слово <strong>«Message» </strong>и надпись:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_427.png"></img></div><p>Рис. 427. «Message»</p><br/><p>Если мы передаем через уровень данных пользовательское событие, то имя этого события выводится на временной шкале. Например, клик по кнопке зафиксировал пользовательское событие <strong>«Яша Осипенков»</strong>.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_428.png"></img></div><p>Рис. 428. Событие с собственным именем</p><br/><p>Название может быть, как на кириллице, так и на латинице. Однако устоявшимся традиционным написанием пользовательских событий все же является латинский алфавит. А информация на уровне данных выглядит следующим образом:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_429.png"></img></div><p>Рис. 429. Data Layer</p><strong>5. QUICK_PREVIEW</strong><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_430.png"></img></div><p>Рис. 430. Предварительный просмотр</p><br/><p>Эта надпись свидетельствует о том, что в данный момент мы находимся в режиме предварительного просмотра (отладки) контейнера Google Tag Manager.</p><strong>6. Код контейнера</strong><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_431.png"></img></div><p>Рис. 431. Код контейнера</p><br/><p>Идентификатор контейнера GTM.</p><strong>7. Сворачивание панели отладки</strong><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_432.png"></img></div><p>Рис. 432. Сворачивание панели отладки</p><br/><p>Иногда панель отладки Google Tag Manager загораживает нижнюю часть экрана. В этом случае мы на некоторое время можем свернуть его для внесение каких-либо правок с помощью данной опции.</p><p>В свернутом состоянии панель отладки выглядит так:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_433.png"></img></div><p>Рис. 433. Панель отладки в свернутом состоянии</p><br/><p>При клике на элемент вернется исходное состояние GTM. Помимо этого, управлять высотой панели можно с помощью ее перетягивания левой кнопкой мыши вверх-вниз.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_434.png"></img></div><p>Рис. 434. Изменение высоты панели</p><br/><p>После того, как вы проверили корректность всех настроек в режиме отладки и внесли соответствующие изменения, их можно опубликовать. Для этого необходимо нажать на кнопку <strong>«Отправить» </strong>в правом верхнем углу интерфейса Google Tag Manager.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_435.png"></img></div><p>Рис. 435. Отправить на публикацию</p><br/><p>Указав название версии или создав новую, а также выбрав среду, опубликуйте контейнер.</p><p><strong>Рекомендации: </strong>если вы проверяете корректность срабатывания событий Google Analytics, то используйте для этого группу отчетов «В режиме реального времени».</p></section></section><section><p>Глава 3. Google Tag Manager на примерах</p><section><p>В первую версию книги <strong>«Google Tag Manager для googлят» </strong>попали самые распространенные примеры настроек GTM. Если вы нашли ошибку или хотите дополнить этот раздел собственной публикацией, присылайте материал мне на почту ya.osipenkov@icloud.com</p><p>Данная глава подготовлена командой GaSend.com.</p></section><section><p>Прослушивание кликов в GTM</p><p>Используя отладчик (режим отладки) GTM, можно определить те переменные, с помощью которых будет осуществляться отслеживание действий пользователей на сайте.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_436.png"></img></div><p>Рис. 436. Режим отладки – gtm.click</p><br/><p>Очень часто такие события как клик по ссылке (<strong>gtm.linkClick</strong>), клик по кнопке (<strong>gtm.click</strong>) и отправка формы (<strong>gtm.formSubmit</strong>) не фиксируются в режиме отладки.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_437.png"></img></div><p>Рис. 437. События в режиме отладки</p><br/><p>Как видно из скриншота, Google Tag Manager не зафиксировал ни одного из выше перечисленных событий. Для того чтобы события начали фиксироваться, необходимо создать три дополнительных триггера:</p><p>1. Начнем с настройки триггера для прослушивания кликов (<strong>gtm.click</strong>), который будет фиксировать события, связанные с кликами на странице.</p><p>Для этого создаем новый триггер и называем его <strong>«Все клики»</strong>.</p><p>● Тип триггера – <strong>«Клик – Все элементы»;</strong></p><p>● Триггер активации – <strong>«Все клики».</strong></p><p>Сохраняем триггер.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_438.png"></img></div><p>Рис. 438. Создание триггера типа «Все клики»</p><br/><p>1. Триггер для прослушивания кликов по ссылкам (<strong>gtm.linkClick</strong>). Называем его <strong>«Все клики по ссылкам»</strong>.</p><p>● Тип триггера – <strong>«Клик – Только ссылки»</strong>;</p><p>● Триггер: активации – <strong>«Все клики по ссылкам»</strong>.</p><p>Сохраняем триггер.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_439.png"></img></div><p>Рис. 439. Создание триггера типа «Клик – Только ссылки»</p><br/><p>2. Создаем триггер для прослушивания отправок форм (<strong>gtm.formSubmit</strong>). Называем его <strong>«Отправка всех форм»</strong>.</p><p>● Тип триггера – <strong>«Отправка формы»</strong>;</p><p>● Триггер активации – <strong>«Все формы»</strong>.</p><p>Сохраняем триггер.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_440.png"></img></div><p>Рис. 440. Создание триггера типа «Отправка формы»</p><br/><p>После настройки триггеров переходим в режим отладки. И видим, что теперь нам доступны наши события <strong>gtm.click, gtm.linkClick, gtm.formSubmit</strong>.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_441.png"></img></div><p>Рис. 441. События gtm.click, gtm.linkClick, gtm.formSubmit</p><br/><p>С этого момента мы можем настраивать отслеживание нужных нам событий, привязываясь к соответствующим значениям переменных.</p></section><section><p>Отслеживание кликов с помощью GTM</p><p>Рассмотрим настройки на примере клика по кнопке <strong>«Обратный звонок»</strong>.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_442.png"></img></div><p>Рис. 442. Отслеживание кнопки «Обратный звонок»</p><br/><p>Последовательность действий:</p><p>1. Настраиваем прослушивание кликов;</p><p>2. Переходим в пункт меню <strong>«Переменные»</strong>, нажимаем на кнопку <strong>«Настроить» </strong>и активируем соответствующие переменные:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_443.png"></img></div><p>Рис. 443. Активация встроенных переменных типа «Клики»</p><br/><p>3. Активируем режим предварительного просмотра:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_444.png"></img></div><p>Рис. 444. Активация режима предварительного просмотра</p><br/><p>4. Переходим на необходимую страницу сайта и обновляем eе для активации режима отладки</p><p>5. Далее кликаем по элементу, для которого хотим настроить отслеживание целей. В нашем случаем это будет кнопка <strong>«Обратный звонок»</strong>. Видим, что зафиксировалось соответствующее событие <strong>gtm.click</strong>:</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_445.png"></img></div><p>Рис. 445. Зафиксированное событие gtm.click</p><br/><p>6. Выбираем событие <strong>gtm.click </strong>и переходим на вкладку <strong>«Variables»</strong>. Данному событию соответствуют несколько переменных. В нашем случае, для дальнейших настроек копируем значение переменной <strong>Click Classes</strong>.</p><p><strong>Примечание: </strong>если по каким-то причинам у вас нет необходимой переменной при клике по кнопке, то обратитесь к вашему программисту, чтобы он ее добавил, или же используйте CSS-селекторы.</p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_446.png"></img></div><p>Рис. 446. Копируем Click Classes элемента</p><br/><p>7. Переходим к настройкам GTM. В первую очередь создаем соответствующий триггер, который будет принимать истинное значение, когда будет происходить клик по кнопке <strong>«Обратный звонок»</strong>. В качестве условия активации триггера задаем ранее скопированное значение переменной <strong>Click Classes</strong>. Для этого необходимо задать следующие настройки:</p><p>● Тип триггера – <strong>«Клик – Все элементы»</strong></p><p>● Триггер: активации – <strong>«Некоторые клики»</strong></p><p>● Click Classes равно <strong>enter_1 GTM-zvonok-link</strong></p><br/><div style="text-align: center"><img src="/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_447.png"></img></div><p>Рис. 447. Условие активации триггера по некоторым кликам</p><br/><p>8. Cоздаем тег, который будет передавать события в Google Analytics. Называем тег таким образом, чтобы было понятно за что он отвечает. В качестве типа тега указываем <strong>«Universal Analytics»</strong>.</p></div></div></div></div></div><div class="clearfix"></div><div><div class="Pagination_pagination__thWr5"><a class="Previous_prev__nRln6" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=12"></a><a class="Pagination_pagination__link__innVr" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read">1</a><span>...</span><a class="Pagination_pagination__link__innVr" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=11">11</a><a class="Pagination_pagination__link__innVr" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=12">12</a><a class="Pagination_active__FIUxq" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=13">13</a><a class="Pagination_pagination__link__innVr" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=14">14</a><a class="Pagination_pagination__link__innVr" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=15">15</a><a class="Pagination_pagination__link__innVr" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=16">16</a><a class="Next_next__5tJXc" href="/authors/osipenkov-iakov/book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448/read/page=14"></a></div></div></div></div></div><div class="Footer_footer__kObrD"><div class="Footer_footer__content__n9bQa"><div class="Footer_footer__menu__gXS3F"><div><div class="Footer_footer__title__S4xDF">Разное</div><ul class="Footer_footer__subMenu__U0Bgr"><li class="Footer_footer__subItem__nFG_M"><a class="Footer_footer__subLink__z9Hux" href="/feedback">Обратная связь</a></li><li class="Footer_footer__subItem__nFG_M"><a class="Footer_footer__subLink__z9Hux" href="/faq">FAQ по библиотеке</a></li><li class="Footer_footer__subItem__nFG_M"><a class="Footer_footer__subLink__z9Hux" target="_blank" href="/redirect_to_self_pub_authors">Стать автором</a></li></ul></div><div><div class="Footer_footer__title__S4xDF">Партнеры</div><ul class="Footer_footer__subMenu__U0Bgr"><li class="Footer_footer__subItem__nFG_M"><a target="_blank" class="Footer_footer__subLink__z9Hux" href="/redirect_to_litres">Литрес</a></li><li class="Footer_footer__subItem__nFG_M"><a target="_blank" class="Footer_footer__subLink__z9Hux" href="/redirect_to_self_pub">Литрес Самиздат</a></li><li class="Footer_footer__subItem__nFG_M"><a target="_blank" class="Footer_footer__subLink__z9Hux" href="/redirect_to_my_book">MyBook - книги онлайн</a></li></ul></div><div><div class="Footer_footer__title__S4xDF">Рассылки</div><ul class="Footer_footer__subMenu__U0Bgr"><li class="Footer_footer__subItem__nFG_M"><a class="Footer_footer__subLink__z9Hux" href="/new_books">Новинки книг</a></li><li class="Footer_footer__subItem__nFG_M"><a class="Footer_footer__subLink__z9Hux" href="/rss">Что такое RSS?</a></li></ul></div></div><div class="Footer_footer__bottom__UzXcE"><div class="Footer_footer__mail__tcRmh">По всем вопросам пишите нам на почту: <a class="Footer_footer__mailLink__D23Vn" href="mailto:support@bookz.ru">support@bookz.ru</a></div><div>2003-2025 bookZ.ru</div></div></div></div><div class="BottomBanner_litresBottomBanner__CCnlI"><a class="BottomBanner_litresBottomBanner__link__AN_9d" target="_blank" href="/redirect_to_self_pub"><img width="1920" height="60" loading="lazy" class="BottomBanner_litresBottomBanner__img__SMRfv" src="/banners/self-pub-1200x90.png" alt="banner"/><img width="450" height="100" loading="lazy" class="BottomBanner_litresBottomBanner__img__SMRfv BottomBanner_litresBottomBanner__img_mobile__UoR7n" src="/banners/self-pub-480x180.png" alt="banner"/></a></div></main><div class="StickyBanner_sticky_banner__NC2R_ " data-sticky-banner="true"><div class="StickyBanner_sticky_banner_btn__RQPM3" data-sticky-banner-btn="true"></div><div class="StickyBanner_sticky_banner_wrap__tQTE_"><div id="yandex_rtb_R-A-745623-15"></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"book":{"id":544448,"book_id":319977,"alias":"book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448","views_count":100,"comments_count":0,"rating":3,"voted_users":1,"type":"book","genres":[{"id":5009,"parent_id":201623,"title":"словари, справочники","alias":"spravochniki_slovari"},{"id":5048,"parent_id":5003,"title":"маркетинг, PR, реклама","alias":"marketing_pr_reklama"},{"id":5164,"parent_id":5009,"title":"руководства","alias":"rukovodstva"},{"id":5355,"parent_id":5048,"title":"маркетинг для новичков","alias":"dlya_novichkov"},{"id":6476,"parent_id":5165,"title":"компьютерная справочная литература","alias":"kompjyuternye_spravochniki"},{"id":110965,"parent_id":0,"title":"продукты Google","alias":"produkty-google"},{"id":158885,"parent_id":0,"title":"Google","alias":"google"},{"id":201623,"parent_id":0,"title":"знания и навыки","alias":"znaniia-i-navyki"}],"author":{"id":150744,"alias":"osipenkov-iakov","views_count":18,"comments_count":0,"books_count":1,"status":"active","first_name":"Яков","middle_name":"","last_name":"Осипенков"},"tags":[{"id":14,"title":"Самиздат","alias":"samizdat","book_count":185334},{"id":1564,"title":"продукты Google","alias":"produkty-google","book_count":35},{"id":4774,"title":"Google","alias":"google","book_count":30}],"series":[],"book":{"id":319977,"author_id":103176,"external_id":36063307,"external_uid":"1165abc7-8ca0-42b2-a7e2-55cb1c023c3e","title":"Google Tag Manager для googлят: Руководство по управлению тегами","alias":"google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami","description":"Перед вами первая книга в русскоязычном сообществе по работе с самым популярным инструментом по управлению тегами в мире - Google Tag Manager.\n\nС помощью GTM вы сможете управлять всеми тегами в едином интерфейсе, сэкономить время в процессе настройки, снизить зависимость от разработчиков при внедрении кодов сторонних сервисов на ваш сайт, улучшить производительность путем снижения времени загрузки страниц, а также предотвратить возникающие в процессе работы ошибки через встроенный в Google Tag Manager режим отладки.","type":"book","lang":"ru","src_lang":"ru","year":2018,"publish_year":null,"publish_city":null,"pub_date":"2018-07-27T00:00:00","publisher":null,"release_date":null,"photo":null,"allow_full_free":1,"has_trial":4,"price":null,"hot":0,"isbn":null,"audio_url":null,"genres":[{"id":5009,"parent_id":201623,"title":"словари, справочники","alias":"spravochniki_slovari"},{"id":5048,"parent_id":5003,"title":"маркетинг, PR, реклама","alias":"marketing_pr_reklama"},{"id":5164,"parent_id":5009,"title":"руководства","alias":"rukovodstva"},{"id":5355,"parent_id":5048,"title":"маркетинг для новичков","alias":"dlya_novichkov"},{"id":6476,"parent_id":5165,"title":"компьютерная справочная литература","alias":"kompjyuternye_spravochniki"},{"id":110965,"parent_id":0,"title":"продукты Google","alias":"produkty-google"},{"id":158885,"parent_id":0,"title":"Google","alias":"google"},{"id":201623,"parent_id":0,"title":"знания и навыки","alias":"znaniia-i-navyki"}]},"files":[{"type":"fb2.zip","size":385662,"external_file_id":36063307},{"type":"txt","size":21455,"external_file_id":36063307},{"type":"txt.zip","size":10939,"external_file_id":36063307},{"type":"rtf.zip","size":425325,"external_file_id":36063307},{"type":"a4.pdf","size":454762,"external_file_id":36063307},{"type":"a6.pdf","size":482245,"external_file_id":36063307},{"type":"mobi.prc","size":419224,"external_file_id":36063307},{"type":"epub","size":1277137,"external_file_id":36063307},{"type":"ios.epub","size":393694,"external_file_id":36063307},{"type":"fb3","size":385359,"external_file_id":36063307}],"created_at":"2021-07-09T19:56:48","reader":null,"translator":null,"draft":null,"read_online":true,"src_lang":null,"hide_litres_data":false,"other_author_books":[],"relative_book":null,"chain_book":[],"external_reviews":[],"livelib_widget_data":null},"read":{"page":13,"pages":16,"type":"fb2","content":"\u003cp\u003eUniversal Analytics, Пользовательский HTML и многие другие теги работают на основе JavaScript. Если они загружаются на странице, на которой отключена поддержка JavaScript, то теги не сработают.\u003c/p\u003e\u003cp\u003eВ связи с этим разработчики Google предусмотрели возможность загрузки через тег \u003cstrong\u003e\u003ciframe\u003e\u003c/strong\u003e. А он, в свою очередь, загружается частью контейнера \u003cstrong\u003e\u003cnoscript\u003e \u003c/strong\u003eи показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.\u003c/p\u003e\u003cp\u003eИменно для этих целей и нужна вторая часть кода контейнера Google Tag Manager, которую Google просит разместить после открывающего тега \u003cstrong\u003e\u003cbody\u003e\u003c/strong\u003e:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_403.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 403. Фрагменты кода контейнера GTM\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eНаиболее частое применение тега \u003cstrong\u003e«Пользовательское изображение» \u003c/strong\u003eв GTM – отслеживание посещений для пикселя Facebook. У этого типа тега всего две настройки:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_404.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 404. Настройки пользовательского изображения\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e● \u003cstrong\u003eURL изображения \u003c/strong\u003e– поле, где содержится адрес изображения со всеми параметрами, которые нужно передать;\u003c/p\u003e\u003cp\u003e● \u003cstrong\u003eВключить блокировку кэша (параметр gtmcb по умолчанию) \u003c/strong\u003e– при включении обращения будут регистрироваться в том числе с браузеров с кэшированным изображением.\u003c/p\u003e\u003cp\u003eЗнаете ли вы почему сайты загружаются так быстро? Одной из причин является \u003cem\u003eкэширование\u003c/em\u003e. Первый раз, когда вы заходите на новый сайт, все статические элементы (шрифты, изображений, стили, скрипты и т.д.) загружаются во временную папку, которая будет хранить все эти файлы и в последующих заходах каждый раз показывать на соответствующих страницах. Периодически браузер проверяет, не обновились ли эти файлы на стороне сервера, и при необходимости загружает их заново.\u003c/p\u003e\u003cp\u003eС точки зрения пользователя – это удобно. Нет необходимости ждать очередной полной загрузки страницы. С точки зрения интернет-маркетологов и веб-аналитиков – это не очень хорошо, поскольку на странице данные не поменялись, файлы загрузились один раз во временную папку пользователя и больше отследить к ним обращения возможности нет.\u003c/p\u003e\u003cp\u003eЕсли отключить галочку параметра \u003cstrong\u003e«Включить блокировку кэша»\u003c/strong\u003e, то тег сработает только при первой загрузке сайта, так как изображение будет загружено во временное хранилище. А при включении опции Google Tag Manager добавит параметр gtmcb к URL изображения со случайным значением. Например, так:\u003c/p\u003e\u003cp\u003e\u003cstrong\u003esite.ru/image.jpeg?gtmcb=1713862799\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eПоскольку значение в URL всегда разное, браузеру придется каждый раз скачивать изображение. А раз это будет происходить каждый раз, то мы сможем отслеживать это событие постоянно. Поэтому этот параметр лучше всегда держать включенным.\u003c/p\u003e\u003cp\u003eВ категории тегов \u003cstrong\u003e«Еще» \u003c/strong\u003eсодержатся шаблоны к сервисам, которые не так популярны у нас, но которые часто используются в мире. Это и \u003cstrong\u003ecomScore Unified Digital Measurement\u003c/strong\u003e, и тег \u003cstrong\u003eAdroll Smart Pixel\u003c/strong\u003e, и \u003cstrong\u003eCriteo One Tag\u003c/strong\u003e, и \u003cstrong\u003eHotjar Tracking Code\u003c/strong\u003e, и другие. Руководства по настройке какого-либо тега из этой категории вы найдете на сайте поставщика.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_405.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 405. Теги сторонних сервисов\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eОбычно теги активируются при загрузке страницы или в ответ на какое-либо действие на ней. В Google Tag Manager вы устанавливаете триггеры, определяющие, когда должны активироваться теги. Например, триггер \u003cstrong\u003e«Все страницы» \u003c/strong\u003eбудет запускать тег на всех страницах при загрузке сайта.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_406.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 406. Триггер активации – All Pages\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eДля тегов можно задавать как триггеры активации, так и триггеры блокировки (исключения).\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eОтладчик\u003c/p\u003e\u003cp\u003eРежим отладки (он же режим предварительного просмотра) позволяет проверить корректность настроек тегов Google Tag Manager перед публикацией контейнера, выявить текущие проблемы на этапе тестирования и снизить риск их возникновения в будущем.\u003c/p\u003e\u003cp\u003eРежим предварительного просмотра в GTM еще называют режимом отладки. Проще говоря – это этап, на котором обнаруживают, локализуют и устраняют ошибки. Почему не активируется тег, не срабатывает событие, не определяется переменная? Ответить на эти и многие другие вопросы поможет именно отладка.\u003c/p\u003e\u003cp\u003eПредположим, что в своем контейнере вы настроили какие-то теги, добавили триггеры, переменные, и теперь хотите проверить корректность их выполнения. Чтобы включить режим предварительного просмотра, в интерфейсе Google Tag Manager нажмите на кнопку \u003cstrong\u003e«Предварительный просмотр»\u003c/strong\u003e.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_407.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 407. Предварительный просмотр\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eТаким образом вы активируете режим предварительного просмотра и сверху в оранжевом прямоугольнике появится надпись:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_408.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 408. Предварительный просмотр активирован\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eДоступны три функции:\u003c/p\u003e\u003cp\u003e● \u003cstrong\u003eОбновить \u003c/strong\u003e– если в процессе отладки, не выходя из режима, вы внесли изменения в тегах, триггерах или переменных, то после каждого такого изменения следует обновлять предварительный просмотр, иначе Google Tag Manager не увидит правок и будет показывать предыдущую версию контейнера;\u003c/p\u003e\u003cp\u003e● \u003cstrong\u003eВыйти из режима предварительного просмотра \u003c/strong\u003e– выход из режима отладки;\u003c/p\u003e\u003cp\u003eПеред выходом GTM переспросит у вас:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_409.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 409. Окно выхода\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e● \u003cstrong\u003eПоделиться ссылкой для просмотра \u003c/strong\u003e– отправить доступ другим людям;\u003c/p\u003e\u003cp\u003eРежим предварительного просмотра доступен только в том браузере, в котором был включен этот режим. Но вы можете предоставить доступ другим пользователям. Для этого необходимо нажать на кнопку \u003cstrong\u003e«Поделиться ссылкой для просмотра»\u003c/strong\u003e. Далее вводите целевой URL, разрешаете отладку при просмотре (gtm_debug=x), копируете ссылку и отправляете ее другому пользователю.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_410.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 410. Поделиться ссылкой для просмотра\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПользователь, в свою очередь, должен будет перейти по ссылке и кликнуть на целевой URL. После этого режим предварительного просмотра в его браузере будет активирован.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_411.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 411. Preview Container\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПосле активации предварительного просмотра в соседней вкладке откройте ваш сайт. В нижней части окна браузера появится консоль отладки с подробной информацией о запущенных тегах, порядке их активации и собираемых данных. Эту консоль будете видеть только вы – другим посетителям сайта она недоступна.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_412.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 412. Панель отладки\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕсли после проделанных работ вы не увидели нижнюю консоль, то это может быть связано с тем, что:\u003c/p\u003e\u003cp\u003e● вы используете какие-либо блокировщики, например, AdBlock или AdGuard (хотя в некоторых случаях GTM корректно работает и с ними);\u003c/p\u003e\u003cp\u003e● ваш антивирус блокирует всплывающие окна;\u003c/p\u003e\u003cp\u003e● сам браузер настроен таким образом, что воспрепятствует появлению дополнительных окон.\u003c/p\u003e\u003cp\u003eЕсли ничего из вышеперечисленного не помогло, попробуйте зайти в режим отладки с другого браузера или компьютера.\u003c/p\u003e\u003cp\u003eДавайте разберем полностью всю навигацию консоли отладки.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_413.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 413. Интерфейс панели отладки\u003c/p\u003e\u003cstrong\u003e1. Сводка, шкала временных событий\u003c/strong\u003e\u003cp\u003eВ этом блоке отображаются все события в хронологическом порядке, которые зафиксировал Google Tag Manager. Как мы уже знаем, по умолчанию диспетчер тегов Google передает на уровень данных 3 события вне зависимости от того, настроили вы что-то еще или нет. Это \u003cstrong\u003egtm.js (Page View), gtm.dom (DOM Ready) \u003c/strong\u003eи \u003cstrong\u003egtm.load (Window Loaded)\u003c/strong\u003e. Цифра рядом с каждым событием означает порядок активации. В данном случае событие \u003cstrong\u003e«Page View» (1) \u003c/strong\u003eбыло зафиксировано раньше остальных.\u003c/p\u003e\u003cp\u003eПри клике на любое событие из списка мы можем посмотреть дополнительную информацию о нем. Например, событие gtm.click:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_414.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 414. Дополнительная информация о событии gtm.click\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕсли наверху выбрана вкладка \u003cstrong\u003e«Tags (Теги)»\u003c/strong\u003e, то мы можем увидеть какие теги были активированы по данному события, а какие нет.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eTags Fired On This Page \u003c/strong\u003e– теги, которые были активированы (цифра 3);\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eTags Not Fired On This Page \u003c/strong\u003e– теги, которые не были активированы (цифра 4);\u003c/p\u003e\u003cp\u003eВ данном примере ни один из тегов не был активирован.\u003c/p\u003e\u003cp\u003eЕсли выбрана вкладка \u003cstrong\u003e«Variables (Переменные)»\u003c/strong\u003e, то мы получаем подробные сведения о переменных в выбранном событии в тот момент, когда оно произошло. GTM будет передавать те значения переменных, которые были активированы в интерфейсе, даже если они не определены (undefined).\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_415.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 415. Сопоставление переменных\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eНа вкладке \u003cstrong\u003e«Data Layer (Уровень данных)» \u003c/strong\u003eотображается информация объекта в двух состояниях:\u003c/p\u003e\u003cp\u003e● в том виде, в каком она была передана в уровень данных в момент события;\u003c/p\u003e\u003cp\u003e● содержимое уровня данных после того, как произошло событие.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_416.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 416. Data Layer\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eВерхний пункт \u003cstrong\u003e«Summary» \u003c/strong\u003eпоказывает общую информацию о работе всех тегов GTM, которые сработали на данной странице за все время работы независимо от времени их загрузки.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_417.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 417. Summary\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕсли тег сработал несколько раз, то в Summary рядом с этим тегом будет изменено значение \u003cstrong\u003eFired .. time (s)\u003c/strong\u003e\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_418.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 418. Количество совершенных событий Fired X time(s)\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eВ Summary информация по переменным недоступна, поскольку их значения меняются в зависимости от события.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_419.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 419. Please select a Data Layer message to view variable values\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕе необходимо просматривать только тогда, когда вы выбираете конкретное событие.\u003c/p\u003e\u003cp\u003eВ Summary на вкладке \u003cstrong\u003e«Data Layer» \u003c/strong\u003eвыводится вся информацию по уровню данных в хронологическом порядке – события с номерами, та информация, которая была передана по событию и общая информация об уровне данных на текущий момент, \u003cstrong\u003eCurrent values of the Data Layer \u003c/strong\u003e(блок выделен зеленым):\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_420.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 420. Summary – Data Layer\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕсли событий было зафиксировано большое количество, то с помощью кнопки \u003cstrong\u003e«Show more» \u003c/strong\u003eможно просмотреть предыдущий список событий.\u003c/p\u003e\u003cp\u003eВозвращаемся назад к временной шкале событий и на вкладку \u003cstrong\u003e«Tags» \u003c/strong\u003e(цифра 2).\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_421.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 421. Вкладка Tags\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eНажав на тег, можно просмотреть его свойства и значения, а также триггеры активации (\u003cstrong\u003eFiring Triggers\u003c/strong\u003e) и блокировки (\u003cstrong\u003eBlocking Triggers\u003c/strong\u003e).\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_422.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 422. Свойства и значения\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eТриггер активации сработал и нет (отличия):\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_423.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 423. Триггер активации и триггер блокировки (отличия)\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eАктивация триггера может состоять из нескольких условий. В этом случае какие-то отдельные условия могут сработать, а какие-то нет:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_424.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 424. Несколько условий активации триггера\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПри несоблюдении хотя бы одного условия триггер не сработает. В верхней части блока отладки на вкладке «Tags» есть настройка, которая называется \u003cstrong\u003eDisplay Variables as\u003c/strong\u003e.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_425.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 425. Настройка Display Variables as\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eОна позволяет выбрать режим представления переменных: в виде имени (Names) или в виде значения (Values) переменной в момент активации.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_426.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 426. Различия в отображении\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eНа примере выше условия активации триггера изменились с \u003cstrong\u003eClick Element, Page URL \u003c/strong\u003eи \u003cstrong\u003e_event \u003c/strong\u003e(названия переменных) на значения переменных в момент активации.\u003c/p\u003e\u003cp\u003eКак мы уже знаем, для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Она можно использоваться внутри обработчика того или иного события. Если event отсутствует или не задано, то в режиме отладки мы увидим слово \u003cstrong\u003e«Message» \u003c/strong\u003eи надпись:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_427.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 427. «Message»\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЕсли мы передаем через уровень данных пользовательское событие, то имя этого события выводится на временной шкале. Например, клик по кнопке зафиксировал пользовательское событие \u003cstrong\u003e«Яша Осипенков»\u003c/strong\u003e.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_428.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 428. Событие с собственным именем\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eНазвание может быть, как на кириллице, так и на латинице. Однако устоявшимся традиционным написанием пользовательских событий все же является латинский алфавит. А информация на уровне данных выглядит следующим образом:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_429.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 429. Data Layer\u003c/p\u003e\u003cstrong\u003e5. QUICK_PREVIEW\u003c/strong\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_430.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 430. Предварительный просмотр\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eЭта надпись свидетельствует о том, что в данный момент мы находимся в режиме предварительного просмотра (отладки) контейнера Google Tag Manager.\u003c/p\u003e\u003cstrong\u003e6. Код контейнера\u003c/strong\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_431.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 431. Код контейнера\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eИдентификатор контейнера GTM.\u003c/p\u003e\u003cstrong\u003e7. Сворачивание панели отладки\u003c/strong\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_432.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 432. Сворачивание панели отладки\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eИногда панель отладки Google Tag Manager загораживает нижнюю часть экрана. В этом случае мы на некоторое время можем свернуть его для внесение каких-либо правок с помощью данной опции.\u003c/p\u003e\u003cp\u003eВ свернутом состоянии панель отладки выглядит так:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_433.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 433. Панель отладки в свернутом состоянии\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПри клике на элемент вернется исходное состояние GTM. Помимо этого, управлять высотой панели можно с помощью ее перетягивания левой кнопкой мыши вверх-вниз.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_434.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 434. Изменение высоты панели\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПосле того, как вы проверили корректность всех настроек в режиме отладки и внесли соответствующие изменения, их можно опубликовать. Для этого необходимо нажать на кнопку \u003cstrong\u003e«Отправить» \u003c/strong\u003eв правом верхнем углу интерфейса Google Tag Manager.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_435.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 435. Отправить на публикацию\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eУказав название версии или создав новую, а также выбрав среду, опубликуйте контейнер.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eРекомендации: \u003c/strong\u003eесли вы проверяете корректность срабатывания событий Google Analytics, то используйте для этого группу отчетов «В режиме реального времени».\u003c/p\u003e\u003c/section\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eГлава 3. Google Tag Manager на примерах\u003c/p\u003e\u003csection\u003e\u003cp\u003eВ первую версию книги \u003cstrong\u003e«Google Tag Manager для googлят» \u003c/strong\u003eпопали самые распространенные примеры настроек GTM. Если вы нашли ошибку или хотите дополнить этот раздел собственной публикацией, присылайте материал мне на почту ya.osipenkov@icloud.com\u003c/p\u003e\u003cp\u003eДанная глава подготовлена командой GaSend.com.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eПрослушивание кликов в GTM\u003c/p\u003e\u003cp\u003eИспользуя отладчик (режим отладки) GTM, можно определить те переменные, с помощью которых будет осуществляться отслеживание действий пользователей на сайте.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_436.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 436. Режим отладки – gtm.click\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eОчень часто такие события как клик по ссылке (\u003cstrong\u003egtm.linkClick\u003c/strong\u003e), клик по кнопке (\u003cstrong\u003egtm.click\u003c/strong\u003e) и отправка формы (\u003cstrong\u003egtm.formSubmit\u003c/strong\u003e) не фиксируются в режиме отладки.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_437.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 437. События в режиме отладки\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eКак видно из скриншота, Google Tag Manager не зафиксировал ни одного из выше перечисленных событий. Для того чтобы события начали фиксироваться, необходимо создать три дополнительных триггера:\u003c/p\u003e\u003cp\u003e1. Начнем с настройки триггера для прослушивания кликов (\u003cstrong\u003egtm.click\u003c/strong\u003e), который будет фиксировать события, связанные с кликами на странице.\u003c/p\u003e\u003cp\u003eДля этого создаем новый триггер и называем его \u003cstrong\u003e«Все клики»\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003e● Тип триггера – \u003cstrong\u003e«Клик – Все элементы»;\u003c/strong\u003e\u003c/p\u003e\u003cp\u003e● Триггер активации – \u003cstrong\u003e«Все клики».\u003c/strong\u003e\u003c/p\u003e\u003cp\u003eСохраняем триггер.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_438.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 438. Создание триггера типа «Все клики»\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e1. Триггер для прослушивания кликов по ссылкам (\u003cstrong\u003egtm.linkClick\u003c/strong\u003e). Называем его \u003cstrong\u003e«Все клики по ссылкам»\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003e● Тип триггера – \u003cstrong\u003e«Клик – Только ссылки»\u003c/strong\u003e;\u003c/p\u003e\u003cp\u003e● Триггер: активации – \u003cstrong\u003e«Все клики по ссылкам»\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003eСохраняем триггер.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_439.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 439. Создание триггера типа «Клик – Только ссылки»\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e2. Создаем триггер для прослушивания отправок форм (\u003cstrong\u003egtm.formSubmit\u003c/strong\u003e). Называем его \u003cstrong\u003e«Отправка всех форм»\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003e● Тип триггера – \u003cstrong\u003e«Отправка формы»\u003c/strong\u003e;\u003c/p\u003e\u003cp\u003e● Триггер активации – \u003cstrong\u003e«Все формы»\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003eСохраняем триггер.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_440.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 440. Создание триггера типа «Отправка формы»\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПосле настройки триггеров переходим в режим отладки. И видим, что теперь нам доступны наши события \u003cstrong\u003egtm.click, gtm.linkClick, gtm.formSubmit\u003c/strong\u003e.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_441.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 441. События gtm.click, gtm.linkClick, gtm.formSubmit\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eС этого момента мы можем настраивать отслеживание нужных нам событий, привязываясь к соответствующим значениям переменных.\u003c/p\u003e\u003c/section\u003e\u003csection\u003e\u003cp\u003eОтслеживание кликов с помощью GTM\u003c/p\u003e\u003cp\u003eРассмотрим настройки на примере клика по кнопке \u003cstrong\u003e«Обратный звонок»\u003c/strong\u003e.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_442.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 442. Отслеживание кнопки «Обратный звонок»\u003c/p\u003e\u003cbr/\u003e\u003cp\u003eПоследовательность действий:\u003c/p\u003e\u003cp\u003e1. Настраиваем прослушивание кликов;\u003c/p\u003e\u003cp\u003e2. Переходим в пункт меню \u003cstrong\u003e«Переменные»\u003c/strong\u003e, нажимаем на кнопку \u003cstrong\u003e«Настроить» \u003c/strong\u003eи активируем соответствующие переменные:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_443.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 443. Активация встроенных переменных типа «Клики»\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e3. Активируем режим предварительного просмотра:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_444.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 444. Активация режима предварительного просмотра\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e4. Переходим на необходимую страницу сайта и обновляем eе для активации режима отладки\u003c/p\u003e\u003cp\u003e5. Далее кликаем по элементу, для которого хотим настроить отслеживание целей. В нашем случаем это будет кнопка \u003cstrong\u003e«Обратный звонок»\u003c/strong\u003e. Видим, что зафиксировалось соответствующее событие \u003cstrong\u003egtm.click\u003c/strong\u003e:\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_445.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 445. Зафиксированное событие gtm.click\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e6. Выбираем событие \u003cstrong\u003egtm.click \u003c/strong\u003eи переходим на вкладку \u003cstrong\u003e«Variables»\u003c/strong\u003e. Данному событию соответствуют несколько переменных. В нашем случае, для дальнейших настроек копируем значение переменной \u003cstrong\u003eClick Classes\u003c/strong\u003e.\u003c/p\u003e\u003cp\u003e\u003cstrong\u003eПримечание: \u003c/strong\u003eесли по каким-то причинам у вас нет необходимой переменной при клике по кнопке, то обратитесь к вашему программисту, чтобы он ее добавил, или же используйте CSS-селекторы.\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_446.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 446. Копируем Click Classes элемента\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e7. Переходим к настройкам GTM. В первую очередь создаем соответствующий триггер, который будет принимать истинное значение, когда будет происходить клик по кнопке \u003cstrong\u003e«Обратный звонок»\u003c/strong\u003e. В качестве условия активации триггера задаем ранее скопированное значение переменной \u003cstrong\u003eClick Classes\u003c/strong\u003e. Для этого необходимо задать следующие настройки:\u003c/p\u003e\u003cp\u003e● Тип триггера – \u003cstrong\u003e«Клик – Все элементы»\u003c/strong\u003e\u003c/p\u003e\u003cp\u003e● Триггер: активации – \u003cstrong\u003e«Некоторые клики»\u003c/strong\u003e\u003c/p\u003e\u003cp\u003e● Click Classes равно \u003cstrong\u003eenter_1 GTM-zvonok-link\u003c/strong\u003e\u003c/p\u003e\u003cbr/\u003e\u003cdiv style=\"text-align: center\"\u003e\u003cimg src=\"/img/google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami/_447.png\"\u003e\u003c/img\u003e\u003c/div\u003e\u003cp\u003eРис. 447. Условие активации триггера по некоторым кликам\u003c/p\u003e\u003cbr/\u003e\u003cp\u003e8. Cоздаем тег, который будет передавать события в Google Analytics. Называем тег таким образом, чтобы было понятно за что он отвечает. В качестве типа тега указываем \u003cstrong\u003e«Universal Analytics»\u003c/strong\u003e.\u003c/p\u003e"},"pageNumber":"13","_sentryTraceData":"1a4aca6fb9a14139ba86995ca281315c-be7739ee296499c2-1","_sentryBaggage":"sentry-environment=production,sentry-release=FfgC1L70H-F6To5g9jjoG,sentry-public_key=04eab6043f8a4d5dd6ab92058ea491e6,sentry-trace_id=1a4aca6fb9a14139ba86995ca281315c,sentry-sample_rate=1,sentry-transaction=%2Fauthors%2F%5Balias%5D%2F%5BbookAlias%5D%2Fread%2F%5BpageNumber%5D,sentry-sampled=true"},"__N_SSP":true},"page":"/authors/[alias]/[bookAlias]/read/[pageNumber]","query":{"alias":"osipenkov-iakov","bookAlias":"book-google-tag-manager-dlia-googliat-rukovodstvo-po-upravleniiu-tegami-544448","pageNumber":"13"},"buildId":"FfgC1L70H-F6To5g9jjoG","isFallback":false,"isExperimentalCompile":false,"gssp":true,"scriptLoader":[]}</script></body></html>