Rich-text Reply

Activating an experiment, if the user searches for specific words. Is there a simpler solution?

Aicke 07-01-15

Activating an experiment, if the user searches for specific words. Is there a simpler solution?

The task:

 

The task is to activate an experiment, but only if the user searches for a word from a given list. In variation A the user should see the search results, in variation B the user should be redirected to a special page which better fits his search term.

 

Here is my working (and already a/b tested) solution for a conditional activation function. Maybe you have an improvment idea or you take it as an inspiration. The original search term list has been replaced with dummy values.

 

function(activate, options) {

	var categories = [
		[/^foo?$/i, '/foo.html'],
		[/^bar?$/i, '/bar.html'],
	],
	check = function (event) {
		var matchFound = false,
			$form = $(event.target),
			$searchInput = $form.find('#searchField'),
			searchString = $searchInput.get(0).value.trim(),
			target = null;
		$.each(categories, function (index, category) {
			if (category[0].test(searchString)) {
				matchFound = true;
				$searchInput.data('target',category[1]);
				return false;
			}
		});
		return matchFound;
	};

	$(document).on('submit', '.search form', function (event) {
		if (check(event)) {
			if (!options.isActive) activate();
			if (typeof window.foobar === "function") window.foobar(event);
		}
	});

	$.each(document.cookie.split(';'), function(index, value) {
		if (!options.isActive && value.trim().indexOf('optimizelyBuckets') === 0 && value.indexOf(options.experimentId) > -1) { 
			activate(); 
			return false; 
		}
	 });

}

 

And the code for variation B:

/* _optimizely_evaluate=force */
window.foobar = function(event){ event.preventDefault(); window.location = '//'+window.location.host+$('#searchField').data('target'); };

 

The problems i had:

 

  • I needed a contitional activation, because we wanted to reduce the target group as much as possible
  • Because the submit event is captured in the activation mode, I had two options to prevent the form from submit. First, prevent it in the activation code and fire it again in variation A (and do not handle the second submit in the activation code). Or second, pass the event to the variations and handle it there. Because I do not want to touch variation A (because it should behave as original as possible), I've choosen the second method. That's why I created a global funtion in variation B and check for existiance in the activation code. And I needed to force immidiate execution of the code, thats why there is "_optimizely_evaluate=force".
  • Because the experiment is activated just at the moment of the form submit, the experiment isn't activated on the target page. Thus we cannot track there in which variation the user is/was. That's why I created the cookie check to activate the experiment if the user has a cookie for this experiment.

 

I'm interested in feedback or alternative ways to solve the task. Thank you.

Everything is hard, before it is easy.
Level 2

Re: Activating an experiment, if the user searches for specific words. Is there a simpler solution?

Hi @Aicke,

 

This is a great post - thanks!  We're seeing more and more customers think large-scale about optimizing for SEM and SEO, but you've created a great micro use case - within the context of your site alone, you recognize certain search terms may be more valuable, so they should be the focus of experimentation.

 

I think a really beneficial part of your solution is the use of HTML5 data attributes, which make simpler or smaller-scale client-side manipulations of search input and results easier.  You can test a lot of things about your search functionality without building too much server-side.

 

Here's a way I would have thought about doing this:

  • If the experiment really doesn't run until after the search is submitted, then it's OK to just target the experiment to the search results page
  • Create a Custom JavaScript audience condition that contains the desired keywords/categories, and return true if the searched term matches one of the set
  • Variation code either displays the results as normal (i.e. does nothing), or redirects to the dedicated page
  • The redirect can use the search term, set as a variable in the audience code, as part of the destination URL

At a minimum, this approach modularizes your code so it becomes easier to reuse (most notably the audience, which does the heavy lifting here) or change pieces in subsequent tests with out needing to retest the entire experiment end-to-end.

 

How did the test turn out?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com