Как передать параметр в url
Передача GET-параметров в URL с помощью GTM
В предыдущей статье я показывал, как можно извлекать данные из URL. Однако с помощью JavaScript и Google Tag Manager можно не только получать из URL, но и передавать GET-параметры в URL.
В рамках этой статьи разберем способ добавления в URL GET-параметра со значением Client ID (уникальным идентификатором пользователя). Как на скриншоте ниже:
Пример передачи GET-параметра в URL (Client ID)
О том, что такое Client ID, читайте в материалах:
В программировании существует такое понятие, как GET-запрос. GET-запросы представляют собой передачу данных непосредственно в адресной строке браузера. Здесь набор передаваемых данных на сервер начинается с символа ? и разделяется символом &. Сами данные представляют собой пары параметр=значение. Наиболее распространенными GET-параметрами, которые встречаются в работе маркетолога, являются utm_метки.
Для того, чтобы передать уникальный идентификатор пользователя в URL методом GET, нам необходимо:
Сохранить Client ID в отдельную переменную
Создаем пользовательскую переменную типа Основный файл cookie с названием cookie _ga:
Переменная типа «Основной файл cookie»
В моем примере название переменной в Google Tag Manager – gaCookie.
Затем воспользуемся JavaScript-кодом из этой статьи для возвращения третьего (идентификатор клиента) и четвертого (временная метка) элементов значения cookie:
Сколько GET-параметров должно быть в URL
Передача GET-параметров осуществляется каждый раз, когда происходит запрос к серверу. Не рекомендуется использовать в URL слишком много параметров, так как при росте их числа сложно установить контроль над ними со стороны веб-браузера и сервера. Если же такое произойдет, то поисковые системы начнут воспринимать разные страницы ресурса как дубли.
Как не столкнуться с такими проблемами и что такое GET-параметры – поговорим в сегодняшней статье.
Что такое GET-параметр
Прежде чем перейти к определению GET-параметра, поговорим о том, как происходит связь клиента и сервера в интернете. Выполняется это через HTTP-протокол – протокол передачи гипертекста. Благодаря ему обмен данными может осуществляться по принципу «запрос-ответ»: когда пользователь получает URL-адрес через веб-браузер, выполняется запрос на сервер, и в качестве ответа предоставляется HTML-страница, загруженная браузером. Для такого рода связи используются такие параметры, как GET и POST. Нас интересуют лишь GET-запросы – остановимся на них поподробнее.
Когда выполняется метод GET, клиент использует HTTP-протокол на веб-сервере для запроса необходимого ресурса, затем он отправляет серверу определенные параметры GET через запрошенный URL. Страница, созданная данным методом, может быть открыта повторно множество раз, кэширована браузером, проиндексирована поисковыми системами и добавлена в закладки пользователем.
GET-параметры представляют собой пары и соответствующие им значения, так называемые пары «имя-значение». Они всегда начинаются с вопросительного знака «?». За ним следует имя переменной и соответствующее значение, разделенные знаком «=». Если URL-адрес содержит более одного параметра, то они разделяются амперсандом «&».
Thing – первый GET-параметр, section – второй.
В коде прописывается следующим образом:
Чаще всего необходимость в таких запросах возникает, когда нужно отфильтровать страницу по каким-либо параметрам. Например, чтобы отобразить список определенных машин на сайте по продаже авто, открыть каталог смартфонов белого цвета с 32 Гб памяти и т.п.
Таким образом, мы можем прописывать параметры в URL и изменять с их помощью содержимого страницы.
Для чего нужен параметр GET
URL-адреса с GET-параметрами называются динамическими – их изменение приводит к смене адреса и содержимого страницы. Например, если интернет-магазин только что добавил продукты на страницу категории, а пользователь в этот момент открывает эту страницу в браузере, то новые продукты также будут отображаться, так как адрес страницы запрашивает измененный контент с помощью параметра GET. Также в данном методе происходит подстраивание заголовков под запрос пользователей, благодаря чему можно увеличить конверсию сайта. GET-параметры необходимы при создании динамических сайтов – интернет-магазинов, форумов, сайтов-отзовиков и т.п.
Стоит также понимать, что при передаче личной информации не рекомендуется использовать GET-параметры, так как они совершенно не подходят для конфиденциальной информации. Связано это с тем, что информация в адресной строке открыта каждому. Если вы хотите использовать в URL конфиденциальную информацию, то лучше воспользоваться POST-запросами.
Оптимальное количество GET-параметров
Как мы уже выяснили, один запрос включает в себя один или несколько GET-параметров. HTTP-протокол может использовать неограниченное количество таких запросов, но в этом нет никакой необходимости. Напротив, при использовании большого количества параметров могут возникнуть проблемы с рейтингом сайта в поисковых системах. Связано это с тем, что лимиты все-таки присутствуют, но со стороны сервера и браузера. Если длина будет превышена, то запрос попросту урежется.
Однако никто не сможет назвать идеальное количество параметров. Для разных серверов это число может колебаться – для одного 32 Кб, для другого – 1024 Кб. Золотая середина – 512 Кб. Рекомендуется использовать не более 5 параметров, иначе их будет сложно контролировать со стороны сервера и браузера. Если необходимо отправить большое количество данных, то лучше использовать POST-запросы.
Заключение
Мы разобрали один из методов отправки данных на сервер под названием GET. Он передает информацию в URL через специальные GET-параметры, количество которых должно соответствовать типу сервера. Если лимит будет превышен, то запросы сократятся до нужного размера. Использование таких опций полезно на динамических сайтах, где контент адаптируется под определенного пользователя и его запросы.
URL.js или дружим JavaScript с обработкой ссылок
Доброго времени суток, уважаемые хабравчане!
Возникла передо мной сегодня задача генерации GET-параметров и всего URL в целом, на стороне клиента, прям вот щас, без возможности «поговорить» с сервером. Сразу оговорюсь, про этот пост я узнал вот прям перед написанием данной статьи ибо сначала закончил писать, а потом уже прибег к поиску, да и пост тот — не со всем про то же самое, что у меня.
Задача и проблемы
Писал я на чистейшем JavaScript, причем без использования prototype.__defineGetter__ или prototype.__defineSetter__ в угоду кроссбраузерности ибо IE Код конструктора
Подробнее
Парсинг
Работать, ясное дело, будет на всех языках, понимающих RegExp. Пользуйтесь, не стесняйтесь.
Тут ничего ничего сложного: разбиение по указанному выше regExp и сохранение данных в хеш this.data
Разве что, я упоминал ранее — необходима удобная работа с GET-параметрами урла, а посему разбиваем query при помощи split ( split() в данном случае «дешевле» чем regExp ) и сохраняем это в тот же пресловутый хэш. Стоит отметить использование decodeURIComponent, ведь GET-параметры могут быть urlencoded.
Вариант 1. «По красоте»
Getters/Setters
Для удобной работы с чтением/изменением параметров я решил выбрать JS way геттеры и сеттеры. T.e. метод по названию свойства и если метод вызывается с указанием параметра — это setter, если без параметра — это getter.
Объявлять я их буду через URL.prototype = < >дабы не плодить в памяти избыточные экземпляры метода.
В пример приведу один метод, в силу того что они похожи:
Отдельно остановимся на геттер/сеттере для свойства params
Собираем URL обратно
Стоит отметить, что при сборке GET-параметров, значения параметров преобразуются в escape-последовательность.
Во-первых: это правильно.
Во-вторых: если мы GET-параметром передаем данные вводимые пользователем, то вставленный юзером амперсанд разрушит последовательность ключ-значение и все покатится в тартарары.
Ну и чтобы было удобно — метод для перехода по сгенерированной ссылке:
Как видно: если не указана схема, но указан хост — автоматически подставляется схема http как самая распространенная.
Далее происходит обновление ссылки и переход по оной.
Расширяем объект String
По идее, на этом можно было бы закончить. Но, мне показалось что было бы удобно работать прямо со строковыми переменными без явного создания экземпляра объекта (как бы странно это не звучало, но, в JS нет классов, как таковых).
Как обычно приведу пример одного метода:
Вариант 2. «По Фен-Шуй»
Если предыдущий вариант, скажем так, был «красив»в использовании, то данный вариант, будет лаконичен. как с точки зрения кода, так и с точки зрения использования.
Getters/Setters
Так вот, getter/setter в данном случае будет один на всё, ну то есть совсем.
Расширяем объект String
Подведение итогов
Итак, на выходе мы имеем либу, дающую нам возможность адекватно работать с URL, причем не просто парсить, но и менять отдельные участи URL. Это уже не говоря о весьма удобном, на мой взгляд, инструменте для работы с GET-параметрами.
Плюсы и минусы подходов
Вариант 1
Вариант 2
А за сим — откланяюсь, искренне надеюсь что мой пост принесет кому-то пользу.
Всем хорошего кода, больше сна и чтобы IE не портил жизнь.
Параметры URL и их использование
При построении ссылок веб-страниц, а также в работе с трафиком и его источниками используют URL-параметры. Это установленные значения в линке, которые добавляются после доменного имени для динамической передачи дополнительной информации. С помощью этих переменных, ваша страница или подстраница сайта становится более гибкой, что позволяет поднять её в поисковой выдаче и увеличить количество посещений. По сути, устанавливая параметры URL в конечную ссылку, вы тем самым можете настроить передачу всевозможных данных, которые будут фиксироваться в статистике и позволят проанализировать эффективность отработанной кампании.
Обзор URL параметров
Прежде всего, их роль заключается в предоставлении дополнительной информации о вашем веб-сайте, чем вы занимаетесь, кто вы и т.д. В зависимости от того, какие переменные добавлены в URL-ссылку или шаблон страниц, поисковые системы будут обрабатывать её части, группируя подобные и исключая возможность выдачи дублируемого контента в результатах. Есть разные примеры настроек линок для дальнейшей индексации и исключения повторов. Допустим, это онлайн-магазин одежды. В настройке ссылки кампании, динамические параметры помогут поисковой системе выбрать и показать один и тот же контент, только под разными адресами и так, чтобы это совпадало с данными источника трафика. Например, если пользователи из разных стран. Говоря простым языком, установленные параметры URL служат индикатором для передачи данных с источника, что в процессе обеспечивает эффективную расшивку трафика на целевые офферы. Однако для того чтобы этот механизм отрабатывал правильно, нужно понимать, как именно и какие значения вписывать.
Применение параметров URL
Не стоит торопиться добавлять множество супер важных параметров в URL-адрес кампании. Сначала нужно понимать, как это сделать правильно, чтобы индексации прошла успешно и ваша веб-страница или подстраница поднялась в выдаче. Рассмотрим примеры построения линок.
Теперь, мы добавим параметр, который состоит из переменной и значения. Выглядит это так:
З нак вопроса «?» это символ, который указывает на начало запроса. Ставится он в конце исходной ссылки. Знак равенства «=» отделяет переменную от значения и образует пару.
Таким образом, мы получаем следующий URL-адрес:
Если вы хотите указать не одну, а несколько пар параметров, используйте символ амперсанда «&», чтобы отделить последующие пары значений. Пример ниже:
Переменная в фигурных скобках сообщает системе, что вы хотите получить обратно данные этого значения после того как пользователь кликнул на рекламу. Так, трекер получает данные с источника трафика и записывает их в статистику.
Это самый простой способ передать параметры URL на любую веб-страницу, оффер или лендинг, используя HTML код. Однако есть примеры использования этих параметров в php и JavaScript для передачи значений, их хранения, сокрытия или трекинг. Подбирая формат включения переменных в код, вы сможете настроить определённую логику для сбора необходимой информации по трафику.
Кроме того, отработка параметров также зависит от метода HTTP. Чаще всего используют get параметры в адресной строке, чтобы запрашивать данные с источников.
URL get параметры
Данные значения предоставлены в форме запроса и работают на приём данных с источника трафика, которые в последствие передаются через трекер на сторону партнёрской сети. Их ещё называют токенами, которые устанавливаются в конце ссылки кампании для передачи статистических и динамических значений. Использование таких токенов, не зависимо от их количества, позволяют настроить уникальные страницы с get-параметрами. К примеру, вы можете настроить подстановку значений:
“Важная информация для пользователей << os >>!”
Здесь, в значение << os >> подставляется тип оперативной системы: Android или iOS. В зависимости от полученных данных, система определит устройство и покажет соответствующий контент на целевой странице. Подобным образом, вы можете отследить различные переменные в URL-адресах, такие как страна, язык, город, тип трафика, устройство, браузер, и т.д. Трекер используют для оптимизации процесса, когда вы настраиваете несколько кампаний сразу и отправляете пользователей на разные страницы.
В дополнение, параметры URL позволяют определить, какая кампания отработала лучше с разными источниками трафика. Добавляя их в линку, вы собираете статистику по всем кампаниям и расшитому трафику на конкретные лендинги и офферы.
Как работать с параметрами в AdsBridge
Главное преимущество трекинг платформ в том, что они автоматизируют настройки URL-адресов для эффективной расшивки трафика от источников к партнёркам. Современный трекер позволяет вам контролировать потоки и распределять пользователей на конкретные страницы по множеству параметров. A dsBridge – одно из лидирующий SaaS-решений с полноценным функционалом, кастомными настройками и авто-оптимизацией. Работая с URL-параметрами на AdsBrdige, вы экономите много драгоценного времени на настройках и получение подробной статистики для дальнейшего анализа. Таким образом, вы не только создаёте уникальные линки, но и собираете полную аналитику по их эффективности.
Платформа также предоставляет удобный сервис по сокращению ссылок. Когда вы добавляете более пяти параметров в одну линку, она становится очень громоздкой. На AdsBridge такую URL-строку можно сократить с помощью инструмента Index Page. При этом все параметры группируются и добавляются к домену. Отрабатывать такая ссылка будет также:
С помощью этой функции, намного проще работать с конечной ссылкой кампании и устанавливать её на источники. Сокращенные URL-строки упрощают процесс модерации на Google AdWords. По сути, вы будете получать все данные в статистике по запрашиваемой информации только, вместо длинной полосы в адресной строке, у вас будет отображаться короткая линка.
В заключении
Работа с параметрами запроса в URL, с примером из реальной практики.
В статье разберем что такое параметры запроса, познакомимся c так называемыми utm-метками, и научимся работать с параметрами запроса на примере одной ситуации из моей практики.
Внимание! Поскольку статья для начинающих веб-разработчиков, многие понятия в статье даются в упрощенном виде для облегчения понимания.
Параметры запроса
Зачастую, кроме адреса страницы сайта, в ссылке требуется передавать какие-то дополнительные параметры.
Представим, что есть каталог товаров в интернет-магазине. В каталоге может быть сотни и тысячи наименований товара, и, если выводить их на одной странице, она получится просто огромной, и будет грузится долгое время.
Всем известен выход из этой ситуации: нужно разбить каталог на страницы. Все вы видели такие страницы, там десять или двадцать товаров, а также ссылки на другие страницы каталога.
Как же сформированы подобные ссылки? Вот здесь-то и используются параметры запроса в URL.
Часто параметры запроса называют GET-параметрами. Это не совсем верно. Да, при запросе методом GET, эти параметры видны в строке браузера, но их с тем же успехом можно передавать и POST-запросом.
Посмотрите на адрес:
https://someshop.ru/catalog/iphone?page=1&perpage=20
Вот именно строку запроса, в большинстве случаев называют GET-параметрами.
Эта строка состоит из пар имя_параметра=значение_параметра.
Пары разделены между собой амперсандом &.
Строка запроса отделена от адреса (с путем) знаком вопроса ?
В адресе выше мы имеем два параметра запроса:
Они означают, что ссылка ведет на 1-ю страницу каталога, и выводить на странице нужно 20 товаров.
UTM-метки
Одним из распространенных примером применением параметров запроса являются так называемые UTM-метки.
UTM-метки – это, по сути, набор параметров запроса с заданными именами.
Они «де-факто» являются стандартом меток для сбора статистики. Практически все системы аналитики, CRM-системы, многочисленные сервисы из самых разных областей, поддерживают работу с UTM-метками.
Имена основных меток:
Пример из практики
Я технически поддерживаю один из обучающих проектов.
Имела место следующая ситуация.
Проблема была в том, что при переходе по ссылке на страницу с формой, UTM-метки туда не передавались, и, соответственно, невозможно было понять по какому каналу рекламы пришел человек, который заполнил эту форму.
Формулируем задачу для решения этой проблемы:
нужно взять UTM-метки из строки запроса лендинга и подставить их в ссылку на страницу с формой.
Сделать это нужно было максимально быстро, т.е. «вчера» поскольку на страницу уже шел трафик.
Работа с параметрами запроса на сервере (PHP)
Задача была решена парой строчек кода на PHP.
Ниже код двух страничек, первая это эмуляция лендинга со ссылкой на эмуляцию страницы с формой, вторая это эмуляция страницы с формой.
Вторая страница нужна, чтобы вы могли скопировать ее посмотреть результат перехода по ссылке с лендинга.