We have updated our Privacy Policy and Privacy Options

Got It

Developer Download: How Do I Use Javascript to Dynamically Include Keywords in Landing Page Headlines?

Share

JavaScript is a very powerful programming language that is used on nearly all websites. Not surprisingly, almost every major testing platform out there uses Javascript as its backbone. But did you know that you can use JavaScript in your test cells, too?

This is exciting! The possibilities of what you can do with JavaScript are pretty much endless. We’ll assume that you have a testing platform already set up (such as Adobe® Test&TargetTM or Visual Website Optimizer). Let’s also assume you are running an AdWords campaign to drive traffic to your landing page. For this example, we want to create a test cell that will dynamically change your main headline based on the keyword group that a user searched for.

AdWords
We’ll start with Google AdWords. You will need to either turn on ‘Destination URL auto-tagging’ or manually tag your URL with the keyword. Auto-tagging will automatically place the keyword variable into your URL, along with a ton of other variables. If you would like to tag your destination URLs manually you can use the example below to pass in the keyword variable.

Example: http://www.yourdomain.com?utm_term={keyword}

Now that we have the keyword inserted into the URL we can access the parameter via Javascript in the test cell. Let’s take a look at the Javascript code now.

Javascript
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split(“&”);
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split(“=”);
if (pair[0] == variable) {
return pair[1];
}
}
}

searchTerms = getQueryVariable(‘utm_term’);
if (searchTerms.length != 0) {
searchTerms = searchTerms.replace(/+/g, ” “);
searchTerms = unescape(searchTerms);
document.write(“<h1>This headline is about ” + searchTerms + “</h1>”);
}
else {
document.write(“<h1>This headline is generic.</h1>”);
}

The basics of the script take in all of the variables from the URL and look for the specific parameter that AdWords inserts, which is ‘utm_term’. Then we write the headline code to directly to the DOM.  If we cannot find any parameters called ‘utm_term’ the code will write the default(fallback) headline.

Let’s look at how we can use this Javascript code in two different testing platforms.

Test&Target
With the right JavaScript code, creating this headline in Adobe Test&Target couldn’t be easier! First you will need to place a mbox around the headline on the Control page.  Go to ‘Offer Types’ and select ‘HTML Offer’. In the ‘Offer’, all you need to do is add the JavaScript from above, save, create the campaign and run your test.

On Page Split

Visual Website Optimizer
Visual Website Optimizer also makes a test like this super easy.  Start by creating an A/B Test, then entering in the URL of your landing page. Visual Website Optimizer will then take you to a version of your landing page that you can edit. Click on the headline and you will see a popup that looks like this:

vwo_01

Usually with a static copy test you can just click ‘Change Text’ and update the copy, but for this test we need to insert some JavaScript. Click on ‘Edit HTML.’ In the bottom left of the popup you will see a button labeled ‘Insert JS API’—click that. Here we are going to actually remove your H1 tag and only keep what is inside of the script tags. This is because we are going to dynamically generate the headline code.

Under the line that says ‘//Insert Your Code Here,’ copy and paste in the JavaScript code from above. Hit the ‘Done’ button and you are ready to save and start the test.

Conclusion
Having a headline that is relevant to the keyword a visitor searches can make the difference between converting and not converting. Using testing and data to inform you whether or not this something you want to implement permanently is always recommended. While we think that’s a good option, we always recommend testing any major elements on your landing pages.

Categories