Optimizely now available via Fabric

Friday, 15 January 2016

At last year’s Flight conference, we announced several integrations with partner services within Fabric. One of our launch partners, Optimizely, provides A/B testing for desktop and mobile developers. On mobile, Optimizely provides Android and iOS SDKs (or kits in Fabric-speak) that enable developers to test and roll out features to different segments of their user base. A number of high-profile apps, such as Runkeeper and New York Times, leverage this technology to quickly iterate on their design decisions.

For instance, are you thinking about implementing Digits, but want to test out what sort of effect it might have on sign-ups? You can try it out using Optimizely, and get robust information about when and how to make the switch.

It’s easy to get started with Optimizely using Fabric. We’ll demonstrate how to do this using a simple iOS app written in Swift. With the app open in the Fabric plugin, select the Optimizely Kit:

Optimizely now available via Fabric

The plugin can automatically provision an Optimizely account for you. Optimizely will then send you two emails: the first to confirm your email address and the second to provide you with a temporary password. If you already have an account, select the corresponding option and enter your API key found in your Optimizely dashboard.

Optimizely now available via Fabric

The plugin will then ask you to copy the necessary *.frameworks files into your project. Currently on iOS, Optimizely depends on AudioToolbox, SystemConfiguration, and MobileCoreServices frameworks. In Xcode, when copying the frameworks, make sure the box “Copy items if needed” remains unchecked.

Optimizely now available via Fabric

As usual, our plugin will provide helpful code snippets so you can get started as quickly as possible.

Optimizely now available via Fabric

Run the app – if everything went well you should see a similar message in the console:

Optimizely SDK version X.Y.Z started. Set the verboseLogging property to YES to see debug output

There are a couple of additional steps in the integration process. Select the “Code Blocks” code example. Code Blocks is an Optimizely feature that is used to rollout new features to targeted subsets of your userbase. In this case, we’ll have two Code Blocks: one for the Twitter login and one for the Digits login.

Optimizely now available via Fabric

Optimizely provides an online Visual Editor that you can use to dynamically change the settings of your experiments and have them reflected in the app. To enable the “link” between your app and the Optimizely Editor, you need to register a URL scheme.

Optimizely now available via Fabric

The scheme requires a Project ID, which you can find by opening the Projects section of the Optimizely dashboard.

Optimizely now available via Fabric

Don’t forget to add the required application:openURL:sourceApplication:annotation: implementation.

Optimizely now available via Fabric

To make the app a bit more interesting, skip the provided ViewController.swift snippet and install Twitter and Digits kits instead.

Your AppDelegate.swift should then look like this:

import UIKit
import Fabric
import TwitterKit
import Optimizely

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    Fabric.with([Twitter.self, Digits.self, Optimizely.self])
    Optimizely.startOptimizelyWithAPIToken("foo", launchOptions:launchOptions)
    return true
  }

  func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool {
    if Optimizely.handleOpenURL(url) {
      return true;
    }
      return false;
  }

}

Your ViewController.swift should look like this:

import UIKit
import TwitterKit
import DigitsKit
import Optimizely

internal var loginsBlocksKey = OptimizelyCodeBlocksKey("logins", blockNames: ["twitter", "digits"])

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
  }

  @IBAction func doLogin(sender: UIButton) {
    Optimizely.codeBlocksWithKey(loginsBlocksKey,
      blockOne: {
        Twitter.sharedInstance().logInWithCompletion { session, error in
          if let unwrappedSession = session {
            self.showAlert(unwrappedSession.userID)
          } else {
            NSLog("Twitter login error: %@", error!.localizedDescription);
          }
        }
      },
      blockTwo: {
        Digits.sharedInstance().authenticateWithCompletion { (session, error) in
          if let unwrappedSession = session {
            self.showAlert(unwrappedSession.userID)
          } else {
            NSLog("Digits login error: %@", error!.localizedDescription);
          }
        }
      },
      defaultBlock: {}
    )
  }

  func showAlert(userId: String) {
    let alert = UIAlertController(title: "Logged In",
      message: "User \(userId) has logged in",
      preferredStyle: UIAlertControllerStyle.Alert
    )
    alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: nil))
    self.presentViewController(alert, animated: true, completion: nil)
  }
}

Drop a UIButton in your Storyboard and hook it up to the doLogin action.

We can now create a new experiment in Optimizely – head over to your dashboard and click New Experiment. Launch the app in the simulator, and then inside the app, draw a circle using your mouse. You should see the following screen where Optimizer is the name of your app; click Open.

Optimizely now available via Fabric

If you go back to the Experiment Editor, you should see an interactive in-browser view of your app. In the simulator, click the button that you’ve added to your app.

You can now add a code block to your experiment. In the sidebar to the left, choose Code Blocks and click Add Code Block. The editor will detect the “logins” code block in your code. Select “twitter” for the first variant, and “digits” for the second. You can also rename the variants, so it’s clear which code branch will be executed.

Optimizely now available via Fabric

Now, depending which variant is selected, clicking the button will present a different login flow.

If you click Options in the right side of the dashboard, you can set the traffic allocation for this experiment. In this case, half of the users will see the Twitter login, while the other half will see the Digits login.

Optimizely now available via Fabric

Running experiments is a great way to A/B test your app, including the authentication flow. For more information, take a look at the “Mobile optimization ideas: Onboarding flow and new user experience” article from Optimizely.