Rich-text Reply

How can I make an specific element dynamic by location/state without setting up 50 experiments?

eOps 10-23-15
Accepted Solution

How can I make an specific element dynamic by location/state without setting up 50 experiments?

I'm looking for some ideas on how to change content based on an audience without having to setup dozens of different experiments and audiences.

 

For example, if one of our companies is pitching services in 35 different states and I want the background image or messaging to reflect that individual's location, is there a way where I can have this element change without having to set up 35 experiments, each with their own audience condition per state? 

 

I'm thinking the general test who have the geo-targeted content vs. non geotargeted content, in an aggregated manner for both the experiment and subsequent reporting.

 

Greatly appreciately your feedback and help!

Level 2

td_evans 10-23-15
 

Re: How can I make an specific element dynamic by location/state without setting up 50 experiments?

[ Edited ]

Quickly thinking about this (and I'm sure there's a more elegant solution)

 

Create a JS variable using the

var location = window['optimizely'].data.visitor.location.region

This will output a 2 letter state abbreviation, for example NH for New Hampshire. Use this variable within image source URL to render the correct image URL. For example if new hampshire users were meant to see a certain location then use: www.imgur.com/imagelocation_NH.jpg

 

Then target the experiment for those regions for which you have created these images for.

 

Final code would look somewhat like this:

 

var usersLocation = window['optimizely'].data.visitor.location.region 
var imgName = "http://www.location.com/image_"+usersLocation+".jpg";
$("#randImg").attr("src",imgName);

 

Thomas Evans
Technical Product Manager - Conversion @ Secret Escapes

Level 2
JDahlinANF 10-23-15
 

Re: How can I make an specific element dynamic by location/state without setting up 50 experiments?

As nice as that would be - "location" is not available in most plans. Smiley Sad

Re: How can I make an specific element dynamic by location/state without setting up 50 experiments?

Hi @eOps,

 

Thanks for contributing to the Optiverse! I'm Becca Bruggman a Solutions Architect at Optimizely and I wanted to chime in to build off of @td_evans's great suggestion.

 

Leveraging the Optimizely data object and creating a consistent naming convention for your images would be a great option for making these image changes based on teh visitor location within the variation. If for some reason that is not possible, you could create an if/else statement that would look for the location and include the specific image :

 

 

var location = window['optimizely'].data.visitor.location.region

if(location === 'NH') {
  var imgName = "http://www.location.com/NH_img";
} else if (location === 'CA') {
  var imgName = "http://www.location.com/California_banner_image";
} else {
  var imgName = "http://www.location.com/deafult_image";
}

$("#randImg").attr("src",imgName);

 

I would also recommend that to differentiate each of these on your results page I would set a custom dimension that would allow you to filter your data by each state to get better insight into how each image is performing. Example below to include in the experiment javascript under the code that sets the image:

 

window['optimizely'].push(['setDimensionValue', "visitor_state_location", location]);

As a note, you would need to set-up this dimension on your project home page before adding it into your experiment code.

 

Also, @nap0leon is correct that not all plans include a visitor location, but I checked and yours does @eOps -- so the above implementation should work well for you.

 

Did you have any follow-up questions?

 

Thanks,

Becca

dougmacklin 07-26-16
 

Re: How can I make an specific element dynamic by location/state without setting up 50 experiments?

Hi @Becca_Bruggman,

 

Sorry for bringing up an old thread but this is exactly what I was attempting to do, however window['optimizely'].data.visitor.location is returning null for me, even though I am on an Enterprise account. Here is what I'm seeing for the full optimizely.data.visitor object:

 

 

{
  "browser": "Chrome",
  "browserVersion": "51.0.2704.103",
  "device": "unknown",
  "deviceType": "desktop",
  "platform": {
    "id": "mac os",
    "version": "10.11.4"
  },
  "mobile": false,
  "mobileId": "unknown",
  "os": "mac os",
  "lists": {},
  "location": null,
  "ip": null,
  "matchingRules": null,
  "referrer": "",
  "segments": {
    "1571113867": "search",
    "1573884183": "false",
    "1580510026": "gc",
    "1856490740": "gc",
    "1871620897": "none",
    "1872590752": "false",
    "1873520688": "referral",
    "1992220011": "none",
    "2011250403": "true",
    "2338360045": "true",
    "2340150412": "true",
    "2701080337": "false",
    "2702650321": "gc",
    "2704480408": "none",
    "2705810351": "direct",
    "2706020152": "false",
    "2706560317": "none",
    "2707460365": "gc",
    "2708140383": "false",
    "2708290386": "referral",
    "2717810225": "none",
    "2718550206": "false",
    "2719510233": "gc",
    "2721320256": "referral",
    "2723730053": "direct",
    "2727730008": "gc",
    "2729180004": "none",
    "3713124431": "gc",
    "3728264737": "search",
    "3734713784": "false",
    "3735704323": "none",
    "3735872471": "none",
    "3744262300": "false",
    "3745172258": "campaign",
    "3748250031": "gc",
    "3771520742": "none",
    "3771710746": "false",
    "3777040790": "direct",
    "3788520753": "gc",
    "3823971587": "gc",
    "3830381821": "none",
    "3834972686": "false",
    "3835011530": "search",
    "4998950102": "true"
  },
  "dimensions": {},
  "audiences": {},
  "params": {
    "": ""
  }
}

 

 

So it looks like the rest of the information is populating, however location is not. Note that this came from a page on my site that does not have any active experiments running, not sure if that matters.

 

Thanks in advance,

Doug

JasonDahlin 02-06-17
 

Re: How can I make an specific element dynamic by location/state without setting up 50 experiments?

You need to have an experiment active that uses Optimizely's geolocation targeting, otherwise that function does not run and that portion of the object will have no data.

 

Reference: https://developers.optimizely.com/classic/javascript/reference/index.html

 

Scroll 30% down to "Visitor Location":

"For Enterprise customers only, this is an object containing information about the visitor's location. You will need to include an Audience with geo-targeting enabled or an Audience with segmentation turned on with geo-targeting enabled for this API call to return location values"

 

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero