Установка скрипта подмены номеров

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

Для подключения коллтрекинга на сайт остаётся только добавить наш скрипт.

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

Варианты установки скрипта на сайте

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

Важно! Перед установкой скрипта обязательно создайте ваш проект в личном кабинете Ringostat так как только после этого будет создан индивидуальный скрипт для вашего сайта.

Как узнать, какой вариант установки скрипта вам подходит?

1. Активируем поиск по коду сайта

Перейдите на ваш сайт.
Нажмите Ctrl+u , чтобы открыть страницу с кодом вашего сайта.
Нажмите Ctrl+f для активации поиска.

2. В появившейся строке поиска введите "gtag"

Если на сайте у вас установлен gtag, то вы найдете примерно следующий скрипт:

В этом случае используйте инструкцию "Установка скрипта в исходный код c GTAG".

3. Если gtag на сайте нет, то вместо gtag в строке поиска введите "analytics"

Если на сайте Гугл Аналитикс в коде сайта, то вы найдете примерно следующий скрипт:

В этом случае используйте инструкцию "Установка скрипта в исходный код c Google Analytics".

4. Если нет ни одного из вышеперечисленных скриптов, то введите в строку поиска по коду "gtm"

Вы найдете примерно следующий скрипт:

В этом случае используйте инструкцию "Установка скрипта в Google Tag Manager".

Если ни одного из вышеперечисленных вариантов скриптов вы на сайте не нашли, то обратитесь за рекомендациями к нам в чат или на email support@ringostat.com.

Установка скрипта в исходный код c GTAG

Для установки нашего скрипта подмены c gtag, следует внести следующие правки в исходный код сайта:

1. Отредактировать стандартный скрипт добавив в него сниппет

{'send_page_view': false}

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

2. Добавить в него или после него скрипт с подключением кода Ringostat.

<script>
function initRingostat(){
    if (typeof(ga) !== 'undefined') {
      ga('gtag_UA_1111111_1.require','ringostat');
      gtag('event', 'page_view');
    (function (d,s,u,e,p) {
        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/v4/43/432228c184d280011111111111111111.js');
  } else {
    setTimeout(initRingostat,200);
  }
}
initRingostat(); 
</script>

В скрипте заменить:

Код счетчика Google Analytics UA_1111111_1 на тот, который нужен

Важно!!! Нужны именно нижние подчеркивания в нужном месте шаблона скрипта так как в таком виде хранит их Гугл Аналитикс.

Скрипт Ringostat скопировать из ЛК проекта и заменить

В итоге у вас должно получиться так:

Установка скрипта в исходный код c Google Analytics

Для установки нашего скрипта подмены, следует внести 2 правки в исходный код сайта:

1. Подключаем Ringostat как плагин Google Analytics

Для этого необходимо найти в исходном коде сайта скрипт Google Analytics и добавить строку:

ga('require', 'ringostat');

Строку нужно добавить после параметра:

ga('create', 'UA-11111111-1', 'auto');

но, до параметра:

ga('send', 'pageview');

В конечном виде скрипт GA будет выглядеть так:

2. Подключить наш скрипт подмены в исходный код после скрипта Google Analytics

Скрипт для вашего проекта можно найти в личном кабинете Ringostat в меню “ Скрипт подмены” — “Настройки скрипта”:

После выполнения этих 2 действий, скрипты в исходном коде сайта должны быть как на примере:

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

Установка скрипта в Google Tag Manager

Этот метод интеграции подойдет тем, кто использует Google Tag Manager для отправки данных в Google Analytics.

Чтобы установить скрипт подмены номеров вам потребуется:

Создать новую переменную Custom JavaScript с подключенным скриптом Ringostat;
Задать переменную в теге Universal Analytics;
Проверить и опубликовать изменения.

Создание пользовательской переменной

Для создания переменной нужно выбрать необходимый контейнер в вашем кабинете Google Tag Manager, перейти в раздел "Переменные" и нажать кнопку "Создать":

После создания переменной, нужно задать её имя – Ringostat

Далее нажмите на " Конфигурация переменной"

В появившемся окне, нужно выбрать тип переменной – "Собственный код JavaScript" (Custom JavaScript)

В появившуюся форму нужно вставить нижеуказанный скрипт

function () {
  var p = [];
  function _h(){p.forEach(function(a){window.ringostatAnalytics.sendPayload(a.type,a.payload)})};
  function _i(a,b){"loaded"===a.readyState||"completed"===a.readyState?b():setTimeout(function(){_i(a,b)},100)};
  function _c(c,d,a,b){window.ringostatAnalytics||(window.ringostatAnalytics=1,b=c.getElementsByTagName("script")[0],a=c.createElement("script"),a.async=!0,a.src=d,a.onload=_h,_i(a,_h),b.parentNode.insertBefore(a,b))};
  return function (t) {
    if(!0===t.get("ringostatTracker")) return;
    var _o = t.get("sendHitTask");
    t.set("ringostatTracker", true);
    _c(document, 'SCRIPT_URL');
    t.set('sendHitTask', function (m) {
      _o(m);
      "object"===typeof window.ringostatAnalytics?window.ringostatAnalytics.sendPayload(m.get("hitType"), m.get("hitPayload")):p.push({type:m.get("hitType"),payload:m.get("hitPayload")});
    });
  }
}

Далее заменить в нем параметр “SCRIPT_URL” на уникальный URL скрипта, который можно взять из проекта в личном кабинете Ringostat:После чего переменная должна выглядеть по следующему примеру:

Сохраняем её.

Указание переменной настроек в теге Universal Analytics.

Наш сервис поддерживает новый код отслеживания Universal Analytics. Если у вас в GTM он уже был создан ранее, то нужно редактировать именно его. Если же нет, то тогда создать.
Примечание: тег должен срабатывать на всех страницах (All Pages).

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

Сначала нужно проверить, заданы ли настройки в общей переменной для настроек (нет отметки “Включить переопределение настроек в этом теге”).Если настройки заданы в переменной — редактируем её.

Если настройки заданы в переменной — редактируем её.В конфигурации переменной нужно добавить поле с названием customTask. В значении этого поля выбрать переменную Ringostat, которую создавали ранее.
Примечание: значение {{Ringostat}} обязательно должно быть в фигурных скобках, так как это переменная (GTM обычно их помогает указать при выборе переменной).

Если переменная настроек не используется (есть отметка “Включить переопределение настроек в этом теге”) — нужно создать поле с названием customTask и переменной Ringostat в значении прямо в настройках тега.

Выберите тег "Ringostat"

После выполнения всех действий и их сохранения — создайте и опубликуйте новую версию контейнера GTM, чтобы активировать Ringostat на вашем сайте. Для этого, нажмите кнопку "Отправить".

Вносим комментарий о внесенных изменениях в GTM и нажимаем кнопку “ Опубликовать”.

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