{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье разберем что такое параметры запроса, познакомимся c так называемыми utm-метками, и научимся работать с параметрами запроса на примере одной ситуации из моей практики.","type":"unstyled","key":"ajgau"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнем с теории.","type":"unstyled","key":"dsoad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внимание! Поскольку статья для начинающих веб-разработчиков, многие понятия в статье даются в упрощенном виде для облегчения понимания.","type":"blockquote","key":"eus9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ebrmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры запроса","type":"header-two","key":"3rtnf"},{"data":{"image":{"id":"5f87196f17c9884cd3df43b9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачастую, кроме адреса страницы сайта, в ссылке требуется передавать какие-то дополнительные параметры.","type":"atomic:image","key":"fbrma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представим, что есть каталог товаров в интернет-магазине. В каталоге может быть сотни и тысячи наименований товара, и, если выводить их на одной странице, она получится просто огромной, и будет грузится долгое время.","type":"unstyled","key":"5vilj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем известен выход из этой ситуации: нужно разбить каталог на страницы. Все вы видели такие страницы, там десять или двадцать товаров, а также ссылки на другие страницы каталога.","type":"unstyled","key":"2f887"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как же сформированы подобные ссылки? Вот здесь-то и используются параметры запроса в URL.","type":"unstyled","key":"dan9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":195,"offset":0,"style":"ITALIC"}],"text":"Часто параметры запроса называют GET-параметрами. Это не совсем верно. Да, при запросе методом GET, эти параметры видны в строке браузера, но их с тем же успехом можно передавать и POST-запросом.","type":"blockquote","key":"1pa5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрите на адрес:","type":"unstyled","key":"chan8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":0,"style":"BOLD"}],"text":"https://someshop.ru/catalog/iphone?page=1&perpage=20","type":"unstyled","key":"5287f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь:","type":"unstyled","key":"fgihi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"https – это протокол, по которому идет передача данных (в данном случае защищенный http);","type":"unordered-list-item","key":"7qve5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"someshop.ru – доменное имя хоста (часто просто говорят «домен»);","type":"unordered-list-item","key":"5ptse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"catalog/iphone – так называемый «Путь» до конкретной страницы на сайте, часто бывает иерархическим, при этом составные части пути разделяет прямой слэш /;","type":"unordered-list-item","key":"e8cv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"page=1&perpage=20 – строка запроса (как раз состоящая из параметров).","type":"unordered-list-item","key":"9ian0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот именно строку запроса, в большинстве случаев называют GET-параметрами.","type":"unstyled","key":"7ec0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":26,"style":"ITALIC"}],"text":"Эта строка состоит из пар имя_параметра=значение_параметра.","type":"unstyled","key":"d7bb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":39,"style":"BOLD"}],"text":"Пары разделены между собой амперсандом &.","type":"unstyled","key":"a94o0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":59,"style":"BOLD"}],"text":"Строка запроса отделена от адреса (с путем) знаком вопроса ?","type":"unstyled","key":"alja5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В адресе выше мы имеем два параметра запроса:","type":"unstyled","key":"fcebt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"page со значением 1","type":"unordered-list-item","key":"8o42j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"perpage со значением 20","type":"unordered-list-item","key":"57utq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Они означают, что ссылка ведет на 1-ю страницу каталога, и выводить на странице нужно 20 товаров.","type":"unstyled","key":"5amup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"UTM-метки","type":"header-two","key":"fnivd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одним из распространенных примером применением параметров запроса являются так называемые UTM-метки.","type":"unstyled","key":"epdra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"UTM-метки – это, по сути, набор параметров запроса с заданными именами.","type":"blockquote","key":"5iin4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4ai1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Они «де-факто» являются стандартом меток для сбора статистики. Практически все системы аналитики, CRM-системы, многочисленные сервисы из самых разных областей, поддерживают работу с UTM-метками.","type":"unstyled","key":"8poab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имена основных меток:","type":"unstyled","key":"fqpjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"utm_source — источник перехода;","type":"unordered-list-item","key":"9ug9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"utm_medium — тип трафика;","type":"unordered-list-item","key":"7inu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"utm_campaign — название рекламной кампании;","type":"unordered-list-item","key":"dlh76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"utm_content — дополнительная информация по каналу рекламы;","type":"unordered-list-item","key":"98ghk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"utm_term — ключевая фраза.","type":"unordered-list-item","key":"6sva8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример из практики","type":"header-two","key":"dath2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я технически поддерживаю один из обучающих проектов.","type":"unstyled","key":"eaoq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имела место следующая ситуация.","type":"unstyled","key":"4tg9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"ITALIC"}],"text":"Есть лендинг тренинга, в котором можно участвовать как платно (с расширенными возможностями), так и бесплатно (базовый вариант).","type":"unordered-list-item","key":"a2d8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этот лендинг «льется трафик» с различных рекламных систем (яндекс.директ, вконтакте, фэйсбук, партнеры…).","type":"unordered-list-item","key":"743s7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все рекламные ссылки на этот лендинг размечены utm-метками.","type":"unordered-list-item","key":"dhi8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В свою очередь CRM-система, используемая на проекте, поддерживает работу с UTM-метками и таким образом можно считать выгоду от того или иного канала рекламы, соотнося расходы и продажи по каждому каналу.","type":"unordered-list-item","key":"4su1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":102,"style":"ITALIC"}],"text":"На лендинге имеются 2 ссылки для платного и бесплатного участия. Ссылка для бесплатного участия ведет на отдельную страницу, где находится форма, заполнив которую, человек попадает в группу в CRM для бесплатного участия в тренинге.","type":"unordered-list-item","key":"64ulp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Проблема была в том, что при переходе по ссылке на страницу с формой, UTM-метки туда не передавались, и, соответственно, невозможно было понять по какому каналу рекламы пришел человек, который заполнил эту форму.","type":"unstyled","key":"547cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Формулируем задачу для решения этой проблемы:\nнужно взять UTM-метки из строки запроса лендинга и подставить их в ссылку на страницу с формой.","type":"unstyled","key":"1jac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделать это нужно было максимально быстро, т.е. «вчера» поскольку на страницу уже шел трафик.","type":"unstyled","key":"29v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с параметрами запроса на сервере (PHP)","type":"header-two","key":"6kf7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задача была решена парой строчек кода на PHP.","type":"unstyled","key":"aij29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже код двух страничек, первая это эмуляция лендинга со ссылкой на эмуляцию страницы с формой, вторая это эмуляция страницы с формой.","type":"unstyled","key":"5veml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вторая страница нужна, чтобы вы могли скопировать ее посмотреть результат перехода по ссылке с лендинга.","type":"unstyled","key":"b9ovc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лендинг (index.php):","type":"unstyled","key":"ev17s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"38ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4jdkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"77cds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"d3hsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ddn04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"fm2gq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"88p5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Лендинг","type":"unstyled","key":"2pnve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eea7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3nh8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"lprt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"24kbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это лендинг

","type":"unstyled","key":"5v3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\" target=\"_blank\">Это ссылка на страницу с формой

","type":"unstyled","key":"c82bt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"8ritc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3u604"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"58o6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"591a8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Страница с формой (form.html):","type":"unstyled","key":"d0nq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dolp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bi4ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"pgqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d4pli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"d6cki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"bnoqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Страница с формой","type":"unstyled","key":"9oocv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5pk7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d04l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aegsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"9fhd7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это страница с формой

","type":"unstyled","key":"e9dgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7n4ei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cj3k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cte1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bars"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Собственно решение в первом PHP-блоке:","type":"unstyled","key":"8275f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1elrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В первой строке, при помощи функции filter_input, получаем строку запроса из суперглобального массива $_SERVER.","type":"unstyled","key":"9vvhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во второй строке, если строка запроса имеется, прикрепляем её к URL страницы с формой.","type":"unstyled","key":"a28js"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получившуюся переменную $url выводим в атрибуте href ссылки.","type":"unstyled","key":"9c93n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом на страницу form.html стали передаваться UTM-метки, и CRM-система начала получать информацию о канале рекламы, с которого пришел тот или иной посетитель.","type":"unstyled","key":"3bch0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":101,"offset":51,"style":"ITALIC"}],"text":"Решение, приведенное выше, далеко не универсально. Поскольку берутся все параметры запроса, а кроме UTM-меток, среди них, могут быть и другие параметры.","type":"unstyled","key":"76gdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стоит немного усовершенствовать код, чтобы брать только те параметры, которые нам нужны.","type":"unstyled","key":"77gfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $value)","type":"unstyled","key":"40puf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" {","type":"unstyled","key":"hlra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\t$key = strtolower($key);","type":"unstyled","key":"999ch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" if(in_array($key, $validParams)) // Проверка имени параметра на допустимость","type":"unstyled","key":"3i8up"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" {","type":"unstyled","key":"d2fcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $queryStr .= \"$key=$value&\"; // В цикле формируем строку с параметрами","type":"unstyled","key":"2pgsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"3qaqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"bbsq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $queryStr = rtrim($queryStr, '&'); //удаляем последний символ &","type":"unstyled","key":"1vlb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"unstyled","key":"16i97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $url = $queryStr ? 'form.html?' . $queryStr : 'form.html';","type":"unstyled","key":"6ajco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"?>","type":"unstyled","key":"8imej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с параметрами запроса на клиенте (Javascript)","type":"header-two","key":"3nisd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме серверного варианта, существует возможность решить данную задачу на стороне клиента, т.е. через javascript.","type":"unstyled","key":"251r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2d7m5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"asj22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f8ef2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"80sot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7u0ng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"fq2f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Лендинг","type":"unstyled","key":"g9t1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8uip4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f09kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5tsls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"273vp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это лендинг

","type":"unstyled","key":"6qiea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Это ссылка на страницу с формой

","type":"unstyled","key":"1vl2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"8chld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9q1oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"gm31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cgvk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b737c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1uvua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7hcrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На мой взгляд, решение на стороне сервера предпочтительнее, хотя бы по причине того, что не зависит от устройства, на котором просматривается страница.","type":"unstyled","key":"4c3ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"XBXq5u2PjuwsMVxjIEO1"}],"entityMap":{}},"mentions":[]}