+7 (8442) 50-01-34 mail@mellodesign.ru
Начните работать с нами
Оставьте заявку

Call Tracking из подручных средств за 10 минут

Как отследить все входящие и пропущенные звонки из рекламных источников, имея всего лишь один дополнительный номер телефона? Инструкция по созданию бесплатного CallTracking своими руками!

28 апреля 2016

Вы запускаете рекламные кампании и уже в первый месяц задумаетесь о рентабельности. Желание отслеживать эффективность каналов, по которым клиенты приходят на сайт, ― естественное, если даже не витальное. Решение давно придумано, и оно исправно работает ― да, речь пойдёт о колл-трекинге. 

Если у вас есть лишний телефонный номер (мобильный или городской, ― не так важно) и желание сэкономить, мы поможем настроить колл-трекинг своими руками. Сделать это можно крайне быстро!

Логика работы колл-трекинга

  • Устанавливаем на сайт Google Tag Manager (ГТМ) и Google Analytics (ГА).
  • Размечаем контекстную рекламу utm-метками.
  • Создаём в ГТМ правило для определения utm-меток.
  • Создаём скрипт подмены телефонного номера при наличии в адресе utm-метки.
  • Пишем скрипт, который создаёт в cookie (куки) нашу запись.
  • Создаём скрипт для чтения куки и замены номера телефона в дальнейшем.
  • Человек, принимающий звонок с подменного номера, отправляет данные о звонке в ГА.

Google Tag Manager

Для начала устанавливаем контейнер ГТМ на сайт.

Внедряем код Google Tag Manager после открывающего тега <body> на все страницы сайта.

В этом нет ничего сложного, но если вы ранее подобным не занимались, ― рекомендую сначала прочитать справку

Google Analytics

Пункт необязателен, если контейнер ГА уже установлен на сайте, но лучше сделать так, как написано ниже.

Создаём тег ГА в ГТМ:

На панели слева выбираем меню «Теги» и нажимаем кнопку «Создать».

Применяем настройки как на изображении внизу, указав идентификатор отслеживания.

Разметка ссылок

В рассматриваемом примере отслеживается один канал. Для удобства, ко всем конечным URL рекламных объявлений добавим всего одну метку:
мойсайт.рф?utm_medium=cpc,
где medium ― тип канала, а срс ― маркер для контекста.

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

В ГТМ открываем меню триггеров и создаём новый, назвав его «Страница содержит метку срс»:

В качестве события и типа триггера выбираем «Просмотр страницы»:

И ставим условие: Page URL содержит utm_medium=cpc.

Подмена номера

В рассматриваемом примере номер выглядит так:

и вот так:

Для подмены создадим новый тег в ГТМ:

Назовём его «Смена номера».

В выборе продукта выбираете «Пользовательский HTML», в поле ввода кода записываете скрипт:
<script>

$('.phone').text('+7 777 777-77-77');

</script>

В условиях активации нажмите на кнопку «Ещё» и проверьте ранее созданный триггер:

Сохраняем. Теперь, если человек придёт из рекламы, он увидит изменённый номер:

Но если пользователь перейдёт на другую страницу, то там он увидит оригинальный номер, так как URL не будет содержать utm-метку. Поэтому в этот же тег «Смена номера» добавляем второй скрипт, записывающий в куки немного информации.

Запись в cookie

Просто добавим в поле ввода кода созданного выше тега новый скрипт:

<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>
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.

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

Открываем в ГА отчёты в реальном времени по событиям, кликаем на кнопку «Звонок был» и видим успешную передачу события.

Далее, настраиваем цель и смотрим, сколько стоит привлечение одного такого звонка из контекста.

Заключение

Описанный выше способ работает и прост во внедрении. Замена номера происходит ни чуть не медленнее, чем у известных систем колл-трекинга. Все изменения в код легко вносить и оценивать благодаря встроенному отладчику ГТМ. Вам не нужно создавать .js-файлы и загружать их на хостинг, — работайте в одной среде. Вы всегда сможете масштабировать данный пример под прочие нужды, например, собирать данные о clientID и приветствовать на сайте тех пользователей, которые вам звонили. И это бесплатно. Этот алгоритм настройки отслеживания звонков подойдёт всем, кто не спешит глубоко вникать в аналитику или пока не решился на увеличение бюджетов для привлечения новых клиентов. Имея всего лишь дополнительный мобильный номер, вы сможете отследить все входящие и пропущенные звонки из контекста, узнать их длительность, выделить те, которые привели к продаже.