multiple google experiments

experiment.js

function choose(id, cb) {
  var i = document.createElement('iframe');
  i.setAttribute('sandbox', 'allow-scripts allow-same-origin');
  document.body.appendChild(i);
  var win = i.contentWindow.window;
  win.loaded = function() {
    cb(cxApi.chooseVariation());
  };

  var doc = win.document;
  doc.open();
  doc.write('<script src="//www.google-analytics.com/cx/api.js?experiment=' + id+ '"></script><script>window.loaded();</script>');
  doc.close();
}

Nice!

One thing I noted: cb(cxApi.chooseVariation()); does not seem to work - at least in the current version of Chrome - but cb(this.cxApi.chooseVariation()); does work.

If anyone stumbles across this, just FYI that the above does not work in IE. I had to use frame.src = 'javascript:window["contents"]'; to get it the content into the frame. My code ended up looking something like this:

  const frame = document.createElement('iframe');
  const content = '<script src="//www.google-analytics.com/cx/api.js?experiment=' + experimentId + '"></script>';
  frame.src = 'javascript:window["contents"]';
  frame.setAttribute('sandbox', 'allow-scripts allow-same-origin');
  frame.style.display = 'none';
  frame.onload = function() {
    const cxApi = frame.contentWindow.cxApi;
    if (cxApi) {
      cb(cxApi.chooseVariation());
    }
  };
  document.body.appendChild(frame);
  frame.contentWindow.contents = content;
  const doc = frame.contentWindow.document;
  if (!doc.scripts.length) {
    doc.open();
    doc.write(content);
    doc.close();
  }