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

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

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

    Принцип его работы простой, он ищет на сайте определенный 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 завершена.


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