Dynamic Text Replacement in LeadPages

Dynamic Text Replacement in LeadPages

One of my favorite landing page tools is LeadPages.

Recently I wanted to implement dynamic text replacement to show a different headline when someone visited my LeadPage from a specific ad.

dynamic text replacement

LeadPages is awesome, but sometimes it can be limited. They do this on purpose to keep it simple and easy to use for the masses, so I came up with a solution to allow me to swap headlines dynamically based on the URL.

Here’s what the final code looks like:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
  // Parse the URL parameter
  function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));
  }
  // Give the parameter a variable name
  var dynamicText = getParameterByName('dynamic');

   $(document).ready(function() {

    // Check if the URL parameter is 01
    if (dynamicText == '01') {
      $( "#hero [data-widget-id='2b4eaffc-8dff-4c37-6336-b55316178b71']").replaceWith( "<h1 class='line-height-scale-3 font-scale-4 text-align-center lp-headline headline'><span style='color: rgb(255, 255, 255);'><strong>Headline 1</strong></span></h1>" );
    } 
    // Check if the URL parameter is 02
    else if (dynamicText == '02') {
      $( "#hero [data-widget-id='2b4eaffc-8dff-4c37-6336-b55316178b71']" ).replaceWith( "<h1 class='line-height-scale-3 font-scale-4 text-align-center lp-headline headline'><span style='color: rgb(255, 255, 255);'><strong>Headline 2</strong></span></h1>" );
    } 
    // Check if the URL parameter is 03
    else if (dynamicText == '03') {
      $( "#hero [data-widget-id='2b4eaffc-8dff-4c37-6336-b55316178b71']" ).replaceWith( "<h1 class='line-height-scale-3 font-scale-4 text-align-center lp-headline headline'><span style='color: rgb(255, 255, 255);'><strong>Headline 3</strong></span></h1>" );
    } 
    // Check if the URL parmeter is empty or not defined, display default content
    else {
      $( "#hero [data-widget-id='2b4eaffc-8dff-4c37-6336-b55316178b71']" ).replaceWith( "<h1 class='line-height-scale-3 font-scale-4 text-align-center lp-headline headline'><span style='color: rgb(255, 255, 255);'><strong>My Default Headline</strong></span></h1>" );
    }
  });
</script>

Usage in LeadPages

  1. Update the code above to replace “#hero [data-widget-id=’2b4eaffc-8dff-4c37-6336-b55316178b71′]” with the target you want to change in your page.
  2. You can find this by viewing your page, right click on the text you’d like to change, and inspect element.
    leadpages inspect element
  3. After changing the data-widget-id to yours, paste the above code into the Page Tracking > Head Section Tracking Code of LeadPages:
  4.  Save and view your page
  5. Add the following text to the end of the URL – “?dynamic=01”. Example: http://yourleadpage.com/?dynamic=01.

This is the final URL we can use in our ads to show that unique headline.

If you want to show other headlines, add them to the code and just replace your URL with the new number.

Example:

ad 1 – http://yourleadpage.com/?dynamic=01

ad 2- http://yourleadpage.com/?dynamic=02

ad 3 – http://yourleadpage.com/?dynamic=03

Just use those URL’s in your ads on Facebook, Google Adwords, or anywhere else you need to.

If you want to learn more about how this works in detail, read the full explanation of Dynamic text replacement here.