Alexander Lam
Let’s turn your boring old landing pages into dynamic landing pages by using dynamic text insertion.
Matching your landing page’s messaging to your ads can be great for boosting conversion rates.
In this tutorial, I’ll show you how to replace your main heading by using URL parameters to create landing pages that are personalized for your visitors.
It’ll take a little HTML and JS editing, but I’ll walk you through all of it here.
By the end of it, you’ll have super-targeted messages on your dynamic landing pages like this:
So, let’s get started.
Step 1: Identify the headline you want to edit with its own ID
Let’s start by finding or setting your headline’s ID.
What we do next depends on if you’re using a specific platform:
- On WordPress, you can edit your HTML from Appearance > Theme Editor. Or, you may be using a page builder like Elementor. These plugins usually have an HTML editing feature, or a way to add your own ID. Find where to edit your HTML and continue with step 1.
- On Unbounce, this is how to find your headline’s ID. Since’ this can’t be changed, copy your headline’s ID, and move on to step 2.
- On LeadPages, you have have to use an HTML widget instead of a text widget, than add your own custom HTML heading. Here’s how to use HTML widgets on LeadPages. Feel free to copy our heading examples in step 1, read on to find out more.
- On Shopify, you can edit your HTML by using this guide.
- For other landing page builders, there should be a way to edit your HTML or add a custom ID to your elements. Find how to edit your HTML and continue with step 1.
Find the headline that you want to replace the text for. It’s usually the first h1 tag in your HTML file, and it will look like:
<h1>This is a Heading</h1>When in doubt, look for your headline’s text in the file. So if your headline is “Read the New Report Today”, search for “Read the New Report Today”.
We’ll be editing the tags around this text. It might not be <h1>Read the New Report Today</h1>. It could be <div>Read the New Report Today</div> or <span>Read the New Report Today</span>. No matter what it is, the tag around the text is what we’re editing.
We’ll be adding a new ID to the heading. This will tell our code what heading to dynamically replace.
An ID, in HTML, is a property we can add to uniquely identify something.
In this example, we’ll be adding the ID “replace-this”. Your ID can be anything, as long as there are no other IDs on the page that are the same.
So from the heading we found earlier, we’ll add an ID to the opening tag, the <h1>.
<h1 id="replace-this">This is a Heading</h1>Now we’re ready to move on to the next step!
See what's killing your conversion rate.
Find out what's losing you sales and conversions in less than 2 minutes.
Get My Free Report Now
Step 2: Add the Dynamic Landing Pages Script to Your Site
Find the closing body tag in your file. It looks like this: </body> and it’ll be near the end of your file.
Or, if you’re using a platform, here’s how to add the script:
- On WordPress, you can add the scripts to your footer.php
- On Unbounce, follow this guide and select ‘Before Body End Tag’ as the location
- On LeadPages, you can add the script with the HTML Widget. Place the widget at the bottom of your page. Here’s a guide on how to use the LeadPages HTML widget.
- On Shopify, the closing body tag can be found in your theme.liquid. Or, use an app like Civil Pixels to insert your script before the closing body tag.
- For other platforms, there’s usually a place to add custom scripts or edit your HTML. If you can’t find the closing body tag, just place the script as far down in the page as you can.
Copy and paste the following code before the closing body tag or in the appropriate script location:
<script>
window.addEventListener('load', function(event) {
var headerId = "replace-this";
var messages = [
{
"campaign": "replace-1",
"text": "Replace This Heading 1"
},
{
"campaign": "replace-2",
"text": "Replace This Heading 2"
},
];
var campaign = findGetParameter("campaign");
messages.forEach(function(message) {
if(message.campaign === campaign){
document.getElementById(headerId).innerHTML = message.text;
}
});
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}
});
</script>Step 3: Setup Your New Dynamic Messages
Ok, now the easy part.
We’re going to be editing the script we just copy/pasted in step 2.
First, replace the text for the headerId variable with the ID you chose in step 1.
So if the ID you chose is “heading”, var headerId = "replace-this"; becomes var headerId = "heading";.
Second, we’re going to set the new dynamic headings. Each one will be based on something called a URL parameter.
If you’ve ever seen a question mark in the URL of your browser (e.g. https://www.example.com/hello?campaign=123), you’ve seen a parameter before.
Everything that comes after the question mark is called a parameter. In this case, that’s campaign=123.
We’re going to be taking advantage of this URL parameter to tell your page what heading to show. When you build your ad, just make sure to have the correct parameter value for each variation.
Now that we know what parameters are, we’re going to be assigning a heading to a parameter.
Back to the script we used earlier. We’re going to be replacing the text in the messages variable.
This can accommodate as many variation as you want, but we’re going to start with 2. I’ll show you how to add more at the end.
Our message variable looks like this right now:
var messages = [
{
"campaign": "replace-1",
"text": "Replace This Heading 1"
},
{
"campaign": "replace-2",
"text": "Replace This Heading 2"
},
];The campaign property is what your parameter is going to be set to, to tell your script what heading to set.
In our example above, that means when:
- Someone visits www.yoursite.com/landingpage?campaign=replace-1, your heading will become Replace This Heading 1.
- Someone visits www.yoursite.com/landingpage?campaign=replace-2, your heading will become Replace This Heading 2.
Replace the text for “campaign” to whatever you like by changing “replace-1”. Then set “Replace This Heading 1” to whatever you want your heading to become for this variation.
Then do the same for the second variation. For example:
var messages = [
{
"campaign": "freelancers",
"text": "Never miss another freelance contract again"
},
{
"campaign": "agencies",
"text": "Build client relationships that rock"
}
];Ok, what if you want more variations? You can add as many as you like, just make sure each one is separated by a comma. Let’s add 1 more the example above:
var messages = [
{
"campaign": "freelancers",
"text": "Never miss another freelance contract again"
},
{
"campaign": "agencies",
"text": "Build client relationships that rock"
},
{
"campaign": "enterprise",
"text": "Close big deals without the pain"
}
];Step 4: Use Your New Dynamic Landing Page Superpowers
In our last code example, we set 3 different variations. Let’s say you want to use the freelancer variation. You’d just have to set the campaign parameter to “freelancers”.
For example: https://www.yoursite.com/page?campaign=freelancers
For the agencies campaign?
Set your url to: https://www.yoursite.com/page?campaign=agencies
If you already have some parameters at the end of your url, just use the ampersand (&) to add the campaign.
For example: https://www.yoursite.com/page?utm_source=adwords&campaign=agencies
That’s it! Go forth and convert those visitors with your dynamic landing pages.
If you’re looking for more help, try out our free conversion rate health check!
See what's killing your conversion rate.
Find out what's losing you sales and conversions in less than 2 minutes.
Get My Free Report Now