Настройка Ringostat - 9. Установка на сайт скрипта подмены номеров. Возможные варианты.

  1. Регистрация
  2. Выбор тарифа
  3. Основные настройки проекта
  4. Отслеживаемые каналы трафика
  5. Схемы переадресации
  6. Подключение номеров
  7. Подмена номеров
  8. Оплата
  9. Установка на сайт скрипта подмены номеров
  10. Обязательные рекомендации

После того как вы зарегистрировались в нашей системе и настроили свой проект у вас должен возникнуть логичный вопрос: “А как же все это связать с моим сайтом?”
Давайте разберемся, что же за магия заставляет на сайте изменяться номера телефонов и как происходит сама подмена.

Включение подмены номеров на сайте состоит всего из двух этапов.

Для того, чтобы все заработало нужно на страницах сайта выделить c помощью элементов HTML разметки (<span>, <div>, <a> и т. п.) номера телефонов и присвоить им определенный класс (по умолчанию ringo-phone).

Например:

<div class="ringo-phone">+7(495)123-45-67</div>
или
<span class="ringo-phone">+38(044)123-45-67</span>

Если номер кликабельный и в ссылке (Click to Call), то

<span class="ringo-phone"><a href="tel:+74951234567">+7(495)123-45-67</a></span>

В примере:

  • +7 (495) 123-45-67 - номер вашего телефона, который заменится;
  • class="ringo-phone" - обязательный атрибут заменяемых элементов, имя класса может быть любым другим. Если номеру (номерам) на сайте уже присвоен класс, то необходимо присвоить ещё один class="vash_klass ringo-phone".

Бывают случаи нестандартной верстки сайта, когда типичный способ выделения номеров не подходит. В таких ситуациях лучше обратиться к нашим специалистам.

Для подмены номера, следует установить на страницы сайта скрипт.

Его принцип работы такой, что он ищет по сайту HTML элемент с определенным классом и заменяет содержимое элемента (в нашем случае номер телефона) на телефон задействованный в отслеживании.

Вариантов установки скрипта на вашем сайте два:

  • внедрить скрипт в исходный код каждой страницы сайта, где нужно подменять телефон;
  • внедрить скрипт с помощью Google Tag Manager (далее GTM или Диспетчер тегов Google).

Установка не сложная, достаточно подключить наш скрипт на каждой странице сайте, где предполагается подменять номер телефона.

ВАЖНО!
Наш сервис поддерживает код отслеживания Universal Analytics. Если у вас на сайте установлен старый скрипт, то его следует обновить.

Сам скрипт:

<script type="text/javascript">
   (function (d, s, u, e, p) {
       window.ringostatConfig = {
           numbers: {
               common: {
                   class: 'ringo-phone',
                   mask: '+# (###) ###-##-##'
               }
           }
       };
       p=d.getElementsByTagName(s)[0],e=d.createElement(s),e.async=1,e.src=u,p.parentNode.insertBefore(e,p);
   })(document, 'script', 'https://ringostat.com/numbers/v3/ringostat.min.js');
</script>

ringo-phone - класс который мы присваивали HTML элементам, выделяя номера на страницах сайта.

+# (###) ###-##-## - маска вывода номера, где # - означает цифру. С помощью маски вы задаете вид, который будет иметь номер на вашем сайте.
Например, данная маска отобразит номер так +7 (495) 123-45-67. А маска 8 (###) ###-##-##, тот же номер как 8 (495) 123-45-67.
Практически, можно настроить маску таким образом, чтобы подмененный номер по стилю не отличался от номера по умолчанию на вашем сайте. Желая выделить код города красным цветом, нужно указать такую маску:

mask: '+ #<span style="color: red;">(###)</span> ### - ## - ##'

Если необходимо сделать отображаемый номер кликабельным, т.е. ссылку подменяемого номера, то вам следует установить маску следующего вида:

mask:'<a href="tel:<t>">+# (###) ##-##-##</a>'

ВАЖНО!
Наш скрипт в исходном коде должен быть после скрипта Google Universal Analytcs. А код Analytics, согласно рекомендации Google стоит располагать перед закрывающим тегом </head>.

Остановимся детально на этом варианте установки.
Он предпочтителен когда уже установлен и активен диспетчер тегов на каждой странице сайта.

Создать аккаунт в GTM можно перейдя по данной  ссылке. А для знакомства с принципами работы диспетчера тегов следует изучить инструкции от Google в центре поддержки.

Итак, нам предстоит создать новый тег содержащий скрипт подмены номеров. Назовем его Ringostat.


  1. Создаём тег с типом " Пользовательский тег HTML", и называем Ringostat.

145753999911_kiss_84kb.jpg

2. Вставляем в окно “Настройка тега” скрипт подмены номеров.

<script type="text/javascript">
   (function (d, s, u, e, p) {
       window.ringostatConfig = {
           numbers: {
               common: {
                   class: 'ringo-phone',
                   mask: '+# (###) ###-##-##'
               }
           }
       };
       p=d.getElementsByTagName(s)[0],e=d.createElement(s),e.async=1,e.src=u,p.parentNode.insertBefore(e,p);
   })(document, 'script', 'https://ringostat.com/numbers/v3/ringostat.min.js');
</script>

ВАЖНО!
ringo-phone - класс который мы присваивали HTML элементам, выделяя номера на страницах сайта.

+# (###) ###-##-## - маска вывода номера, где # - означает число. С помощью маски вы задаете вид, который будет иметь номер на вашем сайте. Например, данная маска отобразит номер так +7 (495) 123-45-67. А маска 8 (###) ###-##-##, тот же номер как 8 (495) 123-45-67.

Практически, можно настроить маску таким образом, чтобы подмененный номер по стилю не отличался от номера по умолчанию на вашем сайте. К примеру, для выделения кода города красным цветом, нужно указать такую маску: 

mask: '+ #<span style="color: red;">(###)</span> ### - ## - ##'

Если необходимо сделать отображаемый номер кликабельным, т.е. ссылку подменяемого номера, то вам следует установить маску следующего вида:

mask:'<a href="tel:<t>">+# (###) ##-##-##</a>'

145763255560_kiss_50kb.jpg

3. Условия активации не задаем. Активацию тега мы включим в настройках тега Universal Analytics. Сейчас, просто сохраняем наш тег Ringostat.

Создание или редактирование тега Universal Analytics


Наш сервис поддерживает новый код отслеживания Universal Analytics. Если у вас в GTM он уже ранее был создан, то нужно редактировать именно его. Если же нет, то тогда создать.

kiss_61kb.1457363256.jpg

Для изменения существующего тега нажимаем на его название после чего появится возможность его редактировать.

kiss_11kb.1457363797.jpg

Если ранее вы не использовали GTM для внедрения Analytics на сайт, то нажимаем кнопку “Создать” в разделе теги и далее мы его создадим.

  1. Даем произвольное, но понятное название тегу и выбираем среди предоставленного списка продуктов Google Analytics.

kiss_67kb.1457365344.jpg

2. Указываем тип тега как Universal Analytics

kiss_31kb.1457365578.jpg

3. Заполняем поле “Идентификатор отслеживания” - указываем Google Analytics id сайта. Он имеет вид UA-12345678-9

Потом переходим в “Расширенные настройки”

145986973141_kiss_38kb.jpg

4. Тут нам нужно найти чек-бокс “Активировать тег после тега ...” и поставить в нем галочку. У нас появится возможность выбора из выпадающего списка тегов, где мы выбираем наш тег Ringostat.

145986987940_kiss_35kb.jpg

5. Сверяем, что у нас настройка тега выглядит так, и жмем далее для указания условий активации.

145987027692_kiss_49kb.jpg

Указываем триггер активации тега “Все страницы” (появится правило All Pages) и создаем тег.

kiss_35kb.1457369890.jpg

Созданный нами тег будет находиться в разделе теги.

Публикация GTM


Таким образом мы проделали две операции:

  • Создали/отредактировали в GTM тег Universal Analytics дополнив его условием вызывающим активацию тега Ringostat.
  • Создали тег Ringostat в который и поместили сам скрипт подмены. Он по сигналу будет искать на сайте элементы с нужным классом и подменять номер телефона.

Нам осталось предварительно просмотреть все ли мы верно настроили, и убедиться, что происходит подмена номера на сайте. А потом опубликовать внесенные изменения в GTM.

На этом установка на сайт скрипта Ringostat через GTM завершена.

Существует альтернативный (с использованием переменной) вариант установки скрипта через GTM. Он будет использоваться в редких случаях, когда в настройках тега Universal Analytics уже указан следующий тег для активации.

Если у вас возникают сложности на любом из этапов установки скрипта или выделения номеров на вашем сайте, обязательно обращайтесь за помощью к нашим специалистам!

НАЗАД ДАЛЕЕ

Была ли статья полезной?