Код трекинга подробно: параметры скрипта Аллоки

Начало работы

Справочник по JavaScript-коду Аллоки: из чего он состоит и какие параметры можно в нём настроить. Главная задача скрипта — заменить номер, размещённый на сайте, трекинговым, чтобы отслеживать звонки. Короткая инструкция по установке — в статье «Код трекинга».

Как получить код для сайта

Стандартный код выдаётся в личном кабинете на втором шаге создания объекта. Добавьте его в код сайта внутри тега <head> или <body>. Подмена номера заработает, когда тариф будет активирован, а код — размещён на сайте.

Минимальный код

Минимум, который нужен на сайте для отслеживания звонков:

<script>
var _alloka = {
  objects: {
    'ИДЕНТИФИКАТОР_ВАШЕГО_САЙТА': {}
  }
};
</script>

ИДЕНТИФИКАТОР_ВАШЕГО_САЙТА — уникальный идентификатор, который генерируется автоматически при добавлении сайта в личном кабинете.

Структура кода

Код состоит из двух частей:

Параметры — идентификаторы объектов, классы тегов для подмены номера и прочее. Эту часть можно менять и настраивать.
Подключение скрипта Аллоки с нашего сервера. Эту часть менять не рекомендуется: подмена номеров может перестать работать.

Все параметры скрипта

Все настройки задаются в первой части кода, в глобальной переменной _alloka. Пример со всеми возможностями:

<script>
// Все параметры подмены номера должны содержаться в глобальной переменной _alloka.
var _alloka = {
  // В поле objects задаются объекты отслеживания звонков
  objects: {
    // Ключи — идентификаторы ваших объектов отслеживания
    'ИДЕНТИФИКАТОР_ВАШЕГО_ОБЪЕКТА_НОМЕР_1': {
      // Класс HTML-тегов, в которых будет отображаться номер телефона
      block_class: 'phone_alloka',
      // Формат отображения номера телефона
      format: '+7 (#{XXX}) #{XXX}-#{XX}-#{XX}'
    },
    // Можно задать несколько объектов отслеживания
    'ИДЕНТИФИКАТОР_ВАШЕГО_ОБЪЕКТА_НОМЕР_2': {
      // Одному объекту можно задать несколько классов
      block_class: ['phone_alloka_2', 'one_more_class'],
      // В формате можно заменить +7 на 8 и использовать HTML-теги
      format: '<small>8 (#{XXX})</small> #{XXX}-#{XX}-#{XX}'
    }
  },
  // Данные из custom_data сохраняются в информации о звонке
  custom_data: {
    my_var: 'Hello, World!',
    page_title: 'Примерный текст'
  },
  trackable_source_types: ['referrer', 'utm', 'typein']
};
</script>

Несколько объектов отслеживания на одной странице

Иногда на одной странице нужно подменять несколько разных номеров — например, если у вас разные номера в разных городах. Для каждого номера создайте отдельный объект в личном кабинете и укажите идентификаторы всех объектов в коде.

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

<script>
var _alloka = {
  objects: {
    'ИДЕНТИФИКАТОР_ОБЪЕКТА_МОСКОВСКОГО_НОМЕРА': {
      block_class: 'moscow_number'
    },
    'ИДЕНТИФИКАТОР_ОБЪЕКТА_ПЕТЕРБУРГСКОГО_НОМЕРА': {
      block_class: 'petersburg_number'
    }
  }
};
</script>

Так вы получите статистику звонков отдельно по каждому номеру.

Несколько классов для одного объекта

Если номер нужно показать в нескольких блоках сайта и задавать им всем один класс неудобно, передайте скрипту список классов: block_class: ['phone_alloka_2', 'one_more_class']. Количество классов не ограничено.

Формат отображения номера

По умолчанию Аллока показывает номер в формате +7 (999) 999-99-99. Можно задать любой другой: +7 999 999 9999, 8-999-999-99-99, 8-999-99-99-999 — и использовать HTML-теги. Так номер сохранит привычный вид на странице.

Маска по умолчанию — '+7 (#{XXX}) #{XXX}-#{XX}-#{XX}'. Скрипт выводит 10 цифр номера без кода страны (например, 9876543210) и по очереди подставляет их в блоки вида #{XXX}, где каждый X — одна цифра.

Количество блоков и цифр в них можно менять: '+7 (#{XXX}) #{XXX}-#{XXXX}'.
Код страны можно заменить или убрать: '8 (#{XXX}) #{XXX}-#{XXXX}'.
Отдельные части номера можно обернуть в теги: '<span class="small">+7 (#{XXX})</span> #{XXX}-#{XXXX}'.

Формат задаётся свойством format у объекта:

<script type="text/javascript">
var _alloka = {
  objects: {
    'ИДЕНТИФИКАТОР_ОБЪЕКТА': {
      block_class: 'phone_alloka',
      format: '+7 (#{XXX}) #{XXX}-#{XX}-#{XX}'
    }
  },
  trackable_source_types: ['referrer', 'utm']
};
</script>
<script src="//analytics.alloka.ru/v4/alloka.js" type="text/javascript"></script>

Примеры форматов:

Как выглядит номер	Значение `format`
+7 (999) 999-99-99 (стандартный)	`'+7 (#{XXX}) #{XXX}-#{XX}-#{XX}'`
8 800 999 88 55	`'8 #{XXX} #{XXX} #{XX} #{XX}'`
(495) 123-45-67	`'<small>(#{XXX})</small> #{XXX}-#{XX}-#{XX}'`
(8342) 24-24-24	`'(#{XXXX}) #{XX}-#{XX}-#{XX}'`

Как отключить подмену при прямых заходах

Параметр trackable_source_types задаёт, для каких типов источников работает подмена:

typein — прямые заходы на страницу;
referrer — переходы по ссылкам с других страниц;
utm — переходы по ссылкам с UTM-метками с других страниц, из писем, приложений и т. д.

С таким кодом номер не будет подменяться при прямых заходах:

<script type="text/javascript">
var _alloka = {
  objects: {
    'ИДЕНТИФИКАТОР_ОБЪЕКТА': {
      block_class: 'phone_alloka'
    }
  },
  trackable_source_types: ['referrer', 'utm']
};
</script>
<script src="//analytics.alloka.ru/v4/alloka.js" type="text/javascript"></script>

Передача своих данных о звонке

Чтобы прикреплять к каждому звонку собственные данные — например, внутренний идентификатор пользователя, — задайте их в параметре custom_data:

<script>
var _alloka = {
  objects: {
    'ИДЕНТИФИКАТОР_ВАШЕГО_САЙТА': {}
  },
  custom_data: {
    my_var: 'Hello, World!',
    page_title: 'Примерный текст'
  },
  trackable_source_types: ['typein', 'referrer', 'utm']
};
</script>

Можно передать и массив: custom_data: ["Мои", "данные"].

Пример для сайта с подключённым Roistat — передача идентификатора визита:

custom_data: {'roistat': $.cookie('roistat_visit')}

Частые вопросы

Что нужно для работы скрипта Аллоки?

Ничего, кроме нашего кода. Скрипт написан на чистом JavaScript без сторонних библиотек и не конфликтует с библиотеками, которые уже есть на сайте.

Не замедлит ли код Аллоки работу сайта?

Минимальный код подмены номера занимает 8 строк, для лендинга достаточно одной строки. Сам подключаемый скрипт весит около 6,9 КБ — это не повлияет заметно на скорость загрузки даже при медленном интернете.

Остались вопросы по установке и настройке скрипта — напишите на support@alloka.ru.