Different text based on value in URL?

  • 5 November 2020
  • 5 replies
  • 24 views

I want to have different texts appear based on what is detected in the URL. So for instance:

  • if a URL parameter is “emotion” and the associated value is “angry”, the landing page text says “so sorry you are angry”

  • and if a URL parameter is “emotion” and the associated value is “happy”, the landing page text says “glad you are feeling good!”

Any clues? Any example script available?

Thank you in advance!!


5 replies

Userlevel 3
Badge +1

Hi @MacG1,
Our team just prepared this quick snippet for you, let me know if this works.

var getParam = 'emotion'; /* Here goes your param name */
var elementSelector = document.getElementById('lp-pom-text-999'); /* Replace lp-pom-text-999 with the ID of the element you want to change its text */
var text1 = 'so sorry you are angry'; /* Text if Angry */
var text2 = 'glad you are feeling good!'; /* Text if Happy */
/* GET URL PARAMS */
var getUrlParameter = function (sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};
/* GET PARAM VALUE */
var paramValue = getUrlParameter(getParam);
if (paramValue === 'angry') {
	elementSelector.innerHTML = text1;
} else if (paramValue === 'happy') {
	elementSelector.innerHTML = text2;
}

Cheers,
Josefina

That looks like a good script. But I also want to point out that Unbounce supports Dynamic Text Replacement in the builder.

Here is a step-by-step guide in their documentation on changing text based on the value in the URL.

That works. Thank you!!

Hi Kyle - I think DTR in the builder only allows you to use the actual values in the URL’s. Josefina’s code allows me to have sentences etc… based on values in the URL. But if I am missing something please do correct!

Badge

Hi all,

I know @MacG1 got this to work, but it isn’t working for me :-/

I’m trying to accomplish a similar goal.

I’m passing a score parameter from a typeform quiz. I’m using regular UB dynamic text to display the score itself (you got “X” out of 24), but I also want to display a different image & different text below the score.

You can view the page here: https://my.parlor-games.com/survey-results/?score=5.

As you can see, the score itself is populating properly, but I want different text below the hormone o’meter for scores less than or equal to 5 and less than or equal to 11 and a different image of the hormone o’meter for those parameters as well. (i’m not getting toooo accurate about the meter).

At this point, the script above is not working to populate the text. Any idea what I’m missing?

And bonus points if you can tell me how to populate the proper image… 😉

Thanks!
Kirsti

Reply