Zoals beloofd, hierbij de code-voorbeelden hoe je een test op moet zetten in Google Optimizer zodat je dus toch Dynamische code kan gebruiken. Als je de uitleg van Google zelf mag geloven dan kun je prima met dynamische inhoud werken, alleen geven ze enkel een voorbeeld met plaatjes:

“Het sectiescript moet worden bijgewerkt zodat dit overweg kan met de dynamische inhoud. Het doel van dit scenario is een HTML-afbeeldingscode te maken met de betreffende bestandsnaam. Zoals beschreven in het gedeelte Voordat u begint, moeten de afbeeldingsbestanden worden benoemd volgens een schema waarbij de drie afbeeldingstypen van elkaar worden onderscheiden, zoals P1234.jpg, P1234_studio.jpg en P1234_actief.jpg… Meer“

Aldus Google. Het legt dus uit hoe je een plaatje kunt switchen d.m.v. Javascript. Echter geven ze geen oplossing voor dynamische teksten (ze schrijven het image type weg met document.write) en al helemaal multi-language content wordt - zoals eerder beschreven - een probleem. Hier de oplossing, het verdient zeker geen schoonheidsprijs, maar het zorgt dat je multivariate testing met dynamic content kan laten werken.

 

Voorbeeld

Stel ik heb een pagina die is opgebouwd in PHP met daarin meerdere onderdelen die ik wil testen. De verschillende onderdelen worden als includes gebruikt. Ik heb dus een header.php, intro.php, specialoffers.php, sidebar.php, followtext.php en footer.php. Mijn pagina zou er dan als volgt uit kunnen zien:

De index.php zou er zo uit kunnen zien:
<?
include(”header.php”);
include(”intro.php”);
include(”specialoffers.php”);
include(”followtext.php”);
include(”sidebar.php”);�
include(”footer.php”);
?>

 

Test Strategie

Laten we stellen dat we intro.php en specialoffers.php willen testen in Google Site Optimizer. Allereerst moet ik dan verschillende versies van deze twee includes maken. Het is slim om deze files in een aparte folder te zetten zodat je je site een beetje netjes houdt. Het include pad kun je gewoon wijzigen naar een andere locatie, dit is natuurlijk niet verplicht maar is wel aan te raden. Dit laten we voor het gemak even zitten. We willen dus intro.php en specialoffers.php in een multivariate test laten draaien. Kopieer dus intro.php zodat je naast het origineel (hier blijven we lekker vanaf) meerdere varianten maakt: intro1.php, intro2.php en intro3.php bijvoorbeeld. Hier kun je dan dus wijzigingen in maken.

Stel intro.php (origineel) ziet er zo uit:
<strong>Introductie</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum bibendum venenatis lacus. Integer iaculis aliquam elit. Nulla adipiscing, sapien ac viverra volutpat, erat lorem aliquam ipsum, non accumsan nibh quam vitae metus.

Dan zou je bijvoorbeeld een <h1> kunnen proberen in plaats van simpel bold tekst, intro1.php zou er dan als volgt uit kunnen zien:
<h1>Introductie</h1><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum bibendum venenatis lacus. Integer iaculis aliquam elit. Nulla adipiscing, sapien ac viverra volutpat, erat lorem aliquam ipsum, non accumsan nibh quam vitae metus.

 

Variaties

Iedere variant zet je alvast klaar en test je in je website (je veranderd dus je includes naar intro1.php etc.) zodat alles er goed uit ziet. Vervolgens zet je het script klaar wat de content via een xmlhttpRequest in kan laden. Ik gebruik vaak Mootools als javascript framework omdat hier heel veel standaard functies al in zitten. Het mooie van Mootools is dat je kan kiezen welke onderdelen je in het framework wil gebruiken zodat je een compacter script krijgt en geen overbodige zaken hoeft in te laden welke je toch niet gaat gebruiken. Dit zorgt voor veel minder overhead in laadtijd wat de snelheid van je pagina weer ten goede komt. Dit script zet je dan in je index.php, voor het einde van je </body> tag:

<script type=”text/javascript”>
  function getDoc(url, doFunc, id) {
   xmlhttp = false;
   if (window.XMLHttpRequest) { // Mozilla, Safari,…
    xmlhttp = new XMLHttpRequest();
    if (xmlhttp.overrideMimeType) {
     xmlhttp.overrideMimeType(’text/xml’);
    }
   } else if (window.ActiveXObject) { // IE
    try {
     xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
    } catch (e) {
     try {
      xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
     } catch (e) {}
    }
   }
   xmlhttp.onreadystatechange= function() {
    if (xmlhttp.readyState==4)
     if (xmlhttp.status==200) {
      doFunc(xmlhttp, id);
      onLoadScript(’<?=$page_ident?>’);
     }
   }
   xmlhttp.open(”GET”, url, true);
   xmlhttp.send(null);
  }
  function writeHTML(req, id) {
   window.addEvent(’domready’, function () { document.getElementById(id).innerHTML = req.responseText;});
  }
 </script>

Dit code-blok bevat twee functies:
getDoc(url, doFunc, id) en writeHTML(req, id). De functie getDoc() haalt de include op die je wilt vervangen in je pagina. De parameter “url” is de locatie van je include, “doFunc” kan een functie aanroepen na het laden (optioneel) en “id” is de identifier van je <div> waar je de content in wilt gaan laden. Je moet dus in de index alvast bepalen waar iedere variatie moet komen te staan door het aanbrengen van <div>’s die je om je huidige content heen plaatst. Bijvoorbeeld: <div id=”intro”><? include(”intro.php”);?></div>.

 

Variaties klaarzetten in Google Optimizer

Hierna zet je de varianten klaar in Google Site Optimizer, je geeft hier dus eerst de pagina secties aan die je wilt gaan testen. In dit geval dus: Intro en SpecialOffers. De pagina secties moet je dus aangeven in de pagina waarin je deze wilt gaan testen met de volgende code (deze wordt aangeleverd door Google Site Optimizer via de wizard), voor de introductie tekst is dat dus:

<script>utmx_section(”Intro”)</script></noscript>

De tags plaats je om de code heen waar je variaties in wil maken. In Google Optimizer maak je dan binnen deze secties de varianten aan die je wilt gaan testen: Intro1, Intro2, Intro3 en SpecialOffers1, SpecialOffers2 etc. In je intro.php ziet het er dan zo uit:

<script>utmx_section(”Intro”)</script>
<strong>Introductie</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum bibendum venenatis lacus. Integer iaculis aliquam elit. Nulla adipiscing, sapien ac viverra volutpat, erat lorem aliquam ipsum, non accumsan nibh quam vitae metus.
</noscript>

De originele code wordt automatisch weergegeven in Google Site Optimizer en is onveranderbaar. De varianten die je aanmaakt zijn blanco, hier komt dus de Javascript functie in die de juiste file aanroept en de originele code vervangt. De variant “Intro1″ zou er dus als volgt uit kunnen zien:

<script>window.addEvent(’domready’,function(){getDoc(”intro1.php, “intro”);});</script>

Dit zorgt ervoor dat de functie getDoc wordt aangeroepen en de file “intro1.php” zal inladen in <div id=”intro”>. Voor variant 2 vervang je dus het cijfer 1 door 2 and so on and so on. Als je hierna je test zou starten staan in eerste instantie je originele code in beeld, zodra de variant (intro1.php) bijvoorbeeld wordt geladen wordt deze content vervangen. Mocht je niet willen dat je bezoekers de originele content zouden kunnen zien (als je site snel is heb je hier geen last van, maar bij complexere code zou het wel eens kunnen “flickeren”, dan kun je de functie hierboven alszijnde originele code neerzetten zodat ook je originele code door de javascript functie wordt ingeladen. Dit zou er dan als volgt uit zien:

<script>utmx_section(”Intro”)</script>
<script>window.addEvent(’domready’,function(){getDoc(”intro.php, “intro”);});</script>
</noscript>

Er zal dan dus geen switch meer worden gemaakt in je content omdat er bij het laden van een pagina een keuze voor een variant wordt gemaakt. Als de keuze op het origineel valt wordt dus intro.php ingeladen, als de keuze van Optimizer op Intro1 valt, zal intro1.php worden geladen. Het nadeel hiervan is dat content voor SEO niet wordt geindexeerd (omdat er nu een Javascript functie in plaats van tekst staat) en misschien nog erger: indien iemand Javascript ondersteuning uit heeft staan ziet diegene geen content meer verschijnen. Het is een afweging die je zult moeten maken.

 

Final notes…

Ik hoop dat het idee in ieder geval duidelijk is zo. Mocht je dit nou lezen en je denkt: What the fuck doe jij moelijk, ik heb een 10x betere oplossing, please share it! Dit is wat ik tot nu toe heb kunnen vinden en zelf wat dingen erbij bedacht. Questions are welcome, happy hunting testing!

Tags: AJAX, Google Optimizer, Mootools, Multivariate Testing, xmlHttpRequest