How to Display Dynamic Content on a Landing Page Using URL Parameters

We have all seen this picture, and every time I do I feel frustrated: the keyword price rises through the roof or my ad may not display at all. In this article, we’ll try to fix it.

bad landing page quality
From This

good landing page quality
To This

Expected clickthrough rate: This depends on CTA and your Ad’s position among the results. If your ad is displayed below the search results, obviously people are not going to click on it as often as on top ads which show at the top of the SERP.

Ad relevance: Can be fixed in seconds as well, just rewrite your Ad copy to include a Keyword in the Ad headline and/or Description.

But what about the Landing Page Experience? How can you fix that? With a Dynamic Landing Page!

How Does Google Determine the Landing Page Experience?

There is nothing new, Google searches for the keyword you’re trying to advertise on a webpage. It looks especially at the page title, headline, first paragraph of the text and so on. If Google can’t find the right keywords, it gives you a below average quality score. Simple.

Obviously, if you have just one landing page, but you’re trying to use it to advertise 100 different keywords, most of them would appear to Google as irrelevant.

What is The Solution?

Almost every PPC specialist has heard about “Multi Landing pages” or Dynamic Landing Pages; unfortunately, it’s not widely advertised and even if it is, existing literature  focuses on “personalizing the user experience.”

But, here is how you can fix your Landing Page Experience, boost your Conversion Rate and save lots of money.

Multi landing pages are sometimes associated with something hard and expensive or requiring you to involve some external services.

The truth is … it’s really not THAT hard.

In this article, I’ll show how you can add multi landing page functionality to any landing page or website in just 15 minutes. From now on, you will always get an Above Average Landing Page Experience.

5 Steps to Convert Any Website to Dynamic Landing Page

You probably already know how to use UTM-parameters in your Google Ads campaign. he good news is, multi landing uses them as well. The script I created is going to look for the right utm_term parameters and change your page content based on that.  

Here is what you need to do to add that functionality.

  1. Pick the content you want to change
  2. Add simple Javascript code and configure it.
  3. Create a spreadsheet for UTM-parameters and content to change on.
  4. Convert Excel file to JSON data and Import to Script Configs.
  5. Optimize (uglify and minimize JS code);

This requires a basic knowledge of JS and CSS or Advanced Google + Copy Skills. I’ll show you everything in examples on my test project and provide you with ready to use templates.

Step 1: Pick HTML Dynamic Content

landing page example

In the test project, I decided to show something unique: title, headline, description and button text, for every keyword in my Google Ads campaign.

If you have 100+ keywords and you pick 4 elements, you’ll need to come up with 400 texts, so my advice here: Do not pick too many. But I’m sure you know how to deal with that.

Step 2: Add Simple Javascript Code & Configure It

https://codepen.io/ida4ne/pen/GPwdLW
  1. Change outlined CSS selectors to yours in dynamic content object. It should target the Dynamic Content you have chosen above in Step №1. If you have more or fewer pieces of content, feel free to add or remove.
  2. Change the keywordList map according to your keyword UTM. This is a place where we pair your UTM parameters and content to change on (Dynamic Content). You need to test and see if it’s working.

    In step 3 you’ll learn how to generate that config from a handy spreadsheet.
  3. dynamicKeyword variable serves for picking UTM parameters to parse from your URL. Of course, I picked utm_term.

I took the getParametrsByName Function from Jenna. Thank you!

Attention: If you picked 4 pieces of content to change in dynamicContent, you have to follow it in the keywordList, object keys for keywords have to be THE SAME and positioned in the SAME ORDER. If you can’t come up with something unique, just put a default value there.

Once you’ve got everything set, let’s test it! Everything should work now.

displayed dynamic content

Step 3: Create a Spreadsheet to pair UTM-parameters and Dynamic Content

Every Google Ads campaign starts from a spreadsheet. It would be smart to fill that content in a handy spreadsheet in advance and convert it to required configs later. Here is how I recommend you organize it.  Template to load

dynamic content template

In the keyword column, you have to put the same values you use as a utm_term parameter for the Google Ads campaign.

Step 4: Convert Excel File to JSON and Import to Config.

Now we have to convert that spreadsheet data from a .csv file to the right data format and copy it in keywordList. That format is called JSON, and a lot of external services exist for this purpose.

Here is the one I recommend using – http://convertcsv.com/csv-to-json.htm

service to convert dynamic content template

Just upload your Excel file and convert it by using the Custom Output Template. Here is mine:

 "{f1}": {lb}
    {'header'}:"{f2}",
    {'description'}:"{f3}",
    {'button'}:"{f4}",
    {'title'}:"{f5}"
  {rb}

Once you click on Convert CSV to JSON via Template the results appear below. This is exactly what we need, now copy it to your keywordList map and you are good to go.

Step 5: Optimize (uglify, and minimize JS code)

Optimize your dynamic content Javascript code to run on production. If your Google Ad campaign is big don’t forget that it’ll save a lot of space for your users – Skalman Uglify.

html content minify

Now connect that script to your landing page before closing the body tag, if you have other scripts connected there, place it as the first one, so users don’t see flashing content. Make it run asynchronously.

<script async src="js/dynamic-content.min.js"></script>

Conclusion to the Dynamic Landing Pages Guide

Now we have created a Dynamic Landing Page that WORKS.

Google bots are able to execute Javascript and they will see the right headline and paragraphs as well as your users. From now on, your Landing Page experience in Google Ads will never fall below Average, and as a bonus, your Conversion rate will likely increase as well.

Of course, there are some doubts about this technique:

  • It requires either some JavaScript knowledge or that you invest a lot of time.
  • If you have a huge Google Ads campaign, let’s say 10 000 keywords, the JS file is going to be insanely big and every user who enters your landing page will have to upload it. So use this guide for small or midsize campaigns. In regular cases, an async script won’t affect your website’s performance and shouldn’t be more than 50kb (average Jpeg picture is 100 kb).
  • You do need to understand that this script uploads your entire Google Ads campaign to every landing page visitor’s browser, with your code being, is only uglified and not encryptedSome sneaky competitor could go through your website files and upload your config.But they probably already studied your Search campaign in Semrush or Spyfu, so there is nothing to worry about.

If you are not sure about setting it up by yourself and have a spreadsheet ready to deploy – outsource it to someone, this is a 10-minute task even for a junior programmer.

Is there any way to improve this guide? Please leave a comment with your suggestions or if it was just useful for you 🙂 Thanks and good luck!

Want more content like this? Sign up for my newsletter – it’s free!

Author

I have a degree in marketing communication and work as a marketer in a software development company. Usually, I watch a marketing course or webinar a day, but sometimes I shift to programming, finances or lifestyle books.

Write A Comment