Google Optimize Dynamic Keyword Insertion (DKI)

Since Google Optimize will be sunsetting this month of September 2023, why not check out our alternatives to Google Optimize?

—  Updated the code to make it a little more streamlined and fixed issues with the DKI Parameter Name input. —

Google Optimize allows you to create and test variant performance on your landing pages, whether the change you want to make is a different background image or perhaps a more vibrant CTA.

The Google Optimize interface, however, can take some getting used to, especially when trying to get your head around how best to make use of its capabilities.

One particularly handy thing to test in your variants via Google Optimize is Dynamic Keyword Insertion (DKI). This can allow you to bring in key aspects of the user’s search to the titles and text of the page automatically, this can then improve the relevance of your landing page and reassure the consumer they are getting involved with a service that can give them what they want.

— Now updated with URI decoding to remove those pesky “%20”‘s! —

There are plenty of different ways you could go about implementing this but the following is my preferred method of organising it, provided to you in the form of a short Google Optimize tutorial:

What’s Required?

To achieve this on your landing page requires two main steps:

• Adjust Ad Copy
• Add Optimize Javascript

Ad copy can be adjusted in the Google Ads (Adwords) interface or through Google Editor, my preferred method is the latter but both work just fine. I’m presuming you already know how to use Google Optimize to create an experiment to make the following edits to, if not it might be worth going through a starter tutorial to get that set up before continuing.

The Ad Copy

The easiest way to bring in search values is by appending URL parameters onto your Ad copies’ final URL. So if you were selling different items of clothing you probably already have your ad groups separated by some itemisation method. Within these, you can change the final URLs of your ad copy to match this itemisation.

So if you were selling your clothing at example.com, here are some dynamic keyword insertion examples URL parameters you might be using:

• www.example.com?item=hats
• www.example.com?item=shirts
• www.example.com?item=shoes

Or

• www.example.com?DKI=hats
• www.example.com?DKI=shirts
• www.example.com?DKI=shoes

An easy way to do this through the Google Adwords Editor is via the “Append Text” button (default is Replace Text – just use the arrow to the right), this way you can filter results and just append URL parameters to all filtered items in one quick and easy action.

Go through and update your Google Ads final URLs so that they all have a meaningful and uniform aspect if you haven’t already done so and then we can move on to the fun bit – DKI!

Google Optimize Javascript

Right, so you should now have the ad copies appended with consistent URL parameters for their search terms.

You can even input the name of your URL parameter here and we will update the code examples below!

So if your final URL was www.example.com?item=hats then you would input item in the field below to show hats in your DKI:

Input your DKI parameter name above and simply click out of the input box to have the code below dynamically update for your particular use case!

Now it’s time to fire up Google Optimize and either create a new variant or edit one you have already made.

Once inside click on the element you want to change based on the user search term. Now right-click the element and click “Run Javascript”. This will then bring up the Javascript function menu:

There are three things you need to do in your Javascript:

• First thing you are going to want to do is to retrieve the URL parameter that you have in your ad copy.
• Secondly, you may want to ensure the pulled item is in title case.
• Finally, you will want to save this as a variable & update the element text with this DKI.

/// This function can be run to grab URL parameters:
function getUrlVars(param) {
    var urlParams = new URLSearchParams(window.location.search);
    var result = urlParams.get(param);
    return result;
}
/// This function converts a string to title case:
var toTitleCase = function (str) {
    str = str.toLowerCase().split(' ');
    for (var i = 0; i < str.length; i++) {
        str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
    }
    return str.join(' ');
};
///Here we check whether our url parameter is present in the URL:
if(getUrlVars("dki") !== undefined){
 
//If it is present we then create a new variable with the value of our decoded URL parameter:
var myItem = decodeURIComponent(getUrlVars("dki"));
 
//Finally we update the decoded variable value to title case:
myItem = toTitleCase(myItem);

//This references the element the script was created in and passes our formatted variable into the string:
element.innerHTML = "We Provide Only The Best " + myItem + " In The Business";
}

Great, so we have a variable with our URL parameter, formatted for a title.

Now, because we created the script from the element you wanted to change (when you right-clicked and selected ‘Run Javascript’), we easily referenced it by using some basic javascript to edit the text of your selected element.

Presuming our URL parameter was ‘hats’ our title would read as:

“We Provide Only the Best Hats In the Business”

There you have it, dynamic keyword insertion via Google Optimize! Now, this obviously worked from a fairly simple example, there are other ways you could push this further.

One example of which I shall provide below, is specifically tailored for those who want a bit more control over their inserted text. For example, you might want a completely different title for hats searchers than shirts.

function getUrlVars(param) {
    var urlParams = new URLSearchParams(window.location.search);
    var result = urlParams.get(param);
    return result;
}


///We still need to check whether or not our parameters are present within the URL, but this time we shall set different 'cases' for each situation, we also make sure we decode our parameter before passing it to the switch case so we know it matches:
switch(decodeURIComponent(getUrlVars("dki"))){


//Our DKI value in the case that item=hats:
case 'hats':
element.innerHTML = "Hats Category Title";
break;


//What to do if item=shirts:
case 'shirts':
element.innerHTML = "Shirts Category Title";
break;


//This is what our DKI title would default to if no item parameter was found, very important!
default:
element.innerHTML = "Welcome To Our Clothing Store";
break
};

In the above code we actually cut down on our process from before; we just checked for the parameter, and then changed our elements’ inner HTML depending on what item was returned. No need to create a variable, or assign it our title-cased value, just exactly what we want our title to say, and when it should say it, simple DKI.

So there you have it, two methods of dynamic keyword insertion through the use of Google Optimize!