Dynamic links based on URL parameters

Dynamic links based on URL parameters

This will give the possibility of direct 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


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

7 Likes

Awesome Bruna! :rocket:

2 Likes

Thanks for sharing @BrunaGarcia ! :pray:

2 Likes

Hi @BrunaGarcia!
Thanks for this, it turns out I just today need to work with this!

Question though: how will this affect conversion goals if they are on the buttons we are changing the URLs for?
Looking at my page, after the change the url with this method, it no longer follows the “clkg” formatting that allows Unbounce to track clicks.
I’m not sure whether formatting the URLs to replicate this format would work either, as I’m using this to add a parameter to the end of the URL, which therefore isn’t in the list of detinations I clicked off as goals for my page.

Any input is welcome!

Just to reply to my own message, I tested using the clkg format for the URL. The clicks go to the right place, but my conversions aren’t tracked.

Any ideas would be welcome!

Hey @GregorySR
I’m glad that this article was just what you needed.

I’ve been playing around with the script and I haven’t been able to found a way to keep tracking your conversions for now, I will keep digging into it and keep this article updated - However, I had an idea! :bulb:

If the page where you are directing your user is also an Unbounce page or if is a page you are able to edit, you can use an external conversion tracking. Many people use external conversion track to make sure their users are going to the next page, so I believe you could use that as well.

Here is the documentation on it: External Conversion Tracking

Hope that helps! :slightly_smiling_face:

1 Like