Dynamic text replacement on a landing page

Last Updated: 05.02.2020

The dynamic text allows you to personalize and customize content on the webpage by adding proper parameters to the URL address. You can successfully add dynamic text to your landing pages at Landingi platform, also when using Google Ads and dynamic keywords.

Example of dynamic text usage

Users type different keywords in the browser while searching for your product. You want to display different header for every group, relevant to their search, but on the same landing page with the same URL address. You don’t want to make many almost identical websites which will only differ in detail – it would be cumbersome to manage. In this case, it will be useful to put dynamic text on the landing page.

Click on the links below to see how the header and button label change depends on the parameter passed in the URL.

dynamic_text_EN1

Link with parameters should be built on the schema below:

landingpage_URL?parameter=value

Parameters in the URL address starts after the sign ‘?’; in our example, it is the ‘destination’ parameter.

To display dynamic text on your landing page in Landingi platform, you should meet three conditions:

  • Link to your landing page have proper parameters.
  • You pasted the JavaScript code on your landing page which captures the parameters.
  • You marked the content on your landing page (in the editor).

How to display dynamic text on a landing page?

Step I (Dashboard) – capturing parameters from the landing page’s URL by JavaScript code

1. Log in to the Landingi platform, go to the Landing pages tab and enter the Dashboard of chosen landing page. Go to the JavaScript codes tab and click on add script.

2. Paste the code below on the Body bottom position on the main page of the landing page and save the changes.

<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>

Krok II (editor) – mark dynamic text on a landing page

1. Enter the edition of the chosen landing page and add properly marked text in the desired location, according to the following schema:

%{{parameter}}||default_text%

In our example it will be:

%{{destination}} ||Italy%

All dynamic text must be inserted between ‘%’ characters.

In double curly brackets enter the name of the parameter to be passed as dynamic text.

After two vertical bars ‘||’ insert alternative text that will be displayed every time when no parameter is in the link.

2020-02-04_14-58-41

After completing the steps above, check if the dynamic text displays correctly on your landing page.

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.