How to Increase Conversions With Dynamic Text Replacement

How to Increase Conversions With Dynamic Text Replacement

In a recent ad campaign I was running, I noticed that the Click Through Rate (CTR) of the ads were high, but the conversion rates were low on some of the ads.

All of the ads were pointing to the same landing page.

I noticed the ads with a similar headline to the landing page, received more conversions. This is often called message matchbut this was real proof of it.

Solving The Problem

I thought about creating several landing pages for each ad, but realized I would need to create dozens of landing page variations. Not including new landing pages whenever I wanted to test something new.

What a pain.

There are also some free and paid tools out there like Google Optimize that handle split testing headlines and all that. But what I needed was to simply send everyone to the same page and update the main headline dynamically based on the ad they clicked.

With a little Googling and some simple code, I put together a fast solution anyone can use. Copy and paste this code into your landing pages to dynamically change headlines, button text, or anything else. If it’s a bit advanced for you, send this page to your team or a developer and have them add it for you.

Let’s jump in…

First, what is dynamic text replacement?

If you’re new to dynamic text replacement, it’s basically a fancy word for swapping text automatically. It kind of looks like this.

dynamic text replacement

You can have multiple ads going to one landing page, and update that page content based on the ad they came from.

Why use it?

As marketers, it’s important to be efficient.

Instead of creating landing pages for every single ad we make, we can create one and update it automatically.

With dynamic text replacement, you can do this easily.

By adding a bit of code to our page or website we can swap out headlines, call to actions, or whatever else we want automatically as soon as someone lands on the page.

Some landing page software have features for this but not all of them so I wanted a code I could use on any platform I wanted whether it was LeadPages, ClickFunnels, WordPress or my own custom pages.

The code:

For those of you familiar with coding, here is the full code you can copy and modify as needed:

<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') {
      $( "#headline").replaceWith( "<h1><strong>Headline 1</strong></span></h1>" );
    } 
    // Check if the URL parameter is 02
    else if (dynamicText == '02') {
      $( "#headline" ).replaceWith( "<h1><strong>Headline 2</strong></span></h1>" );
    } 
    // Check if the URL parmeter is empty. If empty display default a default text.
    else {
      $( "#headline" ).replaceWith( "<h1><strong>My Default Headline</strong></span></h1>" );
    }
  });
</script>

For the rest of us non-coders, I will explain below how to use it.

Usage

  1. Add the code above into the header or footer of your website or landing page. (Before the <head> tags or after the <body> tags.)
  2. Take the final URL of your page and add “?dynamic=01” to the end of it. Example: “http://yourdomain.com/landing-page/?dynamic=01”
  3. If you want to display the second headline option from the code above you can change the 01 to 02. Example: “http://yourdomain.com/landing-page/?dynamic=02” This will display “Headline 2” instead.
  4. Updated the default headline also you want to show when people visit your URL without the “?dynamic=” added.
  5. Give your headline an id=headline. (ex. <h1 id=”headline”>My headline</h1>). If you’re using a landing page tool that doesn’t let you change the id of your headline, check the instruction below on how to target a specific headline.

How does it work?

I’m not a great coder and this is nothing fancy. I just put together some code from around the web and got it working.

With the full code above we can swap out content based on a parameter given in our URL. In non-nerd speak, this means I can tell my page to update text depending on what I set in the URL.

Let’s break the code above down into steps to make it simple.

1. Add jQuery to your site
Make sure to include the jquery script in your sites header or footer area so that our code will work:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

If you already have jQuery loading on your site you won’t need to add it again.

2. Parse the URL 

Now in our jQuery code, we are going to parse the browser URL so that we can search for the part that tells our code what text to swap out.

// 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, " "));
  }

3. Create a variable and give it a name so we can reference it.

We’re going to call our variable “dynamicText” and look for the reference “dynamic” in the URL.

// Give the parameter a variable name
  var dynamicText = getParameterByName('dynamic');

This means our code will search the URL for the word “dynamic” and look for whatever parameter we give it. I’ll show you how that looks in just a bit.

4. Find and replace our text

Now we want to tell our code to find specific text and replace it. In this example, we are finding our headline that is using an ID called “headline”. So we target it with “#headline”. If the headline in your landing page is using a class instead you can just change this to “.headline” or whatever class you are targeting.

// Check if the URL parameter is 01
    if (dynamicText == '01') {
      $( "#headline").replaceWith( "<h1><strong>Headline 1</strong></span></h1>" );
    }

We are also telling our text to replaceWith something else.

In this case, we are saying to replace our current text with a bold h1 tag called “Headline 1” <h1><strong>Headline 1</strong></span></h1>

You can change this part to whatever you want.

5. Add another option to replace our text

I have added another piece to replace my headline with a second headline. If you want to have multiple options to choose from this is what you can add.

// Check if the URL parameter is 02
    else if (dynamicText == '02') {
      $( "#headline" ).replaceWith( "<h1><strong>Headline 2</strong></span></h1>" );
    }

You can add as many of these as you want like this:

// Check if the URL parameter is 02
    else if (dynamicText == '02') {
      $( "#headline" ).replaceWith( "<h1><strong>Headline 2</strong></span></h1>" );
    }
// Check if the URL parameter is 03
    else if (dynamicText == '03') {
      $( "#headline" ).replaceWith( "<h1><strong>Headline 3</strong></span></h1>" );
    }
// Check if the URL parameter is 04
    else if (dynamicText == '04') {
      $( "#headline" ).replaceWith( "<h1><strong>Headline 4</strong></span></h1>" );
    }
// Check if the URL parameter is 05
    else if (dynamicText == '05') {
      $( "#headline" ).replaceWith( "<h1><strong>Headline 5</strong></span></h1>" );
    }

Just make sure to update the numbers.

6. Set a default text when nothing is chosen

Last, we want to make sure if nothing is set in the URL, that it will display some default text.

// Check if the URL parmeter is empty. If empty display default a default text.
    else {
      $( "#headline" ).replaceWith( "<h1><strong>My Default Headline</strong></span></h1>" );
    }

In this example we just make it use the words “My Default Headline”

Real use example

Let’s say that I am running Facebook ads, and I want to send people to my landing page with a unique headline just for them, based on the ad they clicked.

Once I add my full code above to the header of my site, I can create URL’s like this for each of my ads:

http://mydomain.com/landing-page/?dynamic=01

http://mydomain.com/landing-page/?dynamic=02

http://mydomain.com/landing-page/?dynamic=03

Then I can add them to Facebook ads manager like this:

Now when they click my ad, the code above will swap out the headline with headline #5.

Make sense? If not, drop a comment below and I will do my best to help.

Advanced Tracking

I can also still use advanced tracking parameters on my URL’s to chain together parameters by using the & sign.

It would look something like this:

http://mydomain.com/landing-page/?dynamic=01&utm_source=Facebook&utm_medium=Facebook_Feed&utm_campaign={{campaign.name}}&utm_content={{ad.name}}

Get Creative

Think about how you can use this to swap out text and other elements dynamically to match the ads you place online.

By using dynamic text replacement you can get creative like showing a specific city in your headline if you target different cities, without having to create a page for each city.

Just add another variable called dynamicCity like so:

// Give the parameter a variable name
  var dynamicCity = getParameterByName('city');

Then add some options to replace it dynamically like this:

// Check if the URL parameter
    else if (dynamicCity == 'miami') {
      $( "#headline" ).replaceWith( "Miami" );
    }
// Check if the URL parameter
    else if (dynamicCity == 'fortlauderdale') {
      $( "#headline" ).replaceWith( "Fort Lauderdale" );
    }

And our final URL would look like this:

http://yourdomain.com/landing-page/?city=miami

There are plenty of other ways you can use dynamic text replacement as well.

Hopefully, this helps you in some way bump up your conversions and make more of that cha-ching.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.