Sådan splittester du på Single Page Sites (fx Visual Website Optimizer på Angular)

Folk der kender mig ved, at Single Page Applications (SPA) ikke ligefrem er min favorit, når det kommer til opsætning af fx tracking eller splittest-værktøjer.

Grundende er mange, og uden i øvrigt at gå alt for meget i dybden (da det ikke er temaet for denne artikel), så er problemerne ofte relateret til ting som:

• Manglende “sidevisninger”
• Ulogisk navigation
• Som regel dårlig performance (på andre end de allernyeste devices)
• Aaaaaaaaaaalt for mange, smarte animationer, og aaaaaaaaalt for lidt fokus på brugeren.

Men altså… SPA’erne er kommet for at blive, specielt i form af frameworks som fx Angular.js, React og lignende. Og så nytter det ikke noget at stå ovre i hjørnet og surmule; vi må finde løsninger, og så tage diskussionen om valg af platform et andet sted, på et andet tidspunkt.

I mit job som konverteringsoptimist arbejder jeg med en bred palette af sites, og netop Angular er et af de frameworks, der ofte dukker op. Og vil man optimere sitet via splittest, så kommer man på et eller andet tidspunkt i bekneb, for de gængse værktøjer er dyvt, dybt afhængige af en reel sidevisning. Dette, fordi de alle (næsten) fungerer ved, at når scriptet loades, så forespørges på den pågældende URL, hvorefter en eventuelt test-variant trackes og eksekveres.

Problemet er bare, at i SPA’er sker der sjældent reelle sidevisninger. Bare fordi URL’en i browseren skifter, betyder det ikke, at siden skifter set fra browserens synspunkt.

Visual Website Optimizer (VWO) på Single Page Applications eller Single Page Sites

Vil du gerne splitteste på en single page side, så skal du sørge for, at VWO hookes ind i funktionen, der administrerer virtuelle sideskift. Det vil typisk være der hvor funktionen for URL-skiftet ligger, og hvis du kalder følgende funktion dér, opnår du den samme effekt i VWO, som hvis du havde lavet et reelt sideskift:

$.ajax({url:'/ny-url', success:function() {executeTrackingCode();}});

Selve funktionen skal blot ligge et eller andet sted i kildekoden.
OBS: Husk at den skal ligge på alle sider du ønsker at kunne teste på.

function executeTrackingCode (hide) {
var $ = window.vwo_$ || window.$ || window.jQuery;
$ && $('.vwo_loaded').removeClass('vwo_loaded');
window._vwo_code=(function(){
var account_id=ACCOUNT_ID,
settings_tolerance=2000,
library_tolerance=2500,
url =  window._vis_opt_url || document.URL,
use_existing_jquery=false,
// DO NOT EDIT BELOW THIS LINE
f=false,d=document;return{use_existing_jquery:function(){return use_existing_jquery;},library_tolerance:function(){return library_tolerance;},finish:function(){if(!f){f=true;var a=d.getElementById('_vis_opt_path_hides');if(a)a.parentNode.removeChild(a);}},finished:function(){return f;},load:function(a){var b=d.createElement('script');b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){_vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b);},init:function(){settings_timer=setTimeout('_vwo_code.finish()',settings_tolerance);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(url)+'&r='+Math.random());var a=d.createElement('style'),b=hide?hide + '{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}':'',h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides');a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b;else a.appendChild(d.createTextNode(b));h.appendChild(a);return settings_timer;}};}());_vwo_settings_timer=_vwo_code.init();
}

OBS: Hvis du ikke kører din virtuelle sidevisning på første sidevisning, så husk at loade din standard VWO Smart Code som du ville gøre på et hvilket som helst andet site.