Как передать get параметры в url

Работа с параметрами запроса в URL, с примером из реальной практики.

В статье разберем что такое параметры запроса, познакомимся c так называемыми utm-метками, и научимся работать с параметрами запроса на примере одной ситуации из моей практики.

Начнем с теории.

Внимание! Поскольку статья для начинающих веб-разработчиков, многие понятия в статье даются в упрощенном виде для облегчения понимания.

Параметры запроса

Зачастую, кроме адреса страницы сайта, в ссылке требуется передавать какие-то дополнительные параметры.

Представим, что есть каталог товаров в интернет-магазине. В каталоге может быть сотни и тысячи наименований товара, и, если выводить их на одной странице, она получится просто огромной, и будет грузится долгое время.

Всем известен выход из этой ситуации: нужно разбить каталог на страницы. Все вы видели такие страницы, там десять или двадцать товаров, а также ссылки на другие страницы каталога.

Как же сформированы подобные ссылки? Вот здесь-то и используются параметры запроса в URL.

Часто параметры запроса называют GET-параметрами. Это не совсем верно. Да, при запросе методом GET, эти параметры видны в строке браузера, но их с тем же успехом можно передавать и POST-запросом.

Посмотрите на адрес:

https://someshop.ru/catalog/iphone?page=1&perpage=20

• https – это протокол, по которому идет передача данных (в данном случае защищенный http);
• someshop.ru – доменное имя хоста (часто просто говорят «домен»);
• catalog/iphone – так называемый «Путь» до конкретной страницы на сайте, часто бывает иерархическим, при этом составные части пути разделяет прямой слэш /;
• page=1&perpage=20 – строка запроса (как раз состоящая из параметров).

Вот именно строку запроса, в большинстве случаев называют GET-параметрами.

Эта строка состоит из пар имя_параметра=значение_параметра.

Пары разделены между собой амперсандом &.

Строка запроса отделена от адреса (с путем) знаком вопроса ?

В адресе выше мы имеем два параметра запроса:

• page со значением 1
• perpage со значением 20

Они означают, что ссылка ведет на 1-ю страницу каталога, и выводить на странице нужно 20 товаров.

UTM-метки

Одним из распространенных примером применением параметров запроса являются так называемые UTM-метки.

UTM-метки – это, по сути, набор параметров запроса с заданными именами.

Они «де-факто» являются стандартом меток для сбора статистики. Практически все системы аналитики, CRM-системы, многочисленные сервисы из самых разных областей, поддерживают работу с UTM-метками.

Имена основных меток:

• utm_source — источник перехода;
• utm_medium — тип трафика;
• utm_campaign — название рекламной кампании;
• utm_content — дополнительная информация по каналу рекламы;
• utm_term — ключевая фраза.

Пример из практики

Я технически поддерживаю один из обучающих проектов.

Имела место следующая ситуация.

• Есть лендинг тренинга, в котором можно участвовать как платно (с расширенными возможностями), так и бесплатно (базовый вариант).
• На этот лендинг «льется трафик» с различных рекламных систем (яндекс.директ, вконтакте, фэйсбук, партнеры…).
• Все рекламные ссылки на этот лендинг размечены utm-метками.
• В свою очередь CRM-система, используемая на проекте, поддерживает работу с UTM-метками и таким образом можно считать выгоду от того или иного канала рекламы, соотнося расходы и продажи по каждому каналу.
• На лендинге имеются 2 ссылки для платного и бесплатного участия. Ссылка для бесплатного участия ведет на отдельную страницу, где находится форма, заполнив которую, человек попадает в группу в CRM для бесплатного участия в тренинге.

Проблема была в том, что при переходе по ссылке на страницу с формой, UTM-метки туда не передавались, и, соответственно, невозможно было понять по какому каналу рекламы пришел человек, который заполнил эту форму.

Формулируем задачу для решения этой проблемы:
нужно взять UTM-метки из строки запроса лендинга и подставить их в ссылку на страницу с формой.

Сделать это нужно было максимально быстро, т.е. «вчера» поскольку на страницу уже шел трафик.

Работа с параметрами запроса на сервере (PHP)

Задача была решена парой строчек кода на PHP.

Ниже код двух страничек, первая это эмуляция лендинга со ссылкой на эмуляцию страницы с формой, вторая это эмуляция страницы с формой.

Вторая страница нужна, чтобы вы могли скопировать ее посмотреть результат перехода по ссылке с лендинга.

Передача GET-параметров в URL с помощью GTM

В предыдущей статье я показывал, как можно извлекать данные из URL. Однако с помощью JavaScript и Google Tag Manager можно не только получать из URL, но и передавать GET-параметры в URL.

В рамках этой статьи разберем способ добавления в URL GET-параметра со значением Client ID (уникальным идентификатором пользователя). Как на скриншоте ниже:

Пример передачи GET-параметра в URL (Client ID)

О том, что такое Client ID, читайте в материалах:

• Cookie файлы в Google Analytics
• Передача Client ID через Google Tag Manager (+видео)
• Самый простой способ передачи Client ID в Google Analytics
• ClientID в Яндекс.Метрике

В программировании существует такое понятие, как GET-запрос. GET-запросы представляют собой передачу данных непосредственно в адресной строке браузера. Здесь набор передаваемых данных на сервер начинается с символа ? и разделяется символом &. Сами данные представляют собой пары параметр=значение. Наиболее распространенными GET-параметрами, которые встречаются в работе маркетолога, являются utm_метки.

Для того, чтобы передать уникальный идентификатор пользователя в URL методом GET, нам необходимо:

1. сохранить Client ID в отдельную переменную;
2. создать пользовательский HTML тег и выполнить некоторые условия.

Сохранить Client ID в отдельную переменную

Создаем пользовательскую переменную типа Основный файл cookie с названием cookie _ga:

Переменная типа «Основной файл cookie»

В моем примере название переменной в Google Tag Manager – gaCookie.

Затем воспользуемся JavaScript-кодом из этой статьи для возвращения третьего (идентификатор клиента) и четвертого (временная метка) элементов значения cookie:

var cookie = << gaCookie >>. split ( «.» );
return cookie [ 2 ] + «.» + cookie [ 3 ];
console . log ( «Файл cookie Universal Analytics не найден » );
В интерфейсе Google Tag Manager это выглядит так:

Переменная типа «Собственный код JavaScript»

var clientId = << JS cookie >>;
var param1 = ‘?cid=’ + clientId ;
var param2 = ‘&cid=’ + clientId ;
var flag = 0 ;
if (! window . location . search ) < history . pushState ( null , null , param1 ); if ( window . location . search && !flag) < history.pushState(null, null, window.location.search + param2); В интерфейсе Google Tag Manager это выглядит так:

Пользовательский HTML тег

Триггер активации – All Pages (Все страницы). В этом коде мы изначально присваиваем переменной clientId значение, которое получаем из переменной JS cookie (см. предыдущий шаг). А далее проверяем на условия: если в URL уже есть другие параметры, то они разделяются между собой знаком амперсанд ‘&’, а если в URL нет других запросов, то наш GET-запрос начинается с вопросительного знака ‘?’. Сохраняем изменения и публикуем контейнер. При переходе на сайт увидим полученный результат:

Два варианта: 1. один параметр 2. несколько параметров в URL

С помощью данного метода вы можете вывести в URL, например, номер заказа, сгенерированный промокод, время перехода пользователя на конкретную страницу или любую другую информацию, которая пригодится вам для анализа в отчетах. Примечание: не забывайте, что если в URL присутствуют GET-запросы, то счетчики аналитики будут считать их разными страницами, создавая дубли. Тот, кто владеет JavaScript, может с легкостью писать различные решения и манипулировать настройками как ему захочется. И связка JS + GTM в этом случае очень хороша. Понравилась статья? Поставьте оценку ?

Как передать GET параметр

Всем привет! Столкнулся с задачей передачи GET параметра в ссылку. При переходе к пример с фейсбука, нужно подставить в ссылку другой номер телефона и другой её параметр. К примеру у меня есть ссылка с номером : Её код:

Мне нужно как-то реализовать, что бы при переходе к примеру с того же фейсбука эта ссылка меняла свое значение на следующий:

Не судите строго, ещё учусь Буду благодарен за любую подробную информацию!
Отслеживать
задан 1 дек 2017 в 8:57
Andrii Khmelovskyi Andrii Khmelovskyi
165 2 2 серебряных знака 12 12 бронзовых знаков

Не совсем понятно, откуда Вы берете параметры. Я правильно понял, что при клике на линку на фейсбуке, Вам нужно, чтобы Ваш сайт/приложение открывалось с разными параметрами? Т.е., если это переход с фейсбука — подставляет один параметр. Если это прямое открытие, — оставляем все, как есть?

1 дек 2017 в 9:03

@Mr.Brightside: Да, вы абсолютно правы. Нужно сделеать именно так. как это реализовать? Подскажите пожалуйста!)

1 дек 2017 в 9:12

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если я правильно понял вопрос, то есть 2 кейса.

Переход по линке с Facebook

Думаю, что на facebook у вас есть некая группа, где вы указываете ссылки для перехода на Ваш сайт.

В этом случае, эту ссылку на фейсбуке можно сделать такой:

my-link-on-my-website.com?tel=11111 

Далее, при загрузке уже вашего сайта, смотреть, что есть в url и в зависимости от этого менять содержимое контейнера:

window.onload = function() < //onLoad запустится при загрузке сайта var url_string = window.location.href var url = new URL(url_string); var param = url.searchParams.get("tel"); if(param) < //Если есть параметр, то выполняем замену текста var link = document.getElementById('myLink'); link.href = 'http://example?/tel=4352235643'; link.innerHTML = '4352235643'; >>; 

И Ваша разметка поменяется на:

Что такое onLoad и как его кушать описано тут

Прямой переход

При прямом переходе в адресной строке не будет параметров. Событие onLoad все также вызовется, но ничего не сделает, как раз из-за отсутствия параметров.

Я просто привел пример, как это можно сделать, но это лишь один из возможных вариантов. К тому же, требующий более щепетильных проверок.

• Если вы используете фреймворк, то это может помочь Вам выполнить подобную обработку
• Я бы проверял, так же, значение параметра. Дело в том, что GET параметры может подставить в ссылку любой и, если вы будете просто проверять, если ли параметр tel или нет, то выводимое в Вашей ссылки значение может оказаться неожиданным =)
• Кроме того, возможно решение через просмотр истории, если у Вас есть доступ к бэкенду. JavaScript не позволяет получать доступ к предыдущим URL, только к навигации.

Как передать get параметры в url

Передача нескольких параметров GET выполняется почти при каждом запросе к серверу. Таких параметров не должно быть слишком много, чтобы их легче было контролировать со стороны браузера и сервера. Иначе поисковая система будет воспринимать разные страницы за дубли.

1. Что такое GET-параметры
2. Какое количество параметров GET считается правильным
3. Как просканировать сайт и определить количество GET-параметров
4. Заключение

Что такое GET-параметры

GET-запрос — метод передачи данных от клиента к серверу с целью получения информации, указанной с помощью конкретных GET-параметров.

Это публичные данные, доступные при повторном просмотре ссылки в истории. Такой запрос актуально использовать при неизменных данных в адресной строке. То есть при каждом обращении к странице с заданными параметрами ее адрес остается постоянным.

GET-запрос состоит из домена, адреса страницы и параметров, которые следуют после знака «?». Формат одного параметра выглядит так: «ключ=объяснение». Такой вид имеет весь запрос:

http://site.ru/index.php?name=Катя&surname=Иванова

где name — первый параметр, а surname — второй параметр.

Этот же запрос в формате РНР :

’; echo ‘Фамилия: ‘ . $_GET[‘surname’] . ‘
’; ?>, 

где параметр if определяет условие: если существует параметр name , пусть он выведется на экран.

В результате браузер выдаст такую информацию:

Имя: Катя Фамилия: Иванова

При передаче личной информации нет надобности использовать GET запрос и параметры по причине отсутствия конфиденциальности. Информация с адресной строки открыта для пользователей.

Применение такого запроса имеет смысл в случае потребности сохранить, отправить ссылку. Для передачи секретной информации лучше использовать запрос типа POST. Страницы, запросы на которые передаются параметром GET, всегда имеют статичный вид.

Какое количество параметров GET считается правильным

Один запрос включает несколько параметров GET. Их количество не ограничено протоколом http. Лимиты в размере запроса есть со стороны сервера и браузера. У каждого из них есть свой максимальный размер для приема/передачи данных. Если длина превысит этот лимит, запрос будет урезан.

Не существует конкретной максимальной величины GET-запроса. Один сервер может принимать максимум 8 Кб, а другой — 16 Кб. Средний размер запроса колеблется в пределах 512-1024 Кб.

Фактически в одном таком запросе должно быть не больше 5 параметров, иначе каждый из них будет сложно контролировать со стороны сервера и браузера. Если нужно передать большое количество информации, рекомендуется использовать метод POST.

При использовании человекопонятных URL (ЧПУ) передача нескольких параметров GET выполняется в скрытом формате. Чтобы увидеть запрос полностью, необходимо на время отключить ЧПУ.