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

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

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

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

= '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.insertBefore(e, p);
    })(document, 'script', 'https://ringostat.com/numbers/v4/43/432228c184d280011111111111111111.js');
  } else {
    setTimeout(initRingostat,200);
  }
}
initRingostat(); 
"note">
Важно!!! Нужны именно нижние подчеркивания в нужном месте шаблона скрипта так как в таком виде хранит их Гугл Аналитикс.</p><ul>
<li> Скрипт Ringostat скопировать из ЛК проекта и заменить</li></ul><p>
	<img src="http://img.ringostat.com/veter/151395120472_kiss_51kb.jpg" />В итоге у вас должно получиться так:</p><p>
	<img src="http://img.ringostat.com/veter/151395319271_kiss_101kb.jpg" /></p></details><p>
	<a id="ss2"></a></p><details><summary>Установка скрипта в исходный код c Google Analytics</summary><p>
	Для установки нашего скрипта подмены, следует внести 2 правки в исходный код сайта:</p><p class="prim">
	1. Подключаем Ringostat как плагин Google Analytics</p><p>
	Для этого необходимо найти в исходном коде сайта скрипт Google Analytics и добавить строку:</p>
<pre>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

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

В появившемся окне, нужно выбрать тип тега – " Пользовательский HTML"

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

r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-111111-1', 'auto');
  ga('require', 'ringostat');
"prim">
Внесение правок в скрипт:<ol> <li><strong>Изменить код Google Analytics UA-111111-1 на ваш</strong>;<br /> <em>Обязательно установить тот, который вы указали при создании проекта в Ringostat.</em></li><li><strong>Вставить ниже этого кода скрипт подмены номеров</strong><br /> <img src="http://img.ringostat.com/veter/150842003448_kiss_122kb.jpg" /></li><li> <strong>Далее нажмите кнопку сохранения настроек не обращая внимание на предупреждение. Триггер активации не нужен.</strong><br /> <img src="http://img.ringostat.com/veter/151439496150_kiss_22kb.jpg" /></li></ol><p> После правильной настройки, тег будет выглядеть по примеру ниже:</p><p> <img src="http://img.ringostat.com/veter/151439549344_kiss_61kb.jpg" /></p><p class="prim"> <strong class="prim">Редактирование тега Universal Analytics</strong></p><p> Наш сервис поддерживает новый код отслеживания Universal Analytics. Если у вас в GTM он уже был создан ранее, то нужно редактировать именно его. Если же нет, то тогда создать. <img src="http://img.ringostat.com/veter/151439592917_kiss_29kb.jpg" /></p><p> Для изменения существующего тега, нажмите на его название. После этого появится возможность редактировать.</p><p> <img src="http://img.ringostat.com/jack/1QBU810.png" /></p><p> В появившихся настройках проверяем включено ли &#8220;перераспределение настроек в теге&#8221;. <br /> <em>Этот параметр указывает на то, что у данного тега будут индивидуальные настройки без использования переменных.</em></p><p> <img src="http://img.ringostat.com/jack/1QBUOTN.png" /></p><p> Потом переходим в &#8220; <strong>Дополнительные настройки</strong>&#8221; &#8212; &#8220;<strong>Расширенная конфигурация</strong>&#8221; и задаем имя трекера <strong>t0.</strong><br /> <em>Данное имя трекера у Google Analytics стандартное и мы его задаём чтобы Google tag manager не присваивал своё значение автоматически.</em><br /> <span style="color: red; text-decoration: underline;">Без этой настройки подмена номеров работать не будет</span></p><p> <img src="http://img.ringostat.com/jack/1QBVGEW.png" /></p><p> Далее настраиваем запуск тега Ringostat <strong><u>перед</u></strong> тегом Google Analytics (<strong>"Расширенные настройки" &#8212; "Порядок активации тегов" &#8212; "Активировать тег перед тегом Universal Analytics"</strong>)</p><p> <img src="http://img.ringostat.com/veter/151439618604_kiss_34kb.jpg" /></p><p> Выберите тег <strong>"Ringostat"</strong></p><p> <img src="http://img.ringostat.com/veter/151439621845_kiss_15kb.jpg" /></p><hr /> <p> После выполнения всех действий создайте и опубликуйте новую версию контейнера GTM, чтобы активировать Ringostat на вашем сайте. Для этого, нажмите кнопку " <strong>Отправить</strong>"</p><p> <img src="http://img.ringostat.com/jack/1QBWI7A.png" /></p><p> Вносим комментарий о внесенных изменениях в GTM и нажимаем кнопку &#8220; <strong>Опубликовать</strong>&#8221;.</p><p> <img src="http://img.ringostat.com/jack/1QBWQV0.png" /></p><p> На этом установка на сайт скрипта Ringostat через GTM завершена.</p>

Если у появятся вопросы — можете обратиться к нам в чат или на email: Sales Team | Support Team

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