Optimizely Developer Showcase

Adrian Gregory Op/mizely Success Growth, Team Lead

Chris Moen City Pass Lead Web Developer @bigfrontend

Peter Has/e Bleacher Report Front-‐end Developer @sillypog

Developer Showcase

Test Big, Test Fast

Chris Moen

@bigfrontend

Tes0ng Major Varia0ons on Page Load

VS

Why Rock the Boat?

•  Big difference in user experience = big difference in user behavior •  Evolving vs. Redesigning – Keep designers engaged

•  Op/mizely is fast!

Useful Prac0ces

TEST ON THE DEFAULT PAGE URL •  Avoid Redirects •  Keep your SEO guy happy

Useful Prac0ces

CONSIDER MULTIPLE PAGES • What are the implica/ons? •  Follow the experience CONSIDER MULTIPLE DEVICES •  Don’t just be responsive •  Segment device types

HOW TO: Offer Major Varia0ons

VS

<div>ide and Conquer

•  Iden/fy blocks to be replaced with new content •  Use id’s for faster Javascript

Global CSS

•  Use for basic block layout with varia/on classes

Global CSS

•  Ac/vate varia/on classes in varia/on code

Replace Blocks with Ajax

•  jQuery.load with callback init •  Facilitates dynamic varia/on content •  Re-‐display block in callback

Replace Blocks with Ajax

VARIATION FILE •  Keeps new code all in one place •  Keep in your codebase • Minimizes extra h\p requests •  Ajax request URLs will cache

Use your <head>

SET UP FOR SUCCESS •  Give Op/mizely something to work with •  Invaluable for targe/ng and segmen/ng •  (and all of your other interface JS)

Simple and Precise Targe0ng

Relevant Global Segments

Takeaways

•  Run big tests on mul/ple pages and devices •  Keep things simple in Global CSS and Varia/on Code •  Replacing content with Ajax gives you dynamic possibili/es •  Give Op/mizely something to work with by se`ng global variables

Tes/ng asynchronous features at Bleacher Report

Peter Has/e @sillypog

Bleacher Report funnel conversion project

Bleacher Report is a leading sports media site. Goal: diversify traffic and increase repeat visits. Strategy: increase social network “likes”. Rapid itera/on using Op/mizely.

Tes0ng resulted in increased social conversions

746% increase

March 2013 vs July 2012

Tes0ng the social promo

Our baseline promo

Social promo popup

•  Loaded via ajax aeer 30 seconds on page. •  Inserted to page via jquery.lightbox plugin. •  Shown once Facebook widget has rendered. •  Context specific text and social link.

Preserving context with global data

BR = BR || {};!BR.facebook_like_popup_data = BR.facebook_like_popup_data || {longname:''};!!$("#facebook-content > p").html(! "Like B/R's <span class=\"team-color\">”! + BR.facebook_like_popup_data.long_name + ! "</span> Facebook Page to the Get the Latest News”!);!

Using manual ac0va0on to test on impression

•  Don’t want to run experiment on pages where users don’t see the popup. – Conversion rate was ini/ally very low: 0.4%. – Would skew conversion rates lower.

•  Ac/vate the experiment in response to impression event. – window[‘op/mizely’].push([“ac/vate”, 123456789]);

Using custom events to track social widgets

•  Social bu\ons served through iFrames. •  Can’t detect click on these. •  Social APIs provide callbacks:

–  FB.Event.subscribe('edge.create’, callback); –  tw\r.events.bind('follow', callback);

•  Use these to fire consistent event off window. •  Op/mizely goal: custom events. •  Also applies to immediately ac/vated tests.

•  window.optimizely.push(['trackEvent', ‘PopupConversion’])

Tes0ng complex features

More promo types

Base

Popup Flyin

Footer

Varia0on code overrides defaults

// Block runs on script load!BR.getNamespace('BR.testing.features.social_promo');!if (BR.testing.features.social_promo.type === undefined){! BR.testing.features.social_promo.type = 'popup’;!}!!// Block runs on document ready event!BR.getNamespace('BR.SocialPromos').Launcher = (function($, _){! function launch(){! $(window).trigger('LaunchSocialPromo_' + BR.testing.features.social_promo.type);! }!! $(function init(){! if (BR.facebook_like_popup_enabled && !BR.CMS){! launch();! }! });!})(jQuery, _);!

Sets default if not done by Op/mizely varia/on

Launch promo version set at load /me

Set values through varia0on code

/* _optimizely_evaluate=force */!BR = BR || {}; // Must not declare with var!BR.testing = BR.testing || {};!BR.testing.features = BR.testing.features || {};!BR.testing.features.social_promo = BR.testing.features.social_promo || {};!BR.testing.features.social_promo.type = 'flyin';!

Useful prac0ces and Implementa0on details

Keeping the code clean

•  Aggregate references to window[‘op/mizely’]. – what if it changes?

•  Remove hard coded experiment numbers from feature code. – want to manage these easily.

•  Try using Global Javascript for this.

Ac0va0on data file

[! {! “name”: “Facebook_PopupHeat”,! “experimentId”: 123456789,! “activationEvent”: “OpenedFacebookLikePopup”,! “trackEvents”: “--- \n- PopupConversion\n”! }!]!

Linking window events to experiments

Window

Promo AB_Tester

w  Promo triggers window events used for ac/va/on and tracking

Op/mizely

y  API calls a\empt to ac/vate experiment or track events

Popup html

v  Popup html loads.

x  AB_Tester pairs events with enabled experiments

Experiments json

u Listeners added to window object.

Takeaways

•  Get familiar with the Op/mizely API and the optimizely object. •  Avoid dilu/ng your goals by using manual ac/va/on. •  Consider the order of events when se`ng variables in varia/on code. •  Don’t make your site dependent on your tes/ng service: have defaults and separa/on of concerns.

Adrian Gregory Op/mizely Success Growth, Team Lead

Chris Moen City Pass Lead Web Developer @bigfrontend

Peter Has/e Bleacher Report Front-‐end Developer @sillypog

Developer Showcase

Optimizely Developer Showcase

Technology

Transcript of Optimizely Developer Showcase