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,
We have 3 pairs of keys and values here:
What are query parameters used for?
Query parameters are used to pass data to the page. Specifically, you can use it for:
- Based on the query parameters, you can display different things.
If you have the query param
name=Jennifer, you can use the
namequery parameter to display a title of
Hi Jenniferto make the page seem more personalized. You can also use
countryparameter to personalize it even further with
Hi Jennifer from CA, USA. It’s like they know me!
- 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.
- 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_mediumto track the effectiveness of their campaign.
- 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.