Скрипт Аллока.ру для размещения на сайте



Содержание

 

  1. Описание основных возможностей
    1. Как получить код для сайта?
  2. Описание кода Alloka и его дополнительных возможностей
    1. Минимальный код
    2. Структура кода
    3. Дополнительные возможности
      1. Задание нескольких объектов отслеживания
      2. Назначение нескольких классов для одного объекта
      3. Форматирование отображения телефонного номера
      4. Игнорирование Type-in трафика
      5. Передача собственных данных о звонке
  3. Часто задаваемые вопросы
    1. Что нужно для работы скрипта Alloka?
    2. Не замедлит ли код Alloka работу сайта?

I Описание основных возможностей

В данной статье описаны основные возможности, которые предоставляет JavaScript-скрипт Alloka.ru.

Основное назначение данного скрипта — подмена прямого номера, размещенного на сайте, на трекинговый номер для отслеживания звонков.

 

I.1 Как получить код для сайта?

 

На втором шаге регистрации объекта в личном кабинете выдается стандартный код для размещения на сайте. После активации тарифа и того, как код будет размещён в коде сайта, начнёт работать подмена номера для отслеживания звонков. Выданный системой Alloka код необходимо добавить в код Вашего сайта внутри тега <head> или <body>.

Снимок экрана 2015-06-22 в 10.11.56

II Описание кода Alloka и его дополнительных возможностей

 

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

 

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

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

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

 

 

II.2 Структура кода

 

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

1) Параметры (идентификаторы сайтов, классы тегов для подмены номера и прочее). Данную часть кода можно изменять и настраивать.

2) Подключение скрипта Alloka.ru с нашего сервера. Изменение этой части кода может привести к нарушении работоспособности подмены номеров. Поэтому этого делать не рекомендуется.

II.3 Дополнительные возможности

Скрипт Alloka предоставляет различные дополнительные возможности для более точной настройки подмены телефонного номера. Все настройки располагаются в первой части кода Alloka. Ниже представлены все возможности нашего скрипта:

<script>
// Все параметры подмены номера должны содержаться в глобальной переменной _alloka.
    var _alloka = {
        // В поле objects задаются объекты отслеживания звонков
        objects: {

           // Ключами массива objects должны быть идентификаторы ваших объектов отслеживания
            'ИДЕНТИФИКАТОР_ВАШЕГО_ОБЪЕКТА_НОМЕР_1': {
                // В поле block_class необходимо указывать класс, которым будут помечаться HTML-теги,
                // в которых будут отображаться телефонный номер
                block_class: 'phone_alloka',
                // В поле format вводится предпочитаемый формат отображения телефонного номера
                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>

 

II.3.a Задание нескольких объектов отслеживания

В некоторых случаях возникает необходимость подмены нескольких разных телефонных номеров на одной странице. Например, если у Вас разные номера в разных городах. Для этого Вам необходимо добавить несколько объектов в личном кабинете Alloka.ru и указать их идентификаторы в коде на Вашем сайте.

Допустим, Вы создали один объект для московского номера и один объект петербуржского номера. Пример задания нескольких объектов отслеживания.

Под каждый новый телефон нужно создавать новый объект.

И в js коде писать так:
objects: {
     'ID1': {
          block_class: 'phone_alloka'
     },
     'ID2': {
          block_class: 'phone_alloka2'
     }
}

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

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

II.3.b Назначение нескольких классов для одного объекта

Временами может возникнуть необходимость отображение предоставленного Alloka номера в несколько разных блоков на вашем сайте. Может сложиться ситуация, когда вам неудобно задавать всем блокам один класс. Вы можете передать скрипту Alloka несколько классов для отображения номера в нужные блоки.

Вы можете указывать неограниченное количество классов блоков, в которые желает отображать телефонный номер.

 

II.3.c Форматирование отображения телефонного номера

По умолчанию, Alloka отображает номер в формате +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}'.

Также вы можете использовать необходимые вам HTML-теги для форматирования отдельных частей номера. Например, '<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 (#{XXX}) #{XXX}-#{XX}-#{XX}'
8 800 999 88 55:
format: '8 #{XXX} #{XXX} #{XX} #{XX}'
(495) 123-45-67:
format: '<small>(#{XXX})</small> #{XXX}-#{XX}-#{XX}'
(8342) 24-24-24:
format: '(#{XXXX}) #{XX}-#{XX}-#{XX}'

II.3.d Игнорирование Type-in трафика

Параметр trackable_source_types даёт возможность выбрать типы отслеживаемых источников.

 

Данный параметр принимает три возможных значения:

  1. typein — прямые заходы на вашу страницу;
  2. referrer — переходы по ссылкам с других страниц.
  3. 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>

II.3.e Передача собственных данных о звонке

У вас может возникнуть необходимость пересылать какие-либо данные, которые будут прикрепляться к каждому звонку. Для этого вам нужно задать их в параметре 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')}

 

К содержанию

 

III Часто задаваемые вопросы

 

III.1 Что нужно для работы скрипта Alloka?

Наш скрипт написан на чистом JavaScript без использования каких-либо дополнительных библиотек. Это означает, что для работы нашего скрипта вам не потребуется подключать ничего, кроме нашего кода. Кроме того, скрипт Alloka не вызовет конфликтов с уже присутствующим у вас на сайте библиотеками.

 

III.2 Не замедлит ли код Alloka работу сайта?

Минимальный код для подмены номера от Alloka занимает 8 строк текста. Для лэндинг-страницы достаточно 1 строки текста. Подключаемый скрипт Alloka имеет совсем небольшой объём — 6.9 килобайт. Данный объём данных не окажет существенного влияния на скорость загрузки Вашего сайта даже при медленном интернет-соединении.

 

К содержанию

 

 

Если у вас остались вопросы по установке и настройке нашего скрипта, напишите нам на электронный адрес. Мы с радостью ответим на все ваши вопросы.