Consider Query Params When Writing Conditional Paths
I had done a freelance project for a client as an Angular app. One day, I got an email from this client that said something quirky is happening. Not on my watch, it’s not!
He told me that he created a Facebook ad that linked to the web page, https://my-clients-app.com.com/quote
(domain name changed to protect privacy of my client). Usually when he goes to that page directly, it will open up a new tab, which is what he wanted to happen. However, when he clicked on the ad and goes to that page, it does not open a new tab. What gives?
Since marketers use query parameters to analyze the effectiveness of their campaign, you’ll often see that when someone adds the link to their ad as https://my-clients-app.com/quote
, the user that actually lands on the page will see a lot more. The url will have so many more query parameters added to the end of it, like https://my-clients-app.com/quote?utm_campaign=Boost%20%7C%20Traffic%20%7C%20Sell&adset=Traffic%20%7C%20LinkClicks%20%7C%2064%2B&adname=Attn%20Customers&fbclid=GxBW1sjFnEg0KXlbXP74bz5kS5gj-8SgysoQYYPo4qw3c84nhnITgZT2Spy5Q
.
(If you are not clear on what a query parameter is, you can read more about it here.)
What happened was that I wrote a conditional based on the path, but only the path, and I didn’t consider the query parameters that might also come along with it.
I was a little irritated that he didn’t tell me what the url was going to be, that there was going to be query parameters appended to it. If he would have told me, I would have coded and accommodated for it.
But then again, come on, Jennifer. You’re a professional. You should have known better!
This was what I had:
if (this.router.url === '/quote') {
const path = `/thanks?${queryParamsString}`;
window.open(path);
}
In Angular, this.router
comes from the import, import { Router } from '@angular/router';
. this.router.url
gives back the path of the url, which is the path after the hostname.
Entire Url | What this.router.url would return |
https://my-clients-app.com/quote | /quote |
https://my-clients-app.com/quote?utm_campaign=Boost%20%7C%20Traffic | /quote?utm_campaign=Boost%20%7C%20Traffic |
This is how I solved this “quirkyness”:
if (this.router.url.startsWith('/quote')) {
const path = `/thanks?${queryParamsString}`;
window.open(path);
}
Have you ever had any bugs related to query params?
Query params are great for passing data, but sometimes tricky when you are trying to parse urls. Have you ever experienced any bugs related to query params? If so, what were they and how did you fix it? Share relevant experiences below, and make it a great learning community for all of us!