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

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

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

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

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

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

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

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

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

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

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

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

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

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

• URL изображения - поле, где содержится адрес изображения со всеми параметрами, которые нужно передать.


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

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

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

https://example.com/adress?param1=value1&param2=value2&gtmcb=1561571983

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

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

<noscript><img height="1" width="1" style="display:none"

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

	/></noscript>

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

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

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

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

function() {

	return true;

	}

	

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

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

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

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

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

Вывод

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