Лайфхак: Делаем Call Tracking из подручных средств за 10 минут

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

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

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

Устанавливаем на сайт 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», в поле ввода кода записываете скрипт:

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

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

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

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

Запись в cookie

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

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);

Код работает! Он описывает функцию установки куки set_cookie, затем вызывает её и подставляет в куки значения, указанные нами в строках.

var name="change_phone";
var value="cpc";

Теперь браузер будет запоминать всех посетителей, пришедших из рекламы. Срок хранения куки 1 год. Если убрать из кода строки, описывающие запись даты в куки, то куки будет храниться в течение сеанса. В консоли вы увидите установленную запись.

Чтение cookie

Добавляем новый тег по аналогии с тегом «Смена номера», создание которого было описано выше. Но в условии активации выбираем «Все страницы». В примере он назван «Смена номера на всех».

Добавляем в тег скрипт, который получает значение куки, и, если оно нас устраивает, — подменяет номер на всех страницах сайта:

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');
}

Здесь функция get_cookie будет искать нашу строку куки среди всех записей и сравнивать с тем, что мы записывали в куки ранее. Если всё сходится, номер подменяется. При повторном заходе на сайт пользователь вновь увидит подменённый номер.

Уже на этом этапе вы сможете отслеживать телефонные звонки, и делать выводы об эффективности контекстной рекламы. Поделите рекламный бюджет на количество принятых звонков, — теперь вы знаете во сколько рублей обходится один звонок. Если же вы хотите строить отчёты и делать выводы в различных срезах, то читаем дальше!

Передаём данные в Google Analytics

Мы рассмотрели простой случай, когда используется всего один подменный номер, и, скорее всего, IP-телефония здесь никак не привлечена. Звонки принимает человек и записывает в CRM или в блокнот. Этому человеку некогда вникать в импорт данных или протокол передачи данных. Поэтому создадим на сайте новую страницу (посетителям лучше не говорить о ней), и размещаем там одну кнопку «Звонок был». Попросим нашего человека нажимать на неё при поступлении звонка на подменный номер.

Вешаем на эту кнопку событие ГА, пример: ga(‘send’,’event’,’Звонок’,’был’); или создаём новый тег в ГТМ, который будет отправлять данные о событии в ГА при нажатии на кнопку. Для этого тега создаём новый триггер, — клик по кнопке «Звонок был». Подсматриваем код кнопки:

Создаём триггер с уловием активации Click ID содержит call_button.

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

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

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

Заключение

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