Download - 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
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
CONSIDER MULTIPLE PAGES • What are the implica/ons? • Follow the experience CONSIDER MULTIPLE DEVICES • Don’t just be responsive • Segment device types
<div>ide and Conquer
• Iden/fy blocks to be replaced with new content • Use id’s for faster Javascript
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)
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
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.
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’])
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';!
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