Advertisement
Check these out next
Optimizely Developer Showcase
May. 1, 2014•0 likes•1,008 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Adrian Gregory, Success Growth Team Lead at Optimizely Peter Hastie, Front-end Developer at Bleacher Report Chris Moen, Lead Web Developer at CityPASS The Developer Showcase highlights useful tips and tricks directly from developers using Optimizely. The session is moderated by Adrian Gregory, Success Growth Team Lead at Optimizely, and features Peter Hastie, Front--end Developer at Bleacher Report, and Chris Moen, Lead Web Developer at CityPASS, sharing how they've used advanced features in the editor and the Optimizely API to run more dynamic tests and improve performance on their site. The covered features include: -Testing content that appears after page-load -Getting the most of your goals with custom events -Testing an entire new page layout without redirects -Getting the most of the Global CSS & Global JS -Implementing code for efficient targeting, tracking, and segmenting
OptimizelyFollow
Content Marketing Manager at OptimizelyAdvertisement
Advertisement
Advertisement
Recommended
Introduction to Progressive Web ApplicationsChris Love
2/3 SEO: On-page optimization - Inede (Máster en Marketing Digital)rodcul
Automating Google LighthouseHamlet Batista
WordPress common SEO issues by Olesia KorobkaAnton Shulke
Automated Duplicate Content Consolidation with Google Cloud FunctionsHamlet Batista
Predictability for the WebRobert Nyman
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 hp 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 buons served through iFrames. • Can’t detect click on these. • Social APIs provide callbacks: – FB.Event.subscribe('edge.create’, callback); – twr.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- PopupConversionn”! }! ]!
- 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 aempt 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.
- Q & A
- 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
Advertisement