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

17 апреля, 2021

Простое, но рабочее решение от Дэвида Вальехо (David Vallejo), позволяющее отследить намерение пользователя распечатать контент ваших страниц с помощью Google Tag Manager.

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

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

Контекстное меню - Печать

Или когда использует сочетание клавиш Ctrl+P на странице (в Windows):

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

Предварительный просмотр перед печатью

Все, что необходимо сделать, это вставить нижеприведенный код в тег типа Пользовательский HTML:

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

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

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

В качестве триггера активации лучше задать Модель DOM готова (DOM Ready). Сохраните изменения.

Принцип действия скрипта такой: после того, как пользователь одним из описанных выше способов откроет в браузере предварительный просмотр печати, сработает событие onBeforePrint. Его можно использовать для триггера активации других тегов аналитики, и отправлять это действие, например, в Google Analytics или Яндекс.Метрику. Кроме того, на уровне данных (dataLayer) будет доступна переменная currentURL, которая возвращает URL-страницы, контент которой намеревались распечатать.

Для проверки отслеживания проще всего воспользоваться режимом отладки диспетчера тегов Google. Запустив его, вызовите диалог печати. На шкале событий в режиме предварительного просмотра должно отобразиться событие onBeforePrint:

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

Событие onBeforePrint

Так как в примере я вызвал данное окно на странице https://osipenkov.ru/ga4-all/, в переменной currentURL отобразилось значение /ga4-all/. Событие срабатывают, данные фиксируются. Теперь вы можете создать триггер типа Специальное событие с названием события onBeforePrint:

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

Специальное событие onBeforePrint

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

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

Переменная currentURL

Сохраните изменения. Теперь вы можете создать тег, например, для Google Analytics, чтобы передать это событие в отчеты аналитики. Он может выглядеть так:

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

Тег Universal Analytics

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

Повторная проверка в режиме отладке:

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

Повторная проверка в режиме отладке, но уже с активацией тега и переменной currentURL в ярлыке

Теперь вы можете проверить передачу данных в Universal Analytics в отчете В режиме реального времени:

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

В режиме реального времени

Как видно в Real-Time, все корректно передается. Через некоторое время данные о совершенных событиях пользователей будут отображаться в разделе Поведение – События – Лучшие события.

Для Google Analytics 4 (GA4) тег отслеживания может выглядеть так:

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

Тег "Событие GA 4"

Название события можно задать произвольное (в моем примере - printing). В качестве название параметра я выбрал currentURL, поскольку переменнную уровня данных создал с аналогичным названием на предыдущем шаге. Триггер активации - тот же onBeforePrint. Сохраните изменения.

С помощью DebugView можно проверить передачу данных в Google Analytics 4.

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

DebugView в Google Analytics 4

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

Для Яндекс.Метрики следует выбрать тег типа Пользовательский HTML и вставить конструкцию, которая будет вам предложена в интерфейсе самой Метрики, когда вы будете создавать цель типа JavaScript-событие после ввода идентификатора цели:

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

Цель в Яндекс.Метрике

Вы просто копируете код цели для сайта и вставляете в тег, заключая данную строчку тегом <script></script> как показано ниже:

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

Тег для Яндекс.Метрики

Триггер активации - onBeforePrint без изменений. Сохраните тег и опубликуйте контейнер. На этом все!

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

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