Обзор

    С помощью данного урока вы сможете:
  • Узнать, как нужно настроить ваши рекламные кампании для работы с коллтрекингом MANGO OFFICE
  • Правильно настроить коллтрекинг в личном кабинете MANGO OFFICE
  • Встроить коллтрекинг от MANGO OFFICE на ваш сайт










Настройка рекламных кампаний

Для правильной работы коллтрекинга необходимо придерживаться определенных правил при настройке рекламных ссылок и utm-меток. Правила касаются всей рекламы, использующей коллтрекинг, в том числе Google Adwords, Яндекс.Директ и рекламы на других ресурсах, например, vk.com, instagram.com.

Перед настройкой коллтрекинга необходимо настроить все рекламные кампании на рекламных площадках, убедиться в корректности ссылок и utm-метокна вашем сайте, в том числе ссылок с других ресурсов.

Правила следующие:

1. Обязательно используйте UTM-метки - вместо или совместно с настройкой автопометки рекламных кампаний.
Подробнее о том, что такое utm-метки и как их использовать.

2. Убедитесь, что ваши метки и ключевые слова написаны в кодировке Unicode (UTF-8). Использование других кодировок может привести к появлению нечитаемых слов в отчетах.
Подробнее.

Примечание: при создании utm - меток желательно использовать только латинские символы (для избежания проблем с кодировкой) и кодировку UTF-8.
Символы, запрещенные в utm метках: "+ ?&​" (плюс, пробел, вопрос, амперсанд).

3. Используйте статические метки utm_source и utm_campaign. Статистика рекламы выгружается с использованием точных значений этих меток. Поэтому параметры utm_source и utm_campaign должны быть прописаны явно, без использования паттернов/шаблонов.

    Примеры допустимых (статические метки) и недопустимых (динамические метки с использованием паттернов/шаблонов) настроек:
  • …utm_source={source}&...&utm_campaign={campaign_id} – недопустимо
  • …utm_source={source}&...&utm_campaign=my_camp_123 – недопустимо
  • …utm_source=yandex&...&utm_campaign=RSA|{campaign_id} – недопустимо
  • …utm_source=yandex&...&utm_campaign=my_camp – допустимо
  • …utm_source=google.adwords&...&utm_campaign=358311|MSK – допустимо
  • Подробнее.

4. Используйте метку utm_term={keyword} для передачи ключевых слов из запроса. Рекламная площадка сама ключевые слова из объявления в данную метку, и по ключевым словам можно будет посмотреть в отчетах коллтрекинга.

5. Вставляйте в URL рекламы UTM-метку только один раз — это даст точную статистику.

    Примеры:
  • …utm_source=yandex&utm_medium=cpc...&utm_source=yandex... – недопустимо, так как метка utm_source встречается два раза.
  • …utm_source=yandex&utm_source=google&utm_medium=cpc... – недопустимо, так как метка utm_source встречается два раза.
  • …utm_source=google&utm_medium=cpc&...&utm_medium=cpc... – недопустимо, так как метка utm_campaign встречается два раза.
  • …utm_source=google&utm_medium=cpc&utm_campaign=&utm_term={keyword} – допустимо, так как метки встречаются по одному разу.

Примечание: в рамках ДКТ рекламный канал можно отслеживать только с помощью utm-меток.

Настройка коллтрекинга в личном кабинете MANGO OFFICE

1. Перейдите в настройки коллтрекинга в личном кабинете MANGO OFFCIE.
Для этого в личном кабинете в разделе "Инструменты" откройте пункт "Динамический коллтрекинг".

Далее откройте вкладку "Сайты".

Выберите интересующий вас виджет, нажмите кнопку "Настройки".

2. Укажите регион для номеров коллтрекинга.

Для посетителей сайта будут отображаться только номера указанного вами города (например, Москвы).

3. Укажите номер по умолчанию.

Номер по умолчанию будет отображаться на сайте, если динамический коллтрекинг не сможет подменить номер.

4. Укажите, в каком формате необходимо отображать номер на сайте

5. Выберите каналы отслеживания.

По умолчанию при создании виджета коллтрекинга всегда создается один канал, который позволяет показывать уникальные подменные номера ВСЕМ посетителям сайта из общего динамического пула номеров.
Более подробно о гибкой настройке каналов: Инструкция

6. Выберите время закрепления номера за посетителем.

Время закрепления номера за посетителем — это время, на которое номер привязывается к конкретному посетителю сайта, в том числе после закрытия сайта. Закрепление номера продолжает работать в течение указанного времени, даже если посетитель закрыл сайт. В это время номер не может быть отображен другому посетителю и при звонке на данный номер в отчет попадет информация о посещении.

7. Включите мультирегиональность, если вы хотите показывать посетителям из других регионов их местные номера.

Выбор способа подмены номера

Код виджета для подмены номеров на сайте генерируется в Личном кабинете. Есть несколько способов подмены телефонного номера на сайте. Выбор зависит от особенностей отображения номера на вашем сайте и от того, знакомы ли вы с основами html.





У вас есть базовые знания языка html?






Алгоритм подмены номера по CSS class

Выберите «Код виджета» на странице настроек коллтрекинга. (Раздел "Сайты")

Рекомендуем использовать алгоритм "CSS класс". Данный алгоритм ищет элементы сайта с указанным классом (class), и подменяет в них номер телефона.

Кликните по пункту Замена номера по имени класса в коде.

Введите название класса номера телефона на вашем сайте или укажите наш класс "mgo-number" в тег, где находится ваш номер на сайте. Скопируйте полученный код виджета.

Теперь можно приступать к размещению кода на ваш сайт (п.4).

Определите формат номера на вашем сайте

Этот способ настроить проще всего, но он работает только при определенном формате номера телефона на вашем сайте.

1. В качестве примера мы рассмотрим сайт mango-office.ru и браузер Google Chrome. Откройте страницу https://www.mango-office.ru/support/calltracking_vs_analytics/bystryy_start_dct/razmeshchenie_koda_dkt_na_sayt/

2. В правом верхнем углу найдите номер телефона. Наведите на номер курсор мыши, кликните правой клавишей и выберите пункт "Просмотреть код".

Перед вами откроется код сайта и выделится место, где находится номер телефона. На скриншоте ниже видно, что номер, который на сайте отображается как 84954778824, в коде сайта написан как (разделен тегом <span>):

8&nbsp;495&nbsp;<span>477&nbsp;88&nbsp;24&nbsp;</span>

3. Повторим пункт 2 на другой странице сайта, как видно на скриншоте ниже, номер 84954778824 не разделен тегами и имеет единый формат: 84954778824

Теперь откройте ваш сайт, повторите пункт 2 и ответьте: в каком формате указан номер телефона на вашем сайте?

Если номер телефона разделен тегами, то простой способ подмены номера на сайте работать не будет. Для подмены номера вам потребуются минимальные знания html. Как это сделать, описано в п. 3.1, на который вы перейдете, нажав на зеленую кнопку.
Если номер телефона не разделен тегами (имеет единый формат), дальнейшая настройка очень проста.

Подмена номера на сайте по номеру телефона

Выберите «Код виджета» на странице настроек коллтрекинга. (Раздел "Сайты")

Кликните по пункту Замена номера на сайте по номеру телефона.

Укажите номер телефона, который необходимо подменять на вашем сайте. Скопируйте полученный код виджета.

Далее мы приступим к размещению кода на ваш сайт.

Выбор способа размещения кода на сайт

Разместить код виджета на сайте можно двумя способами:

  1. С помощью Google Tag Manager
  2. Вставить код виджета в html-код страницы сайта.


Ваш сайт поддерживает размещение кода через Google Tag Manager?


Размещение кода через Google Tag Manager

Откройте Ваш Google Tag Manager.

​ Зайдите в раздел «Триггеры»

1. Нажмите «Создать»
2. Назовите триггер «DOM Ready»
3. Выберите тип триггера «Модель DOM готова»
4. Нажмите «Сохранить»

Добавим тег. Для этого перейдите в раздел «Теги»:

1. Нажмите "Создать"
2. Назовите тег «Mango Calltracking»
3. Выберите тип тега «Пользовательский HTML»
4. В поле HTML вставьте скрипт виджета из Личного Кабинета (см. пп. 3.1).
В GTM нужно вставить только часть кода виджета, которая ограничена тэгами <script>.

Пример кода:

<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q ||
[]).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0];
p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js',
'mango-js', 'mgo'));
    mgo({calltracking: {id: xxxx, elements: [{selector: '.mgo-number-xxxx'}]}});
</script>


5. Поставьте флаг «Поддержка функции document.write»

6. В расширенных настройках:

  • установите «Приоритет активации тегов» в «-1»;
  • поставьте флаг «Активировать этот тег только в опубликованных контейнерах»;
  • в поле «Настройки активации тега» выберите «Без ограничений»:
  • 7.  Далее в разделе «Триггеры» добавьте созданный триггер «DOM Ready»:

    8. Сохраните.

    GTM необходимо опубликовать. Для этого в рабочем окне GTM нажмите «Отправить», а затем «Опубликовать»:



    Не забудьте убедиться в том, что скрипты GTM корректно установлены на Вашем сайте и HTML-тег с номером телефона на сайте имеет класс "mgo-number-xxxx" (где xxxx - id виджета).

    Сам подменный номер необходимо разместить в нужных частях страницы непосредственно в html. Вы можете взять первую строку кода виджета из Личного кабинета (см. шаг 3.1), в которой будет подменяться номер, и установить её вместо Вашего номера на сайте.

    Пример:

    <a class="mgo-number-xxxx" href="tel:+74991234567">+7 (499) 1234567</a>

    Этот код (HTML-тег с номером телефона) должен быть размещен на сайте после (ниже) скриптов GTM.

    Размещение кода в html страницу сайта

    Откройте вашу html страницу на которую будет размещен виджет коллтрекинга.

    Скопируйте код виджета, который вы получили в Шаге 3.1, и вставьте код на страницу своего сайта, до закрывающего тега /body

    <script>
        (function(w, d, u, i, o, s, p) {
            if (d.getElementById(i)) { return; } w['MangoObject'] = o;
            w[o] = w[o] || function() { (w[o].q = w[o].q ||
    []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
            s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
            p = d.getElementsByTagName('script')[0];
    p.parentNode.insertBefore(s, p);
        }(window, document, '//widgets.mango-office.ru/widgets/mango.js',
    'mango-js', 'mgo'));
        mgo({calltracking: {id: xxxx, elements: [{selector: '.mgo-number-xxxx'}]}});
    </script>

    Проверьте, что коллтрекинг работает правильно

    Откройте свой сайт и проверьте, подменяется ли номер. Убедитесь, что не настроены каналы исключения, под которые попадает ваш переход (например, исключение на прямые переходы), попробуйте зайти через режим инкогнито или с другого браузера, перейти с рекламы.

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

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

    Подробнее о проверке работы коллтрекинга здесь

    Более подробно обо всех возможностях коллтрекинга можно ознакомиться:
    а) В разделе «Поддержка», подраздел «Коллтрекинг» https://www.mango-office.ru/support/calltracking_vs_analytics/
    б) Рядом с каждым подразделом настроек коллтрекинга в личном кабинете для вашего удобства есть ссылка на инструкцию к конкретному разделу.

    Также вы можете обратиться в чат технической поддержки или на почту: techsupport@mangotele.com для получения консультации от наших специалистов по коллтрекингу.