Инъекция контейнера Google Tag Manager на любой сайт и проблема фейковых данных

08 октября, 2023

Нет времени ждать, пока разработчик или заказчик установят код Google Tag Manager согласно вашему заданию, а хочется сразу приступить к работе? Или у заказчика уже есть GTM и вам нужно просто его донастроить, но доступов пока нет? А может быть вы хотите просто потренироваться с отслеживаниями на любом стороннем сайте? Тогда используйте специальные расширения для инъекции диспетчера тегов Google. И не забывайте про проблему фейковых данных.

В 2019 году я опубликовал материал по Chrome Extension Injector - бесплатном аналоге популярного в свое время расширения Tag Manager Injector. С помощью таких утилит вы можете развернуть контейнер Google Tag Manager на любом сайте и проверить корректность настройки переменных, триггеров и тегов еще до того, как сам код контейнера будет размещен на страницах этого сайта. Причем сделать это можно с любым сайтом, не только со своим.

Прошло уже больше четырех лет и за это время появились как новые инструменты, так и перестали работать старые расширения. В этой статье я хочу рассказать вам о некоторых альтернативных вариантах внедрения кода диспетчера тегов Google, которые популярны на данный момент. Вы можете не дожидаться, пока разработчик или заказчик установят ваш код GTM или предоставят доступ к своему контейнеру, а сразу приступить к работе. Это особенно актуально для меня (и тех, кто преподает онлайн-обучение), поскольку для решения практических задач слушателям необходим реальный проект, на котором они смогут оттачивать свои навыки и выполнять домашние задания.

Для своих онлайн-курсов я создаю специальные тестовые проекты и даю слушателям возможность установить контейнер Google Tag Manager прямо на сайт. Таким образом, каждый может полноценно поработать с диспетчером тегов Google и развернуть необходимые теги и выполнить все настройки самостоятельно. Бывало такое, что на одном сайте одновременно устанавливалось более 30 кодов Google Tag Manager. И все работало хорошо. За исключением ситуаций, когда слушатели видят чужие настройки на шкале событий, которые препятствуют корректной отладке, или, что еще хуже - влияют на текущие отслеживания слушателя. Какой-нибудь код срабатывает не так, как нужно, или вообще не дает выполнять другие команды. Бывает и такое...

Чтобы не устанавливать множество контейнеров Google Tag Manager на сайт и исключить ошибки, вызванные человеческим фактором, можно использовать специальные расширения для инъекции контейнера Google Tag Manager, позволяющие разместить его "фиктивно". Он будет работать только в пределах вашего браузера. В нем вы выполняете все настройки, проверяете корректность работы переменных, триггеров и тегов, а затем экспортируете свою конфигурацию и загружаете ее в рабочий контейнер. Это может быть полезно и тогда, когда у слушателя есть свой проект, и он в рамках обучения выполняет почти все настройки на нем. А тех настроек, которых у него на сайте нет (например, электронной коммерции, функции User ID и др.), он сможет выполнить с помощью нижеприведенных расширений.

К Tag Manager Injector и Chrome Extension Injector я добавил еще три самых популярных решения, позволяющих внедрить ваш контейнер на сайт. О них пойдет речь далее.

Примечание: все нижеприведенные расширения можно скачать в интернет-магазине Chrome.

Adswerve - dataLayer Inspector+

Расширение можно установить по ссылке. Оно позволяет не только внедрять контейнер Google Tag Manager на сайт, но и обладает множеством других полезных для интернет-маркетолога функций. Например:

  • обеспечивает в режиме реального времени мониторинг уровня данных (dataLayer);
  • позволяет просматривать события Google Analytics в консоли разработчика браузера по мере их возникновения;
  • поддерживает и другие аналитические и рекламные инструменты: Adobe DTM, Adobe Analytics, Tealium, Facebook *, DoubleClick;
  • блокирует загрузку скриптов и заменять их другими скриптами;

* Деятельность американской компании Meta (бывшая Facebook) запрещена в России, организация признана экстремистской.

Создав контейнер Google Tag Manager и установив расширение в свой браузер, нажмите на значок Adswerve - dataLayer Inspector+ и поставьте галочку напротив Inspect:

Inspect

Затем раскройте меню Advanced Options - Add functionality и установите галочку рядом с Insert GTM Container:

Insert GTM Container

В поле GTM- введите идентификатор вашего контейнера Google Tag Manager (без префикса GTM-). Его можно посмотреть в интерфейсе диспетчера тегов Google в правом верхнем углу рабочей области:

Идентификатор контейнера Google Tag Manager

В поле Host введите имя хоста без https://, только сам домен, например, shopiqa.ru:

Настройки для полей GTM- и Host

Если вы хотите внедрить контейнер Google Tag Manager на несколько сайтов, включите флажок RegEx (регулярное выражение) и перечислите через символ вертикального слэша | несколько хостов. Например, osipenkov.ru|shopiqa.ru:

Использование функции RegEx для нескольких сайтов

Благодаря этой функции, Adswerve - dataLayer Inspector+ внедрит контейнер на все сайты, которые содержат хост osipenkov.ru или shopiqa.ru.

В завершение нажмите кнопку Save & Reload Page:

Save & Reload Page

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

Запуск режима отладки

В окне Tag Assistant введите домен сайта, на который вы внедрили свой контейнер GTM с помощью расширения Adswerve - dataLayer Inspector+ и нажмите Connect:

Активация режима предварительного просмотра

Вам откроется страница с сайтом, на которой в левом верхнем углу будет отображаться иконка INSERTED, свидетельствующая о внедрении вашего контейнера Google Tag Manager даже несмотря на то, что фактически код контейнера не был установлен на сайт, а сама иконка приложения будет иметь подсветку GTM:

Инъекция контейнера Google Tag Manager с помощью Adswerve - dataLayer Inspector+

А вернувшись на страницу с режим отладки GTM вы увидите классическую шкалу событий, на которой отображаются различные взаимодействия:

Шкала событий в режиме отладки

Теперь вы можете создавать переменные, триггеры и теги в своем контейнере Google Tag Manager, а затем проверять все это традиционным способом в режиме отладки. Сам код Google Tag Manager реально не размещается на сайте, он работает только в пределах вашего браузера Google Chrome и активного расширения Adswerve - dataLayer Inspector+. Никакого взлома здесь нет. И ваши настройки и отслеживания никак не распространяются на других членов команды или пользователей сайта. Они их не видят, но в сами инструменты аналитики (в Google Analytics 4, Яндекс.Метрику и т.п.) передача данных будет осуществляться.

То есть вы можете фиктивно внедрить GTM через расширение, создать триггер и тег для Google Analytics 4, зайти в режим предварительного просмотра, совершить какое-нибудь событие, а затем перейти в счетчик GA4 и увидеть это событие. Например, в отчете В реальном времени:

Проверка событий с фиктивного контейнера GTM/GA4 в Google Analytics 4

Проверив все настройки, вы можете экспортировать контейнер через функцию Экспортировать контейнер, расположенную в разделе Администрирование, а затем загрузить эту конфигурацию в рабочий проект заказчика/клиента, просто объединив контент выбранной рабочей области и импортированного контейнера, на котором вы производили все отслеживания:

Экспорт контейнера

Datalayer Checker

Расширение можно скачать по ссылке. Помимо того, что Datalayer Checker позволяет гибко работать с уровнем данных, копировать ключи параметров в буфер обмена, подсвечивать значения типов данных различными цветами и многое другое, он еще дает возможность внедрять до 5 контейнеров Google Tag Manager. Именно поэтому данное расширение находится в этом списке и вы так же можете использовать его для инъекции.

Сделать это очень просто. Установив расширение, нажмите на его иконку и перейдите в раздел Settings:

Datalayer Checker - Settings

Прокрутите окно до раздела GTM Injection и вставьте в первую строку идентификатор вашего контейнера GTM. Только в отличие от Adswerve - dataLayer Inspector+ необходимо вставить номер полностью, с префиксом GTM-. В поле Hostname rule вставьте имя хоста без https://, только сам домен, например, shopiqa.ru. А последнее поле Notes (заметка, примечание) можно оставить пустым:

Добавление кода GTM в GTM injector

Если вы хотите внедрить контейнеры Google Tag Manager на несколько сайтов, то используйте следующую строчку для добавление нового идентификатора GTM и домена сайта. Всего до 5 штук. В завершение нажмите кнопку Save settings:

Сохранение настроек

После этого вы можете вернуться в интерфейс Google Tag Manager и активировать режим предварительного просмотра. Все последующие действия аналогичны. Правда Datalayer Checker не будет отображать никакого уведомления о внедрении вашего контейнера GTM, но шкала событий в режиме отладки и весь функционал будут работать в штатном режиме.

Da Vinci Tools

Еще одно популярное расширение, которое используют маркетологи в своей работе по всему миру - это Da Vinci Tools. Скачать его можно по ссылке. У этого инструмента очень много разных полезных функций, про которые вы можете узнать на официальной странице расширения.

Нас интересует функционал внедрения кода Google Tag Manager. Как только вы установите Da Vinci Tools, перейдите в интерфейс Google Tag Manager. Рядом с кнопкой режима предварительного просмотра появится новая кнопка Inject:

Кнопка Inject от Da Vinci Tools

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

Нажмите на нее. У вас откроется новое окно, в котором нужно задать шаблон, соответствующий домену или отслеживающим страницам. На них будет внедрен ваш контейнер GTM. Примеры:

  • https://domain.com/ - для соответствия всему домену;
  • http://domain.com/path/ - для соответствия определенной папке/каталогу;
  • https://domain.com/page*.htm - для соответствия определенным страницам.

Внедрение контейнера с помощью Da Vinci Tools

Задав нужное правило, нажмите кнопку Enable. На открывшейся странице (если потребуется) разрешите приложению просмотр и изменение данных на вашем сайте:

Разрешение просмотра и изменение данных

После этого запустите стандартный режим предварительного просмотра и используйте весь функционал Google Tag Manager. А в самом расширении Da Vinci Tools вы увидите уведомление о том, что расширение имеет доступ к сайту.

Расширение имеет доступ к сайту

Проведите все необходимые настройки в "фиктивном" контейнере, а в конце экспортируйте его конфигурацию в рабочий диспетчер тегов Google, объединив все отслеживания в одном GTM.

Проблема фейковых данных

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

Однако такая возможность порождает и новые проблемы. Например, спам-событий в чужие счетчики аналитики. Несмотря на то, что Google внедрил так называемый Секретный ключ API для Measurement Protocol, который должен бороться со спамом и отправкой заведомо ложных данных в чужие счетчики GA4, все равно не составляет никакого труда отправить нужные события в счетчик конкурента с помощью инъекции с целью исказить его данные.

Примечание: секретного ключа API не было в предыдущей версии Universal Analytics, поэтому любой человек в любой контейнер мог отправить офлайн-данные с заведомо ложной информацией.

Как это сделать? Да очень легко! Описываю пошаговый план действий:

  • создаете контейнер Google Tag Manager и в его настройках используете домен вашего конкурента;
  • заходите на сайт конкурента и с помощью расширения Google Tag Assistant (или любого другого) узнаете его идентификатор веб-потока Google Analytics 4 (G-XXXXXXX);

Идентификатор контейнера Google Tag Manager

  • в "фиктивном" контейнере GTM создаете тег события GA4 с идентификатором потока данных вашего конкурента, в котором передаете какую-нибудь заведомо ложную информацию (например, транзакцию на сумму 500 000 000) с каждым просмотром страницы;

Тег с фейковыми данными

  • используете одно из представленных в этой статье расширений, чтобы внедрить контейнер Google Tag Manager на сайт;
  • после активации режима предварительного просмотра такое событие будет отправлено на сайт конкурента (в его счетчик GA4) без фактического внедрения вашего кода;
  • результат - серьезное искажение статистики у конкурента даже без использования секретного ключа API (API Secret).

Через 24-48 часов в его статистике чужого счетчика Google Analytics 4 появятся ваши данные по отправленным событиям. В качестве примера я отправил через фиктивный контейнер в свой счетчик аналитики событие покупки (purchase) на сумму 500 миллионов рублей. И оно "успешно" отобразилось в отчетах GA4:

Данные с фиктивного контейнера GTM (который не был установлен на сайте) отправились в реальный счетчик аналитики GA4

Вот такие вот дела!

Не знаю, будет ли как-то Google бороться с такого рода проблемой. Важно лишь то, что:

  • такая проблема существует;
  • вы легко можете обойти секретный ключ API и отправить с помощью инъекции контейнера Google Tag Manager все, что угодно, в любой счетчик Google Analytics 4 и исказить абсолютно любые данные любого проекта (если захотите).

Для этого вам потребуется всего лишь новый контейнер Google Tag Manager, реальный идентификатор потока Google Analytics 4 конкурента, одно из расширений из этой статьи и 10 минут времени.

Если вам отправили данные по ошибке

Если кто-то из ваших конкурентов прочитал эту статью и решил отправить вам фейковые события, которые ни вы, ни ваши пользователи не совершали, то вы можете воспользоваться руководством по удалению данных из Google Analytics 4.

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

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