Чтобы начать сбор данных о визитах пользователей на сайт, необходимо установить скрипт отслеживания на Ваш сайт. Он подключается как плагин, к скрипту отслеживания
Google Analytics
и позволяет получить и связать свыше 30 параметров визита посетителя, который совершил звонок на подменный номер или через виджет обратного звонка Callback.
Выбор варианта установки скрипта зависит от того как у вас установлен скрипт отслеживания Analytics.
Перед установкой скрипта отслеживания – необходимо зарегистрировать проект в системе Ringostat.
- установка в исходный код сайта со скриптом Global Site Tag (gtag.js);
- установка в исходный код сайта вместе со скриптом Google Universal Analytics;
- установка в Диспетчер тегов Google.
- установка без привязки к Google Analytics (используется также для GA4).
Как узнать, какая версия кода Analytics установлена?
Это инструмент, который позволяет быстро выполнять проверку или диагностику сайта, анализировать внедрение кода Analytics и устранять неполадки. Подробнее...
- Перейдите на ваш сайт;
- Откройте панель "инструменты разработчика" сочетанием клавиш Ctrl + U;
- Для показа строки поиска нажмите Ctrl + F;
- Далее, нужно выполнить поиск скрипта согласно описания ниже.
Вариант 1 – в строке поиска введите gtag
Если версия скрипта Global site tag (gtag.js), результатом поиска будет примерно следующий скрипт:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>
Для подключения скрипта отслеживания и подмены номеров, к коду GTAG - воспользуйтесь
инструкцией.
Если по запросу, скрипт с нужным счётчиком не будет найден, попробуйте найти код Google Universal Analytics.
Вариант 2 – в строке поиска введите analytics.js
Если версия скрипта Universal Analytics, результатом поиска будет примерно следующий скрипт:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga...;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
Для подключения скрипта отслеживания и подмены номеров, к коду Universal Analytics - воспользуйтесь
инструкцией.
Если по запросу, скрипт с нужным счётчиком не будет найден, попробуйте найти код Диспетчера Тегов Google.
Вариант 3 – в строке поиска введите gtm
Если на сайте установлен контейнер Диспетчера тегов Google, результатом поиска будет примерно следующий скрипт:
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})
(window,document,'script','dataLayer','GTM-XXXXXX');
</script>
Для подключения скрипта отслеживания и подмены номеров, к коду Universal Analytics - воспользуйтесь инструкцией.
В случае, если у вас не получилось разобраться с версией или вариантом установки кода отслеживания – будем рады помочь разобраться в чате или на email support@ringostat.com
Выберите тип установки скрипта:
- Global site Tag (gtag.js) Analytics
- Universal Analytics
- Google Tag Manager
- Без привязки к Google Analytics
(используется также для GA4)
Установка скрипта в исходный код c GTAG
После регистрации проекта, необходимо адаптировать стандартный скрипт GTAG.js и заменить его на сайте.
Адаптация скрипта GTAG.js для подключения на сайт
Перейдите в личный кабинет Ringostat на страницу Общие настройки -> Настройки проекта:
Скопируйте значение поля Google Analytics resource ID и вставьте в поле ниже:
Перейдите на страницу Скрипт подмены --> Настройки скрипта:
Скопируйте скрипт отслеживания для Вашего проекта и вставьте в поле ниже:
Замена стандартного скрипта GTAG.js на адаптированный
Скопируйте адаптированный скрипт GTAG.js + Ringostat из поля выше и замените в исходном коде сайта стандартный GTAG.js.
Пример скрипта GTAG.js в исходном коде сайта до замены:
Пример скрипта GTAG.js в исходном коде сайта после замены:
На этом установка скрипта отслеживания Ringostat успешно выполнена
Установка скрипта в исходный код c Google Universal Analytics
После регистрации проекта, необходимо адаптировать стандартный скрипт analytics.js и заменить его на сайте.
Адаптация скрипта GTAG.js для подключения на сайт
Перейдите в личный кабинет Ringostat на страницу Общие настройки -> Настройки проекта:
Скопируйте значение поля Google Analytics resource ID и вставьте в поле ниже:
Перейдите на страницу Коллтрекинг -> Настройки скрипта:
Скопируйте скрипт отслеживания для Вашего проекта и вставьте в поле ниже:
Замена стандартного скрипта analytics.js на адаптированный
Скопируйте адаптированный скрипт analytics.js + Ringostat из поля выше и замените в исходном коде сайта стандартный analytics.js.
Пример скрипта analytics.js в исходном коде сайта до замены:
Пример скрипта analytics.js в исходном коде сайта после замены:
На этом установка скрипта отслеживания Ringostat успешно выполнена
Установка скрипта в Google Tag Manager
Создание переменной JavaScript
Для создания переменной нужно выбрать необходимый контейнер в вашем кабинете Google Tag Manager, перейти в раздел Переменные и нажать соответствующую кнопку:
Далее, необходимо указать понятное имя переменной(например, Ringostat CallTracking) и нажать на поле Конфигурация переменной:
В появившемся окне, нужно выбрать тип переменной Собственный код JavaScript:
Перейдите в личный кабинет Ringostat, на страницу Коллтрекинг -> Настройки скрипта:
Скопируйте скрипт отслеживания для Вашего проекта и вставьте в поле ниже:
После успешной генерации скрипта, скопируйте полученное значение и добавьте в соответствующую форму в настройках переменной и нажмите Сохранить:
Добавление переменной в тег Universal Analytics
После успешного создания переменной, её нужно добавить в тег с необходимым счётчиком Google Analytics.
Перейдите на страницу Теги и выберите тег содержащий счётчик Google Analytics, с триггером активации All Pages или Модель DOM готова:
В окне конфигурации тега, необходимо проверить наличие отметки :
Отметка "Включить переопределение настроек в этом теге" установлена?
- Да, установлена
- Не установлена
В случае, если установлена отметка переопределения настроек тега, нужно создать новое поле в настройках тега. Выберите Дополнительные настройки -> Поля, которые необходимо создать и нажмите кнопку + Поле:
Укажите название поля строго customTask и в значении через спец символы переменной {{ ... }} её название (в текущем примере {{Ringostat CallTracking}} ) и нажмите кнопку Сохранить:
Переменная
customTask может быть добавлена только 1 раз в 1м теге.
Если у вас уже есть переменная customTask – обратитесь в наш отдел поддержки для консультации.
Далее, нажмите Отправить:
В окне публикации контейнера добавьте понятное название версии контейнера, его описание и нажмите кнопку Опубликовать
На этом установка скрипта отслеживания Ringostat успешно выполнена
Если переопределение настроек тега не включено, нужно создать новое поле в настройках Google Analytics:
Выберите Дополнительные настройки -> Поля, которые необходимо создать и нажмите кнопку + Поле:
Укажите название поля строго customTask и в значении через спец символы переменной {{ ... }} её название (в текущем примере {{Ringostat CallTracking}} ) и нажмите кнопку Сохранить:
Переменная
customTask может быть добавлена только 1 раз в 1м теге.
Если у вас уже есть переменная customTask в настройках Google Analytics или конфигурации тега – обратитесь в наш отдел поддержки для консультации.
Далее, нажмите Отправить:
В окне публикации контейнера добавьте понятное название версии контейнера, его описание и нажмите кнопку Опубликовать
На этом установка скрипта отслеживания Ringostat успешно выполнена
Установка скрипта без привязки к Google Analytics (используется также для GA4)
- если используется версия Google Analytics 4;
- если непростая настройка Google Analytics, которую сложно совместить со скриптом Рингостат;
- если не используется Google Analytics на сайте.
(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://script.ringostat.com/v4/ХХ/ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ.js
');
var pw = function() {if (typeof(ringostatAnalytics) === "undefined") {setTimeout(pw,100);} else {ringostatAnalytics.sendHit('pageview');}}
pw();
</script>
Чтобы сгенерировать необходимый для установки скрипт необходимо заменить выделенные данные
на уникальные данные проекта.
Для этого перейдите в раздел Коллтрекинг -> Настройки скрипта и скопируйте только выделенный на скриншоте фрагмент скрипта:
Скрипт есть возможность установить в исходный код сайта или в диспетчер тегов.
- если в коде сайта не установлен скрипт Google Analytics, скрипт Ringostat необходимо устанавливать в раздел head или в начало открывающего тега body.
- если в коде сайта установлен скрипт Google Analytics, скрипт Ringostat необходимо устанавливать сразу после него:
-
необходимо установить как отдельный тег выбирая шаблон “Пользовательский HTML” и тригер активации “All pages”.
Настройка передачи данных:
- Google Analytics 4
- Universal Analytics или GTAG
Настройка отслеживаемых сущностей
Переходим в раздел Коллтрекинг -> Отслеживаемые сущности
- задаём название "sessionId
- выбираем тип отслеживания "Expression".
- задаём уровень отслеживания на уровне "Сессии".
- задаём значение переменной, с помощью которого мы будем отслеживать сущность — document.cookie.match('(^|;)\\s*_ga_A1B23C4567\\s*=\\s*([^;]+)').pop().split('.')[2], где "ga_A1B23C4567" соответствует реальному счётчику, установленному на сайте — G-A1B23C4567.
Т.е. указываем в формате ga_[Google source ID]. Вместо "Google source ID" подставляем уникальное значение счётчика, указанное после "G-". Счётчик смотрим на сайте.
Пример:
- задаём название "sessionNumber
- выбираем тип отслеживания "Expression".
- задаём уровень отслеживания на уровне "Сессии".
- задаём значение переменной, с помощью которого мы будем отслеживать сущность — document.cookie.match('(^|;)\\s*_ga_A1B23C4567\\s*=\\s*([^;]+)').pop().split('.')[3], где "ga_A1B23C4567" соответствует реальному счётчику, установленному на сайте — G-A1B23C4567.
Т.е. указываем в формате ga_[Google source ID]. Вместо "Google source ID" подставляем уникальное значение счётчика, указанное после "G-". Счётчик смотрим на сайте.
Пример:
- задаём название "clientId
- выбираем тип отслеживания "Expression".
- задаём уровень отслеживания на уровне "Сессии".
- задаём значение переменной, с помощью которого мы будем отслеживать сущность — gaGlobal.vid.
Настройка вебхука
Переходим в раздел Интеграции -> Webhooks. Нажимаем редактировать:
Далее переходим в настройки вебхука
- Для параметра cid указываем значение "Custom".
Строкой ниже указываем название соответствующего параметра — "clientId" (имя отслеживаемой сущности для трекинга Google client ID). - Добавляем параметр sid и указываем его значение "Custom".
Строкой ниже указываем название соответствующего параметра — "sessionId" (имя отслеживаемой сущности для трекинга ID сессии). - Добавляем параметр sct и указываем его значение "Custom".
Строкой ниже указываем название соответствующего параметра — "sessionNumber" . - Добавляем параметр ep.disposition и указываем его значение "Статус".
- Добавляем параметр ep.uniqueCall и указываем его значение "Первый уникальный звонок".
- Добавляем параметр dl - последняя просмотренная страница
- Удаляем параметр tid, в котором ранее передавали Google Analytcis resource ID, т.к. его уже прописали в ссылке вебхука ранее.
- Удаляем параметр ec, в котором ранее передавали Статус, т.к. его уже прописали в ссылке вебхука ранее.
- Удаляем параметр ea, в котором ранее передавали Уникальный первый звонок, т.к. его уже прописали в ссылке вебхука ранее.
- Удаляем параметр el.
На этом настройка успешно выполнена
Настройка отслеживаемых сущностей
Переходим в раздел Коллтрекинг -> Отслеживаемые сущности
- указываем название переменной clientId.
- выбираем тип отслеживания "Expression".
- задаём уровень отслеживания на уровне "Сессии".
- задаём значение переменной, с помощью которого мы будем её отслеживать — ga.getAll()[0].get('clientId').
Настройка вебхука
Переходим в настройки вебхука
- Находим параметр cid и задаём ему значение "Custom".
- В строке ниже вводим название переменной, которую мы отслеживаем с помощью отслеживаемых сущностей — clientId.
На этом настройка успешно выполнена
Проверка скрипта после установки
После установки скрипта подмены номеров нужно проверить корректность его установки и запуска.
Выполнить такую проверку возможно 2 способами:
- проверить наличие cookie-файлов;
- проверить наличие уведомлений скрипта.
1. Проверка cookie-файлов в Google Chrome
После установки скрипта подмены он создаёт cookie-файлы, наличие которых является одним из самых важных показателей.
Перейдите на Ваш сайт и нажмите сочетание клавиш CTRL + Shift + i. Далее, перейдите во вкладку Application, в меню навигации выберите раздел Storage -> Cookies -> домен вашего сайта:
Если скрипт установлен и не настроен будет создан только 1 cookie-файл с именем rngstsession
Если скрипт установлен и настроен будет создано 4 cookie-файла: rngstsession / rngst_callback / rngst1 / rngst2
Наличие cookie-файлов свидетельствует о том, что скрипт запускается.
2. Проверка уведомлений в консоли Google Chrome
Скрипт подмены номеров добавляет в консоль уведомления о своём состоянии.
Перейдите на Ваш сайт, нажмите сочетание клавиш CTRL + Shift + i и выберите вкладку Console.
В зависимости от этапа настройки проекта может быть 3 типа сообщений:
Ringostat error: Script URL doesn't exist – скрипт установлен, но не настроен проект.
Ringostat: Inactive project – скрипт установлен и настроен, но проект в неактивном статусе(Новый / Не продлён / Архивный);
Ringostat: Insertion status is OFF – скрипт установлен и настроен, но отключена подмена номеров
Установка Script v4 + GTM server-side (для блокировщиков)
Интеграция с GTM Server-side нужна в отдельных случаях, чтобы блокировщики рекламы не мешали работе скрипта Ringostat на сайте. Как настроить:
1. Создайте новый контейнер в Google Tag Manager-e, c типом server:
2. Выберите автоматическую настройку:
3. Далее необходимо создать свой домен в Google Cloud, следуя данной инструкции.
4. После того, как был создан домен, переходите в Google Tag Manager и создайте новый шаблон:
5. Теперь необходимо импортировать ранее созданный шаблон и сохранить его: скачайте шаблон здесь
6. После того, как импортировали шаблон, переходим к созданию нового клиента (сущности) в Google Tag Manager:
Выберите пользовательский тип клиента и сохраните настройки:
7. Теперь заходим в наш клиент:
И в поле projectHash прописываем хеш проекта
Найти его можно в настройках скрипта подмены в личном кабинете Рингостат:
Копируем ту часть скрипта, что расположена после последнего слеша и перед .js
8. Публикуем изменения.