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

## 1. Введение

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

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

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F4tTxjccbtuDaIltI7Ao4%2Ftemp%20-%20Frame%2010.jpg?alt=media\&token=3172179a-99af-4ee4-b6ea-4013113a9c7d)

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

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

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

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

* utm\_source (текст) — чтобы понимать откуда был переход по ссылке.
* utm\_medium (текст) — рекламная модель.
* utm\_campaign (текст) — рекламная компания.
* utm\_term (текст) — ключевая фраза рекламной компании.
* utm\_content (текст) — элемент сайта, на котором висит ссылка.

Подробнее про каждую метку читайте по [ссылке](https://ru.wikipedia.org/wiki/UTM-%D0%BC%D0%B5%D1%82%D0%BA%D0%B8).

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

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

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FKlm1eEnrkyizfM3SymXC%2F1.png?alt=media\&token=42d86cb9-4c15-48ac-96fd-0530decc8f1d)

В качестве сценария приложите [этот файл](https://drive.google.com/file/d/1c5H-6NKZA93SmtclmiSh0SgP9YP9T-Ti/view?usp=sharing).

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

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

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2Fnxs5zQMgc44gFTz9HPbA%2F2.png?alt=media\&token=558eb91d-8e22-4035-be96-6235372c044c)

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

* Получает все параметры адресной строки компонентом «Формируем массив utm-меток и парсим query параметры» и собирает из них JSON-объект.
* Оставляет в полученных параметрах только UTM-метки компонентом «Проверяем параметры на наличие utm-меток».
* Если в параметрах нет UTM-меток, то завершается.
* Если в параметрах есть UTM-метки, то создает новую запись в созданном ранее каталоге с указанием всех меток и их значений.
* По всем веткам возвращает заголовок **«**Access-Control-Allow-Origin»: «\*». Это нужно для того, чтобы внешние сайты могли обмениваться данными с Бипиумом через AJAX-запросы. Описание заголовка представлено в [статье](https://docs.bpium.ru/manual/processes/events/webrequests#krossdomennye-zaprosy-cors).

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

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FHjH9Jp643aDBJQBAIDsK%2F3.png?alt=media\&token=f5c89ad6-176c-49e7-b23e-8be41c6b574c)

### **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-запросом. Параметры отправляются в виде строки с указанием ключа параметра и его значения. Так выглядят полученные со стороны Бипиума данные:

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2FITzHGQnXG0J56pHNU1b2%2F6.png?alt=media\&token=c09e3750-91ca-4c51-b008-f0fcb27f41b9)

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

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

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

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

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F5LwXKUMRFRgVqX8AyfZC%2F4.png?alt=media\&token=bdecf072-bd4b-4317-afb5-950e594b2157)

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

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

![](https://1283378397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LACZmmM2xUWbZxyRr4s%2Fuploads%2F87J7UQaL2dq77b9wQsXw%2F5.png?alt=media\&token=11f801e8-c9e3-40d4-9226-2d0668c77dc1)