Пользовательское изображение в GTM: зачем нужно и как им пользоваться

Когда GTM приходит в вашу жизнь и превращается из интересной новинки в инструмент ежедневной работы, становится сложно не заметить в числе других тег «Аватар пользователя» (Custom Image). А когда вы его заметили, скорее всего спросили себя: зачем он нужен?

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

Зачем нужен тег «Аватар пользователя» — короткий ответ

Последнее, для чего нужно использовать тег «изображение пользователя» — собственно, добавление картинок на веб-сайт. Название тега вводит в заблуждение, на самом деле его цель — добавить скрытое изображение-пиксель с определенным адресом, по которому происходит общение с сервером.

С помощью этого тега GTM может пригласить изображение по указанному URL. Проблема в том, что URL-адрес сам по себе может содержать полезную информацию, которую можно передать на сервер. По этому принципу работают UTM-метки, а общее название — GET-параметры URL-адреса.

Пример. Когда браузер запрашивает изображения по адресу https://example.com/adress?param1=value1¶m2=value2, сервер, содержащий изображения, считывает значение value1 и value2 в параметров param1 и param2, и затем обрабатывает эти данные. В этом и кроется вся суть.

Зачем нужен этот тег, если данные можно передавать через другие теги?

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

Здесь и приходит на помощь тег «изображение пользователя». Он загружается через iFrame, который в свою очередь загружается частью GTM noscript:

1	<!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->

Если вы раньше не знали, зачем нужна эта часть кода GTM, поздравляю — вы узнали ответ и на этот вопрос.

Поля и настройки тега

Их немного, всего два URL изображения и «Включить блокировку кэша».

Все остальные настройки — стандартные для всех остальных типов тегов (приоритет срабатывания и т.д.)

URL изображения — поле, где содержится адрес изображения со всеми параметрами, которые нужно передать.
Блокировка кэша — если включить, то хиты будут регистрироваться в том числе из браузеров с изображением, кэшируется. Этот параметр лучше держать включенным, ниже вы узнаете почему.

Про параметр «Блокировка кэша»

Одна из важных причин, почему сайты загружаются относительно быстро — это кэширования. После первой загрузки сайта все статические элементы (скрипты, таблицы стилей, изображения, шрифт и т.п.) загружаются во временную папку, будет хранить их и затем показывать каждый раз при последующих загрузках страниц, на которых они содержатся. Время от времени браузер проверяет, не обновились эти файлы на стороне сервера, и при необходимости загружает их снова.
С точки зрения пользователя, это очень круто. С точки зрения интернет-маркетологов и веб-аналитиков — не совсем.
Если отключить галочку параметра «Блокировка кэша», тег «изображение пользователя» сработает только при первой загрузке сайта, так как изображение загружается во временное хранилище.
Google Tag Manager предлагает простое и изящное решение этой проблемы — он добавляет к адресу изображение еще один параметр, значение которого генерируется каждый раз динамично. И потому URL изображения будет выглядеть так:

1	https://example.com/adress?param1=value1¶m2=value2>mcb=1561571983

Какой триггер выбрать для тега «изображение пользователя»?

Возьмем для примера noscript-тег пикселя Фейсбуке:

src="https://www.facebook.com/tr?id=FB_PIXEL_ID&ev=PageView&noscript=1"

/></noscript>

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

Для этого нам понадобится один триггер и одна пользовательская переменная.

Проверка на наличие включенного JS

Создадим переменную «Собственный код JavaScript», включающий следующий код:

function() {

return true;

}

Затем создадим триггер «Просмотр страницы — некоторые просмотры страниц» и поставим условие, при котором значение созданной переменной не равно true:

Если JavaScript будет отключен, функция в переменной не сработает и не будет равна true, условие сработает и триггер активирует тег. Успех!

Как тестировать?

Прежде всего — выключить JavaScript в браузере. В Chrome, например, это можно сделать в настройках — Настройка контента.

Затем — перейти в «Инструменты разработчика» (F12), перейти во вкладку «Network» и найти там ссылку на пиксель:

Вывод

Тег «изображение пользователя» помогает отслеживать поведение пользователей там, где не работают другие теги (например, в браузерах с отключенным выполнением скриптов). Он добавляет на сайт невидимый пиксель изображения с URL-адресом специального формата с параметрами, по которым происходит передача данных к серверу. Наиболее частое применение этого тега в GTM — отслеживание посещений для пикселя ФБ, но можно найти ему и другие приложения.

Не пропустите