Отслеживание заявок с сайта помощью UTM-меток

1. Введение

Если в ссылке для перехода на ваш сайт есть параметры адресной строки, то Бипиум может собирать все такие параметры или их часть по заданному критерию. Как пример — UTM-метки в адресе, которые позволяют отследить источник перехода на ваш сайт. Знание о том, откуда приходит трафик на ваш сайт — полезно для выстраивания рекламной стратегии вашей компании. Собранные значения UTM-меток Бипиум может записывать в каталог. Одно посещение — одна запись с указанием всех UTM-меток, прописанных в адресе перехода на сайт.

2. Принцип работы

• Ваш сайт отсылает на адрес внешнего запроса Бипиума AJAX-запрос с параметрами адресной строки.

• Бипиум принимает параметры строки и запускает сценарий.

• В сценарии Бипиум выделяет из всех параметров адресной строки только UTM-метки с их значениями.

• Бипиум создает в каталоге новую запись, в которой хранятся значения UTM-меток ссылки.

3. Реализация

3.1. Каталог для хранения переходов

В Бипиуме нужно создать каталог, где будут собираться все переходы по вашим ссылкам с UTM-метками. В каталоге должны быть поля под каждую из меток:

• utm_source (текст) — чтобы понимать откуда был переход по ссылке.

• utm_medium (текст) — рекламная модель.

• utm_campaign (текст) — рекламная компания.

• utm_term (текст) — ключевая фраза рекламной компании.

• utm_content (текст) — элемент сайта, на котором висит ссылка.

Подробнее про каждую метку читайте по ссылке.

3.2. Внешний запрос для получения перехода

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

В качестве сценария приложите этот файл.

3.3. Описание сценария

Сценарий на регистрацию перехода выглядит следующим образом:

Сценарий делает:

• Получает все параметры адресной строки компонентом «Формируем массив utm-меток и парсим query параметры» и собирает из них JSON-объект.

• Оставляет в полученных параметрах только UTM-метки компонентом «Проверяем параметры на наличие utm-меток».

• Если в параметрах нет UTM-меток, то завершается.

• Если в параметрах есть UTM-метки, то создает новую запись в созданном ранее каталоге с указанием всех меток и их значений.

• По всем веткам возвращает заголовок «Access-Control-Allow-Origin»: «*». Это нужно для того, чтобы внешние сайты могли обмениваться данными с Бипиумом через AJAX-запросы. Описание заголовка представлено в статье.

В компоненте «Создаем запись с utm» выберите созданный вами каталог, в котором фиксируются переходы. Там же заполните id полей согласно этому каталогу.

3.4. Настройка сайта

Для того, чтобы отправлять в Бипиум параметры строки (в т.ч. UTM-метки) нужно приложить в HTML-разметку всех ваших сайтов следующий скрипт:

<script>
      window.addEventListener("load", function(event) {
    	let paramsObject = new URLSearchParams(document.location.search);
    	let objectToSend = {};
    	paramsObject.forEach(function(value, key) {
        	objectToSend[key] = value;
    	})
   	 let xhr = new XMLHttpRequest();
   	 xhr.open("POST", "https://ваш_домен/api/webrequest/ваш_url_id");
   	 xhr.send(JSON.stringify(objectToSend, "", " "));
   	 xhr.onload = function() {
   	 	console.log(xhr.status)
   	 }
      });
</script>

Этот скрипт собирает все параметры адресной строки, по которой был совершен переход и отправляет их в Бипиум POST-запросом. Параметры отправляются в виде строки с указанием ключа параметра и его значения. Так выглядят полученные со стороны Бипиума данные:

Эти данные поступают на вход компонента «Формируем массив utm-меток и парсим query параметры» в сценарии.

4. Тестирование

Откройте ваш сайт. Припишите к концу адреса вашего сайта параметры UTM-меток и заполните их любыми значениями. Параметры адресной строки прописываются через символ ‘?’ с указанием имени параметра и его значения. Для перехода к следующему параметру используется символ ‘&’.

Например, адрес с заполненными UTM-метками будет выглядеть следующим образом:

Перейдите на новый адрес.

В Бипиуме появится новая запись в каталоге с хранением переходов: