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

A A A

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

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

Зачем нужен тег «Пользовательское изображение»  — короткий ответ

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

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

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

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

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

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

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

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

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

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

gtm-custom-image-config

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

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

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

С точки зрения пользователя, это очень круто. С точки зрения интернет-маркетологов и веб-аналитиков — не совсем.

Если отключить галочку параметра «Блокировка кэша», тег «пользовательское изображение» сработает только при первой загрузке сайта, т.к. изображение будет загружено во временное хранилище.

Google Tag Manager предлагает простое и изящное решение этой проблемы — он добавляет к адресу изображения еще один параметр, значение которого генерируется каждый раз динамически. И поэтому URL изображения будет выглядеть так:

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

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

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

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

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

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

gtm-custom-image-js-variable

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

gtm-custom-image-trigger-noscript

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

gtm-custom-image-tag

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

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

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

gtm-custom-image-test

Заключение

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

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.