How do I create dynamic button URLs (destination links) based on URL parameters?

  • 26 February 2015
  • 12 replies
  • 150 views
M

HI - 

We’re using a squeeze page at the beginning of our landing page that passes users to a quiz than provides them with an outcome based on responses.  We’ve added Dynamic Text to change the CTA text and button names on the page.  (all’s good here)

What we would LOVE to do is to provide dynamic BUTTON URLS (not forms) that would take different users to different places to sign up.

Example:

3 different parameters passed through from initial buttons 

  • user=home-owner
  • user=renter
  • user=home-buyer
    Renter and Home Buyer - contact button would fire a lightbox to connect with my clients (form)
    Home Owner - contact button would take them to another page to get a property valuation

I’m thinking that we should be able to add the parameter to the end of our URL (or subdomain) that we could create?  

Thanks - Full experience can be found at www.quiz.luxurychicagoapartments.com/landingpage

12 replies

J

Hi Matthew!
We already spoke on the phone last week, but I just wanted to update the community with our answer. At this point in time, we don’t have any direct way to do this within the app - however - with a bit of javascript this should be achievable. We haven’t tested any solutions so far, but this should be feasible if you have a developer to build this out for your team. 

J

Is there a way you could provide an example on how this can be executed in javascript?  Thanks

M

+1

J

Hey guys, 
At this point I don’t have a script on hand that you could test out, but when I asked my dev team about it before they mentioned it should be possible (in theory) with a bit of javascript development. We don’t quite have the bandwidth to dig into this at this time, but if anyone in the Community is able to figure out a solution we would be happy to update this post. Hope this helps! 

J

Hi,
We did something similar. But instead of dynamically changing a button URL we changed an iFrame URL based on a UTM parameter.

The URL in the iFrame has the following format:

www.example.com/landingpage/ '-thedynamicpart-' /subpage

The script pulls the UTM parameter 'utm_affiliate' from the unbounce parent url and rewrites the URL of the iFrame (with id 'frame1'), so it now includes this value. I tried to adapt the script so that it works for a button url instead, but without any luck. I think it should be relatively easy though. Maybe someone else can help out...
J

Hi,
We did something similar. But instead of dynamically changing a button URL we changed an iFrame URL based on a UTM parameter.

The URL in the iFrame has the following format:

www.example.com/landingpage/'-thedynamicpart-'/subpage

The script pulls the UTM parameter ‘utm_affiliate’ from the unbounce parent url and rewrites the URL of the iFrame (with id ‘frame1’), so it now includes this value. I tried to adapt the script so that it works for a button url instead, but without any luck. I think it should be relatively easy though. Maybe someone else can help out…

function getURLParameter(name) {

  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;

}



// Get the utm affiliate parameter

var utmAffiliate = getURLParameter('utm_affiliate');



// Get the iframe url

var iframeUrl = document.getElementById('frame1').src;



// Make sure the utm_affiliate param and the iframe url are existing

if (utmAffiliate !== null && typeof iframeUrl !== 'undefined') {

 

  // Pattern for finding the http(s)://-part in the URL

  var pattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/i;



  if (pattern.test(iframeUrl)) {

    // Split the remaining URL at the '/'

    var urlParts = RegExp.$3.split('/');

 

    // Change the iframe affiliate with the utm param

    var removed = urlParts.splice(2, 1, utmAffiliate);

 

    // Generate the new URL

    var newIframeUrl = RegExp.$2 + urlParts.join('/');

 

    // Change the iframe URL

    document.getElementById('frame1').src = newIframeUrl;

  }

}
J

Hi,
We did something similar. But instead of dynamically changing a button URL we changed an iFrame URL based on a UTM parameter.

The URL in the iFrame has the following format:

www.example.com/landingpage/'-thedynamicpart-'/subpage

The script pulls the UTM parameter ‘utm_affiliate’ from the unbounce parent url and rewrites the URL of the iFrame (with id ‘frame1’), so it now includes this value. I tried to adapt the script so that it works for a button url instead, but without any luck. I think it should be relatively easy though. Maybe someone else can help out…

<br /> function getURLParameter(name) {<br /> &nbsp; return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;<br /> }<br /> <br /> // Get the utm affiliate parameter<br /> var utmAffiliate = getURLParameter('utm_affiliate');<br /> <br /> // Get the iframe url<br /> var iframeUrl = document.getElementById('frame1').src;<br /> <br /> // Make sure the utm_affiliate param and the iframe url are existing<br /> if (utmAffiliate !== null && typeof iframeUrl !== 'undefined') {<br /> &nbsp; <br /> &nbsp; // Pattern for finding the http(s)://-part in the URL<br /> &nbsp; var pattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/i;<br /> <br /> &nbsp; if (pattern.test(iframeUrl)) {<br /> &nbsp;&nbsp;&nbsp; // Split the remaining URL at the '/'<br /> &nbsp;&nbsp;&nbsp; var urlParts = RegExp.$3.split('/');<br /> &nbsp; <br /> &nbsp;&nbsp;&nbsp; // Change the iframe affiliate with the utm param<br /> &nbsp;&nbsp;&nbsp; var removed = urlParts.splice(2, 1, utmAffiliate);<br /> &nbsp; <br /> &nbsp;&nbsp;&nbsp; // Generate the new URL<br /> &nbsp;&nbsp;&nbsp; var newIframeUrl = RegExp.$2 + urlParts.join('/');<br /> &nbsp; <br /> &nbsp;&nbsp;&nbsp; // Change the iframe URL<br /> &nbsp;&nbsp;&nbsp; document.getElementById('frame1').src = newIframeUrl;<br /> &nbsp; }<br /> }

 </pre><p>
J

This is a really crafty workaround. Great to see that you’re pushing the boundaries!

Stephanie

Hey Matt did you ever find a solution for this? I just posted a new thread looking for the same thing you were here.

M

I did but haven’t posted the jscript here. Sorry will do that tonight. Stay tuned!

Stephanie

Awesome, thanks so much!

Stephane_Gringer1

can you paste the script? thanks in advance!

Reply


Terms & ConditionsCookie settings