Dynamic links based on URL parameters
This will give the possibility of directing your customers to a different page based on the URL parameters of the page.
You can see this in action (built in Unbounce) here:
http://tst.brunagarcia.tk/testing-dinamiclink/?myparam=Unbounce
🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
Single Option Steps:
Step 1.
Make sure to have an URL parameter being set on your page URL, like the URL below
www.myURL.com/?myparam=Unbounce
We are going to use the value of the parameter to change or add to the URL where you want your user to go.
Step 01 would be the same for single and multiple options - See below:
Step 2.
Copy and paste the code below to your page as a Javascript script and place as before body end tag.
<script>
(function () {
const url_string = window.location.href
var url = new URL(url_string);
//Change the words myparam to the name of your parameter.
const myparam = url.searchParams.get("myparam");
//Only one option case: Add dynamic URL here - Eg: Google Search
//Change the "lp-pom-button-11" to your button id.
document.getElementById("lp-pom-button-11").href = `https://www.google.com/search?q=${myparam}`;
})
</script>
Step 3.
Now you will have to adapt this script to work with your parameter and to take your user to the page you desired.
3a.
Change all the myparam words on the script to your parameter name.
3b.
Change the lp-pom-button-11 to your button ID. No need to include the # sign.
3c.
On the same line that I changed my button ID - I’m using my URL parameter to perform a google search by adding the parameter variable in my Google Search URL, in your case, you can add the parameter anywhere on the URL you want your user to go by just wrapping the parameter name in ${ }. So you can add your URL there and use the parameter as part of the URL.
Multiple Option Steps:
You will use the multiple options if you want the same Unbounce page to take the customer to a different URL after a button is clicked on the page, based on the URL parameter on your Unbounce page. In my example case, if the parameter is Unbounce the clock would take the user to Unbounce.com and if the parameter is Google it would go to Google.com.
Considering Step 1 above is valid for both options, let’s jump to step 2.
Step 2.
Copy and paste the code below to your page as a Javascript script and place as before body end tag.
<script>
(function () {
//Getting the url of the page
const url_string = window.location.href
//Temp URL
var url = new URL(url_string);
//Change the words myparam to the name of your parameter.
const myparam = url.searchParams.get("myparam");
//Multiple options case:
switch (myparam){
case 'Google':
document.getElementById("lp-pom-button-46").href = "http://www.google.com";
break;
case 'Unbounce':
document.getElementById("lp-pom-button-46").href = "http://www.unbounce.com";
break;
}
})();
</script>
Step 3.
Now, same as on the single option you will have to adapt this script to work with your parameter and to take your user to the page you desired.
3a.
Change all the myparam words on the script to your parameter name.
3b.
Change the lp-pom-button-46 to your button ID. No need to include the # sign.
3c.
Change the values of the line case, for the value of your URL parameter and the URL, after the = sign to the address that you want to take your user based on the parameter.
Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks
