IP-телефония – чудесный инструмент контроля и аналитики. Одним из возможностей такой аналитики является динамический Call-tracking.
Если вы запускаете рекламные кампании, то, с высокой долей вероятности, в первый же месяц задумаетесь о рентабельности. Желание отслеживать эффективность каналов, по которым клиенты приходят на сайт, – естественное, если даже не витальное.
Как работает динамический Call-tracking?
Принцип работы предельно прост: каждый пользователь, который попадает на ваш сайт, видит определенный телефонный номер. Номер закрепляется за браузером (или аккаунтом браузера) пользователя, и, при дальнейших посещениях, пользователь видит ранее показанный номер, причем номер будет подставляться на все страницы вашего сайта. Вы можете настроить отображение разных номеров для различных рекламных каналов, поисковых запросов и так далее.
Динамическая подмена номеров также работает и на мобильных устройствах, что сегодня особенно актуально, – около 30% трафика на сайт приходит с планшетов и мобильных телефонов. При нажатии на подменный телефонный номер на сайте, можно активировать набор номера с мобильного устройства.
Отличие динамического call-tracking'а от статического
Динамический call-tracking оптимизирован для контроля всех видов онлайн-рекламы. Если же вы захотите отслеживать эффективность брошюр, листовок, билбордов, рекламы в лифтах, журналах, или в других оффлайн-каналах, – необходимо использовать статический call-tracking. В таком случае телефонный номер, указанный в рекламном носителе, будет закреплен за данным каналом, а в дальнейшем, если пользователь вернется на сайт и совершит повторный звонок, то в связке с динамическим call-tracking'ом, вы будете иметь полную картину. Другими словами, комбинация динамического и статического call-tracking'а дают полную статистическую картину, необходимую для анализа и прогнозов в отрасли маркетинга.
Для корректной работы любого call-tracking'а обязательным условием является обеспеченность необходимым количеством городских номеров. Для пользователей наших «облачных» продуктов мы предоставляем номера и связь в Хабаровске – совершенно бесплатно, а также мы можем предоставить необходимое количество телефонных номеров в 46 городах России.
Настройка и логика работы динамического Call-tracking'a
- Устанавливаем на сайт Google Tag Manager (ГТМ) и Google Analytics (ГА)
- Размечаем контекстную рекламу utm-метками
- Создаём в ГТМ правило для определения utm-меток
- Создаём скрипт подмены телефонного номера при наличии в адресе utm-метки
- Пишем скрипт, который создаёт в cookie (куки) нашу запись
- Создаём скрипт для чтения куки и замены номера телефона в дальнейшем
- Человек, принимающий звонок с подменного номера, отправляет данные о звонке в ГА
Google Tag Manager
Для начала устанавливаем контейнер ГТМ на сайт:
Внедряем код Google Tag Manager после открывающего тега на все страницы сайта:
В этом нет ничего сложного, но если вы ранее подобным не занимались, – рекомендуем сначала прочитать справку.
Google Analytics
Пункт необязателен, если контейнер ГА уже установлен на сайте, но лучше сделать так, как написано ниже.
Создаём тег ГА в ГТМ. На панели слева выбираем меню «Теги» и нажимаем кнопку «Создать»:
Применяем настройки как на изображении внизу, указав идентификатор отслеживания:
Разметка ссылок
В рассматриваемом примере отслеживается один канал. Для удобства, ко всем конечным URL рекламных объявлений добавим всего одну метку:
где medium – тип канала, а срс – маркер для контекста.
Правило определения меток в URL
В ГТМ открываем меню триггеров и создаём новый, назвав его «Страница содержит метку срс»:
В качестве события и типа триггера выбираем «Просмотр страницы»:
И ставим условие: Page URL содержит utmmedium=cpc.
Подмена номера
В рассматриваемом примере номер выглядит так:
и вот так:
Для подмены создадим новый тег в ГТМ:
Назовём его «Смена номера»:
В выборе продукта выбираете «Пользовательский HTML», в поле ввода кода записываете скрипт (перед тегом script и закрывающим тегом не забудьте удалить пробел):
< script>
$('.phone').text('+7 777 777-77-77');
< /script>
В условиях активации нажмите на кнопку «Ещё» и проверьте ранее созданный триггер:
Сохраняем. Теперь, если клиент придёт из рекламы, он увидит изменённый номер:
Но если пользователь перейдёт на другую страницу, то там он увидит оригинальный номер, так как URL не будет содержать utm-метку. Поэтому в этот же тег «Смена номера» добавляем второй скрипт, записывающий в куки немного информации.
Запись в cookie
Просто добавим в поле ввода кода созданного выше тега новый скрипт (перед тегом script и закрывающим тегом не забудьте удалить пробел):
< script>
function set_cookie ( name, value, exp_y, exp_m, exp_d)
{
var cookie_string = name + "=" + escape ( value );
if ( exp_y )
{
var expires = new Date ( exp_y, exp_m, exp_d );
cookie_string += "; expires=" + expires.toGMTString();
}
document.cookie = cookie_string;
}
var name="change_phone"; // тут пишем имя для куки
var value="cpc";// тут пишем значение
var current_date = new Date;
var cookie_year = current_date.getFullYear ( ) + 1;
var cookie_month = current_date.getMonth ( );
var cookie_day = current_date.getDate ( );
set_cookie(name,value,cookie_year, cookie_month, cookie_day);
< /script>
Код работает! Он описывает функцию установки куки set_cookie, затем вызывает её и подставляет в куки значения, указанные нами в строках:
var name="change_phone";
var value="cpc";
Теперь браузер будет запоминать всех посетителей, пришедших из рекламы. Срок хранения куки – 1 год. Если убрать из кода строки, описывающие запись даты в куки, то куки будет храниться в течение сеанса. В консоли вы увидите установленную запись:
Чтение cookie
Добавляем новый тег, по аналогии с тегом «Смена номера», создание которого было описано выше, но в условии активации выбираем «Все страницы». В примере он назван «Смена номера на всех»:
Добавляем в тег скрипт, который получает значение куки, и, если оно нас устраивает, – подменяет номер на всех страницах сайта (перед тегом script и закрывающим тегом не забудьте удалить пробел):
< script>
function get_cookie ( cookie_name )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
return ( unescape ( results[2] ) );
else
return null;
}
var x = get_cookie ("change_phone"); //Пишем имя куки
if(x=="cpc") {//Пишем значение куки
$('.phone').text('+7 777 777-77-77');}
< /script>
Здесь функция get_cookie будет искать нашу строку куки среди всех записей и сравнивать с тем, что мы записывали в куки ранее. Если всё сходится, номер подменяется. При повторном заходе на сайт пользователь вновь увидит подменённый номер.
Уже на этом этапе вы сможете отслеживать телефонные звонки, и делать выводы об эффективности контекстной рекламы. Поделите рекламный бюджет на количество принятых звонков, – теперь вы знаете, во сколько рублей обходится один звонок. Если же вы хотите строить отчёты и делать выводы в различных срезах, то читаем дальше!
Передаём данные в Google Analytics
Мы рассмотрели простой случай, когда используется всего один подменный номер, и, скорее всего, IP-телефония здесь никак не привлечена: звонки принимает человек и записывает в CRM или в блокнот. Этому человеку некогда вникать в импорт данных или протокол передачи данных, поэтому – создадим на сайте новую страницу (посетителям лучше не говорить о ней), и размещаем там одну кнопку «Звонок был». Попросим нашего человека нажимать на неё при поступлении звонка на подменный номер:
Вешаем на эту кнопку событие ГА, пример: ga(‘send’,’event’,’Звонок’,’был’); или создаём новый тег в ГТМ, который будет отправлять данные о событии в ГА при нажатии на кнопку. Для этого тега создаём новый триггер, – клик по кнопке «Звонок был». Подсматриваем код кнопки:
Создаём триггер с условием активации Click ID содержит call_button:
Добавляем тег для отправки события о звонке и открываем в ГА отчёты в реальном времени по событиям, кликаем на кнопку «Звонок был» и видим успешную передачу события:
Далее – настраиваем цель и смотрим, сколько стоит привлечение одного такого звонка из контекста.
Заключение
Описанный способ работает и прост во внедрении. Замена номера происходит ничуть не медленнее, чем у известных систем call-tracking'а, все изменения в код легко вносить и оценивать, благодаря встроенному отладчику ГТМ. Вам не нужно создавать .js-файлы и загружать их на хостинг, – работайте в одной среде. Вы всегда сможете масштабировать данный пример под прочие нужды, например, собирать данные о clientID и приветствовать на сайте тех пользователей, которые вам звонили. И это бесплатно(!)
В статье использованы материалы с сайта mellodesign.ru
