Dynamic text replacement – client side

Last Updated: 15.03.2019

Do you want to catch GET parameters sent in the URL and use them on your landing page? Let us use the following example URL:

https://www.landpage.co/dynamic-text-replacement?name=Buy%20Landingi%20now%20and%20start%20getting%20leads%20like%20a%20pro

The GET parameters in the URL begin after the ‘?’ mark – in this case, it is the ‘name’.

Suppose we want to create a mailing to our contact list and we want the email to contain links to our landing page. This is a good opportunity to personalize the message to mailing recipients, for example by adding the name of the address on the landing page.

1. In order to do this, you first need to go to your landing page Dashboard and paste the following code into the Javascript Code tab on the recommended position body bottom on the main page.

<script>
(function(){
    'use strict';
    var urlVars = getUrlVars();
    var findDynamicPhrases = new RegExp('\%(.*?)\%', 'g');
    var findPercent = new RegExp('%', 'g');
    var sections = $('.widget-text');
    function escapeOutput(toOutput){
    	return toOutput.replace(/\&/g, '&')
        .replace(/\</g, '<')
        .replace(/\>/g, '>')
        .replace(/\"/g, '"')
        .replace(/\'/g, '&#x27')
        .replace(/\//g, '&#x2F');
		}

    function convertPhrase(string) {
        string = string.replace(findPercent, '').split('||');
        var dynamic = string[0];
        var fallback = string[1];
        var result = fallback;
        if ($.isEmptyObject(urlVars)) {
            return result;
        }
        $.each(urlVars, function (key, value) {
            if (value === '') {
                return false;
            }
            var findKey = new RegExp('{{'+key+'}}', 'g');
            if (dynamic.match(findKey)) {
                result = dynamic.replace(findKey, decodeURIComponent(value));
                return false;
            }
        });
        return escapeOutput(result);
    }

    sections.html(function(i, old){
        return old.replace(findDynamicPhrases, convertPhrase);
    });
})();
</script>
Dynamic text replacement

2. Then go to the editor and add the appropriate text in the desired place of LP, according to the following pattern:

% Hi {{name}}, || Hi!%

The content of the sentence can be changed, however, it is important that the whole sentence is between the ‘%’ signs.

In the double bracket, we give the name of the parameter to be passed as dynamic content.

After two characters ‘|’ place some alternative text if for some reason the search parameter GET will not be included in the link.

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.