What is a Query Parameter and What Are They Used For?

Posted On August 2, 2020

What is a Query Parameter (or “query param”)?

A query parameter is a pair that includes key and value that is listed in the url. Query params usually start with a question mark, ?. You can have multiple keys and values in the url too, which are separated by an ampersand, &.

Example:

http://www.codediaries.com?state=CA&country=USA&name=Jennifer

We have 3 pairs of keys and values here:

Key	Value
state	CA
country	USA
name	Jennifer

What are query parameters used for?

Query parameters are used to pass data to the page. Specifically, you can use it for:

1. Based on the query parameters, you can display different things.
   
   Example:
   If you have the query param name=Jennifer, you can use the name query parameter to display a title of Hi Jennifer to make the page seem more personalized. You can also use state and country parameter to personalize it even further with Hi Jennifer from CA, USA. It’s like they know me!
   
   
2. Query parameters can be used to filter data, so that when you go back to that url, you will see the same filtered data. Google does this, so when you share the Google search link, you will see the same search results.
   
   Example:
   https://www.google.com/search?q=coder+diaries
   
   
3. You can use the query parameters to distinguish and give information on where the user came from. This data can also be saved and submitted when the user submits a form or performs a call-to-action. Marketers often use utm_campaign, utm_source, and utm_medium to track the effectiveness of their campaign.
   
   Example:
   http://www.coderdiaries.com?utm_campaign=Jennifer%20shampoo%20campaign&utm_source=facebook&utm_medium=social
   
   
4. Query parameters can be used to maintain data across multiple web pages that are part of one flow.
   
   For example, if you had a signup flow that spanned across 3 web pages:
   – Page 1 – User fills out First Name and Last Name on Page 1.
   – Page 2 – Page 2 has query parameters of first name and last name, ?first=Jennifer&last=Pham, so that is already filled out and pre-populated. User then proceeds to enter their address.
   – Page 3 – Page 3 has query parameters of all fields that the user has entered so far, which include first name, last name, address. Query params should be something like ?first=Jennifer&last=Pham&address=123+Main+St+Los+Angeles+CA. All these fields are pre-populated. User then clicks checkmark that they acknowledge the terms and submits the form.