Отслеживание перевода страниц с помощью Google Tag Manager

29 октября, 2022

Ваш контент читают пользователи из других стран с помощью перевода страниц? А хотите узнать что конкретно и на каких языках? Тогда это руководство по отслеживанию перевода страниц с помощью Google Tag Manager для вас.

Обновление: я выпустил электронное руководство по Google Analytics 4. Бесплатно скачать его можно в формате .PDF по ссылке.

Введение

Читая международные блоги других авторов по веб-аналитике, я наткнулся на очень интересный материал, переводом которого хочу поделиться с вами.

Перевод переводов) Забавно получается, да? Так или иначе, данная настройка представляет собой очень креативное и нетривиальное решение, позволяющее отправлять события в Яндекс.Метрику и Google Analytics всякий раз, как пользователь на вашем сайте переводит страницу. И не просто отправлять сам факт такого события, но и значение языка, на который перевели страницу, и сам URL-адрес переведенной страницы.

Мой перевод статьи основан на материале ezsegment.com, но есть и другая публикация от analyticsmania.com от 2019 года, которую вы тоже можете изучить. Она основана на MutationObserver (отслеживании изменений внутри DOM вашего документа). Но есть способ проще. Поскольку Влад (автор мануала) из Латвии и работает с продуктами Google, то я взял на себя смелость дополнить статью отслеживанием для Яндекс.Метрики.

Итак, наверняка вы знаете, что в некоторых браузерах по умолчанию есть возможность перевода страниц с языка оригинала на тот, который вы хотите. Например, в Google Chrome перевести страницу можно с помощью встроенной функции Google Translate (translate.google.com)

Встроенная функция перевода в Google Chrome

Или с помощью вызова контекстного меню на странице (правой кнопки мыши):

Перевод через контекстное меню

Когда пользователь переводит страницу на вашем сайте, к HTML-объекту добавляется атрибут lang со значением выбранного языка и классом translated-ltr или translated-rtl (в зависимости от выбора):

Атрибут "lang" и class

Именно эту конструкцию можно использовать в триггере Видимость элемента для элемента body вместе с регистрацией изменения DOM, чтобы отслеживать такие изменения. Кроме этого, для обычного веб-сайта (не Single Page Application) может потребоваться дополнительное условие для предотвращения срабатывания события при каждом просмотре страницы, поскольку после перевода страницы имя класса translated- может быть установлено по умолчанию на всех остальных страницах. Это означает, что при каждой загрузке страницы будет срабатывать триггер видимости элемента, если только у вас нет условия ограничения. Для этого в Google Tag Manager мы будем использовать специальный файл cookie.

Создание триггера

Перейдите в диспетчере тегов Google в раздел Триггеры и создайте триггер типа Видимость элемента (Element Visibility). Поскольку имя класса переведенной страницы меняется на translated-ltr или translated-rtl (в зависимости от выбранного языка), используйте следующий селектор CSS:

Конструкция содержит регулярное выражение, которое учитывает как translated-ltr, так и translated-rtl. Вставьте эту строку в поле Селектор элементов, выбрав Метод выбора - Селектор CSS:

Селектор элементов - html[class*="translated"] body

В настройках триггера укажите следующее:

  • Правило запуска этого триггера - Один раз на страницу;
  • Минимальный процент видимости - 1;
  • Регистрация изменений DOM - отметьте галочкой;

Итоговые настройки триггера должны выглядеть так:

Настройки триггера "Видимость элемента"

Сохраните триггер.

Создание переменной "Элемент DOM"

Перейдите в раздел Переменные и создайте пользовательскую переменную типа Элемент DOM. Поскольку HTML-объекту html добавляется атрибут lang, назначьте такие настройки:

  • Метод выбора - Селектор CSS;
  • Селектор элементов - html;
  • Название атрибута - lang.

Настройки пользовательской переменной

Сохраните переменную, предварительно задав ей название (например: DOM - language). Когда вы будете использовать ее в теге для передачи этой информации в аналитику, то она будет возвращать значение атрибута lang, в котором содержится язык, на которой в данный момент пользователь перевел страницу.

Значение языка, извлеченного из атрибута lang

Создание тега Universal Analytics

Для отправки данных о переводе страницы в Google Analytics перейдите в раздел Теги и создайте тег типа Google Аналитика: Universal Analytics с типом отслеживания События. Дальнейшая настройка зависит от того, как вы хотите видеть данные в представлении Google Analytics 3. Вы можете задать только категорию и действие по событию, внутри которого добавите созданную шагом ранее переменную Элемент DOM, а можете передавать значение из атрибута lang еще и как специальный параметр.

В первом случае в полях Категория и Действия задайте произвольные значения, дополнительно добавив переменную DOM - language в одно из полей (можно и в Ярлык, если хотите):

Тогда в отчетах по событиям в Universal Analytics (Поведение - События - Лучшие события) вы будете видеть такую разбивку:

Пример отчета по событиям в Universal Analytics

Если вы хотите передавать значение перевода и в качестве специального параметра, тогда вам необходимо на уровне ресурса в разделе Пользовательские определения - Специальные параметры создать новый параметр, задать ему имя и область действия.

Создание специального параметра

После сохранения вам необходимо запомнить индекс этого параметра, который будет отображаться в вашей общей таблице всех специальных параметров.

Индекс специального параметра

Этот индекс вам необходимо вставить в тег Universal Analytics в дополнительных настройках. Значение для него - это пользовательская переменная Элемент DOM:

Специальный параметр в теге

В качестве триггера активации для тега выберите триггер Видимость элемента. Итоговая конфигурация со всеми настройками может выглядеть так:

Итоговая конфигурация тега GA3

Сохраните тег Google Analytics 3.

Примечание: 1 июля 2023 г. Universal Analytics (GA3) перестанет собирать ваши данные на сайте, и уже сейчас я рекомендую переходить вам на новый Google Analytics 4.

Создание тега Google Analytics 4

Для отправки данных о переводе страницы в Google Analytics 4 создайте тег типа Google Аналитика: событие GA4. Добавьте в него:

  • Тег конфигурации GA4;
  • Название события - произвольное (например page_translation);
  • Параметр события - произвольное (например translation_lang);

Именно в параметре события при активации тега в аналитику будет передаваться язык пользователя, на который он осуществил перевод вашей страницы. В качестве триггера активации задайте тот же самый триггер видимости элемента, созданный несколько шагов назад.

Окончательная конфигурация тега GA4 будет выглядеть так:

Итоговая конфигурация тега GA4

Поскольку значение языка перевода передается в параметре события, вам необходимо перейти в интерфейс своего счетчика Google Analytics и создать специальный параметр с аналогичным значением параметра события. Для этого откройте раздел Конфигурация - Специальные определения и создайте новый специальный параметр:

Создание специального параметра

Название параметра вы можете задать произвольное, в том числе и на кириллице (например: Перевод страницы). Оно будет отображаться в отдельной карточке события по этому параметру, а также в дальнейшем его можно будет выбрать в качестве параметра в Исследованиях. А вот параметр события укажите точно такой же, как вы написали для тега GA4 в Google Tag Manager выше. В моем примере - это translation_lаng. Область действия - Событие:

Специальный параметр

Примечание: о том, какие еще можно создать специальные параметры в вашем счетчике GA4 после его установки, читайте в этой статье.

Сохраните изменения. На этом настройки отслеживания для Google Analytics 4 завершены.

Создание тега Яндекс.Метрики

Для отправки данных о переводе страницы в Яндекс.Метрику я предлагаю использовать отдельное JavaScript-событие, и вместе с ним передавать значения языков как параметр визита. Статистику по языкам переводов вы будете видеть в отчете Параметры визитов (Отчеты - Содержание):

Отчет "Параметры визитов"

Чтобы реализовать данную настройку, перейдите в Яндекс.Метрике в разделе Цели и создайте цель типа JavaScript-событие. Назначьте событию произвольный идентификатор цели (например: page_translation) и скопируйте итоговый код цели из интерфейса Метрики:

Пример настройки JavaScript-события

Вернитесь в диспетчер тегов Google и создайте тег типа Пользовательский HTML. Вставьте в него вашу скопированную в теге <script></script>, чтобы получилось так:

Конструкция JavaScript-события без параметра визита

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

, где:

  • translation_lang - название параметра визита;
  • {{DOM - language}} - пользовательская переменная, значение языка перевода из атрибута lang.

В Google Tag Manager:

Конструкция JavaScript-события с параметром визита

Вместо {{DOM - language}} вам необходимо использовать имя вашей собственной переменной, которую вы создали его на предыдущем шаге. Если вы все делали так, как я описывал в этой статье, то ваша пользовательская переменная тоже будет так называться.

В качестве триггера активации задайте тот же самый триггер видимости элемента, используемый и во всех остальных тегах. Итоговая конфигурация тега Яндекс.Метрики со всеми настройками будет иметь вид:

Итоговая конфигурация тега Яндекс.Метрики

Сохраните тег.

Режим отладки

Теперь можно перейти к проверки корректности отслеживания. Для этого используйте режим предварительного просмотра Google Tag Manager. Перейдя на страницу, осуществите ее перевод. Я переведу страницу своего блога с русского на английский язык:

Перевод страницы блога с русского на английский язык

После этого в режиме отладки вы должны увидеть сработанное событие Element Visibility и ваши активированные теги Google Analytics и Яндекс.Метрики.

Зарегистрированное событие и активированные теги

Кликнув на один из них, вы должны увидеть код языка из атрибута lang, который отправляется вместе с этим событием. Поскольку я перевел страницу с русского на английский, то в параметр события GA4 передалось значение en:

Информация о теге и переданном параметре события

В инструменте DebugView вы также должны увидеть соответствующее событие и параметр события:

Параметр события в DebugView

Остальные теги проверяются аналогичным способом. Для отладки Яндекс.Метрики вы можете использовать расширение для браузера Yandex Metrica Debugger. В завершение не забудьте опубликовать контейнер GTM с изменениями.

Отчеты

Для Google Analytics 4 вы можете использовать:

  • отчет События в разделе Взаимодействие;
  • Исследования в свободной форме с параметром события.

Вы можете даже дополнительно добавить параметр Город и Страна, чтобы увидеть, из какого региона был осуществлен период. В связи с текущими событиями в мире многие люди сменили свое местоположение, находятся в других странах, но используют свой родной язык. В этом случае очень интересно посмотреть распределение тех пользователей, кто заходит на ваш сайт с VPN или из другого места и на какой язык переводят страницы сайта.

Пример таблицы Исследования с городом и страной

Для Google Analytics 3 вы можете использовать:

Для Яндекс.Метрики используйте отчет Параметры визитов в разделе Содержание, а также количество достигнутых целей в разделе Конверсии.

Обновление отслеживания

Когда вы или ваши пользователи переводят страницу в Google Chrome, ваши предпочтения о языке могут сохраняться при переходе от странице к странице того же веб-сайта. При вышеописанном отслеживании событие с переводом страницы будет запускаться при каждом таком просмотре страницы, то есть по сути будут отправляться дубли данных в аналитику о языке перевода для одного и того же пользователя.

Чтобы это предотвратить, вы можете добавить дополнительное условие для триггера, основанное на файлах cookie. Для этого создайте новую пользовательскую переменную типа Собственный код JavaScript с названием CJS - Create cookie и вставьте в нее нижеприведенный код:

В Google Tag Manager это выглядит так:

Переменная "Собственный код JavaScript"

Затем добавьте новый тег типа Пользовательский HTML, который будет устанавливать файл cookie с именем gtm_translation_used при срабатывании первого события перевода. Поскольку срок жизни файла cookie не задается, она будет удаляться по завершении сеанса пользователя.

Скопируйте этот код и вставьте его в тег:

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

Пользовательский HTML-тег

Теперь нужно задать дополнительное условие, чтобы один и тот же триггер видимости элемента срабатывал только тогда, когда значение файла cookie равно true. Создайте пользовательскую переменную типа Собственный файл cookie с названием переменной и cookie gtm_translation_used:

Кука gtm_translation_used

Эта переменная вернет значение данного файла cookie (если оно существует).

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

gtm_translation_used не равно true

Когда наш файл cookie будет содержать значение true, событие перевода страницы не сработает. Такое значение для файла cookie устанавливается только при запуске первого события перевода и удаляется после завершения посещения. Таким образом, для одного пользователя и его конкретного сеанса в случае перевода страницы будет передаваться одно значение языка - первое.

Проверить установку файла cookie для вашего браузера можно с помощью консоли разработчика, перейдя на вкладку Application - Cookies и введя в поиске gtm_translation_used:

gtm_translation_used - true

Если файл cookie для вашего браузера уже установлен (значение true), то никакие события перевода страницы не должны запускаться в рамках того же сеанса.

С новым условием активации триггера видимости элемента событие будет запускаться один раз, до того, как у пользователя в браузере будет установлена кука gtm_translation_used со значением true. Именно с первым событием в аналитику будет отправлен язык перевода. Затем в браузере пользователя создастся кука gtm_translation_used со значением true. Она будет препятствовать повторному срабатыванию триггера Element Visibility и активации аналитических тегов. Она будет удалена из браузера пользователя после окончания сессии.

В Исследовании Google Analytics 4 вы можете добавить еще один параметр Путь к странице и класс экрана, чтобы видеть URL-страницы, для которой был осуществлен перевод.

Путь к странице и класс экрана в таблице Исследования

Для Universal Analytics в отчете используйте параметр Страница, а для тега Яндекс.Метрики вместе с одним параметром визита передавать еще и URL-адрес с помощью встроенной переменной Google Tag Manager Page URL:

Резюме

Отслеживание перевода страниц в браузере Google Chrome с помощью Google Tag Manager - очень интересное и нетривиальное решение, позволяющее отправлять события в Яндекс.Метрику и Google Analytics всякий раз, как пользователь на вашем сайте переводит страницу. Благодаря такой настройке, вы можете узнать, какой контент читают пользователи на вашем сайте с помощью перевода страниц, на каких языках и из каких регионов, городов и стран.

Да, это решение основано на переводе страниц из браузера Google Chrome. Но пользователи могут пользовать и другими - Firefox, YaBrowser, Edge, Brave, Safari, Opera и т.д. Правда не у всех них есть встроенный функционал перевода страниц на другие языки. По данным SimilarWeb (по состоянию на сентябрь 2022 года) доля рынка Chrome во всем мире составляет более 60%, в России - 58%. Эти данные косвенно подтверждаются и статистикой моего блога, где доля активных пользователей, посещающих сайт osipenkov.ru из Google Chrome, составляет 77%.

Доля рынка браузеров (по сост. на сентябрь 2022 г., весь мир, SimilarWeb)

Таким образом, отслеживая перевод страниц в Chrome, можно сказать, что вы фиксируете все возможные отслеживания для своего сайта, а незначительной долей переводов из других браузеров просто пренебрегаете.

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

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