CTA Link: dynamic targets

  • 12 December 2014
  • 8 replies
  • 32 views
G

We need to set up the links in our CTA buttons using one of the URL params that we receive in the landing page, but I don’t see how to do that or if that is possible at all.

In our landing pages we are going to receive a “target_url” param. And that’s where we want our CTA buttoms to point to.

We are now evaluating UnBounce and we really love all the features so far, but we really need this one in order to decide to move to higher unbounce plan.

Thanks!

8 replies

Mark_Wainwright
Rank
Userlevel 2

Hi Gustavo,

Unfortunately we don’t have any built in functionality that’ll help you achieve that.

It’s something you could achieve with custom JavaScript, though. First, you would need to grab the value from the URL, using a script like this: http://stackoverflow.com/a/1099670

Then, you could use jQuery to change the URL of the button to the URL grabbed from the query string.

I hope that helps!

G

Hi Mark,

Thanks so much for your reply.

We are going to test that solution you suggest. It seems like it might work.

Regards

J

Hi Gustavo, 
Did you ever get this working? Would love to hear how it went!

G

Yes Justin, based on the idea suggested by Mark we developed a script for each landing page to get a parameter from the URL (which specifies target URL) and change the target destination of the button. It worked like a charm.

J

Gustavo, this sounds like just the thing that others here would find useful. Do you have any time to go through the steps on how to achieve this? I would love to share this with the Community! 

Feel free to reply here, or directly to me at jveenema@Unbounce.com

G

Hi Justin,
It’s pretty straightforward indeed. For each landing page we add a script (javascript), similar to this one:

// <![CDATA[<br />function gup( name )<br />{<br /> name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");<br /> var regexS = "[\\?&]"+name+"=([^&#]*)";<br /> var regex = new RegExp( regexS );<br /> var results = regex.exec( window.location.href );<br /> if( results == null )<br />

 return null;<br /> else<br />

 return results[1];<br />}<br />// Get param "target_url" which we know is in the landing URL<br />var target_url = decodeURIComponent(gup('target_url'));<br />// Remove protocol (http(s)://)<br />target_url = referion_target_url.replace(/.*?:\/\//g, "");<br />// Remove any hashtag, if any<br />target_url = referion_target_url.replace(/#.*/,'');<br />



  <br />// Look for the button we want to change and replace anything after "/http/" with the new target<br />target_url = document.getElementById('lp-pom-button-225').href.replace(/\/http\/.*/,'/http/'+target_url);<br />document.getElementById('lp-pom-button-225').href=target_url; <br />// ]]>

As you see, we are assuming that when we call the landing page there is a param “target_url” which tell us the final destination for the CTA button in the landing.
Beisdes, you need to look for the DOM ID that unbounce assigns to that button, in this example “lp-pom-button-225”.

Hope this helps 🙂

J

This is fantastic, Gustavo! If you ever feeling generous, I would love to see a step-by-step guide for others to get this set up. I could even make it into an official ‘article’ in the Community to get more visibility on to it. There may or may not be a nice big box of Unbounce swag in it for you as well… 😉

W

Would love to see more on this subject. Any updates since last year?

Reply


Terms & ConditionsCookie settings