Verhoog je conversieratio met dynamische content

Op deze manier plaats je jouw beïnvloedingswapens van je advertentie ook op de landingspagina.
Geschreven op:
25/8/2021

A/B of zelfs A/B/C testen gebeurt al erg vaak. Marketeers testen verschillende advertentieteksten en call-to-actions om te bepalen welke variant het beste werkt. Toch gaat niet iedereen ‘aan’ op dezelfde tekst, call-to-action of belofte. 

Een mooi voorbeeld hiervan zijn de 7 beïnvloedingswapens van Cialdini, waar mijn collega eerder al een blog over schreef. Het zijn namelijk niet voor niets 7 verschillende beïnvloedingstechnieken. Niet iedereen wordt warm van dezelfde belofte of geactiveerd door dezelfde call-to-action. Door met twee of meer beïnvloedingstechnieken te testen kom je er achter wat voor jouw doelgroep werkt. Dus test altijd verschillende advertenties met daarin verschillende beïnvloedingstechnieken om zoveel mogelijk klikken naar je website te genereren. 

Dynamische content op de landingpage

Maar dan? Hoe ga je dan op je website te werk? Misschien noemde je in deze advertentietekst wel dat er ‘nog maar 5 plekken beschikbaar zijn’ om schaarste te creëren. Een andere bezoeker werd wellicht getriggerd door je advertentie met een social proof kreet als ‘al 500 andere personen gingen je voor’ en ging door die advertentie naar je website. 

Onderwater weet je dus al wat voor deze verschillende personen werkt en wat ze heeft overtuigd om naar je pagina te gaan. Hoe waardevol zou het dus zijn als ze allebei de kreten op je website zien terugkomen waardoor zij geactiveerd werden? Wellicht schiet je conversieratio hierdoor wel door het dak. Ik wilde dit graag eens testen en vroeg mijn collega Laurenze, die toevallig ook aardig kan programmeren, mij te helpen met een script om dit te maken. 

Het resultaat is een script waardoor je de content op je website kunt aanpassen op basis van parameters in de url. Iets makkelijker uitgelegd: stel je url bevat aan het einde ?variabel=a, dan ziet de bezoeker versie A van je pagina. Stel de url bevat ?variabel=b, dan ziet de bezoeker versie B van dezelfde pagina. Stel je hebt een social media campagne waarin je test met twee verschillende beïnvloedingswapens, dan kun je degene die op de advertentie met kreet A klikt ook kreet A laten zien op de landingspagina. Hetzelfde geldt voor B, en als je wilt zelfs met C of D.

Enkele voorbeelden

Ik kan het blijven uitleggen, maar een voorbeeld is wellicht handiger. Ik heb twee verschillende advertenties voor onze gewaardeerde klant Loof Training & Advies als voorbeeld gemaakt. Allebei landen ze op dezelfde pagina, maar hebben ze een andere variabele in de url. Op basis van deze url veranderen twee elementen op de landingspagina. 

Advertentie 1



Deze advertentie, gericht op social proof, linkt naar https://www.teamversterken.nl/?variant=a. Zoals je kunt zien bevat de url de parameter ?variant=a. Doordat de url deze parameter bevat weet het script welke tekst hij op twee diverse plekken op de website moet plaatsen.

Microcopy 1



Microcopy 2

Advertentie 2



Deze advertentie, gericht op autoriteit, linkt naar https://www.teamversterken.nl/?variant=b. Zoals je kunt zien bevat de url de parameter ?variant=b. Doordat de url deze parameter bevat weet het script welke tekst hij op twee diverse plekken op de website moet plaatsen.

Microcopy 1


Microcopy 2



Toepassingen

Zoals je in bovenstaande voorbeelden kunt zien verandert de microcopy onder de buttons op de website op basis van de url in de advertenties. Nu is dit slechts één voorbeeld, maar er zijn natuurlijk oneindig veel mogelijkheden met dit soort kreten en triggers. Denk aan het schakelen tussen verschillende beïnvloedingstechnieken maar ook het aanpassen van je content op basis van andere variabelen. Zo heeft een van mijn collega’s eens een landingpage gemaakt voor een recruitmentbureau waarin de bedrijfsnaam van de opdrachtgever werd aangepast in de content. Het recruitmentbureau hoefde in dit geval niet steeds een andere landingpage te maken voor verschillende opdrachtgevers, maar konden door middel van de url de content op de website aanpassen. De titel was dan ‘Wil je werken bij XXX’, waarbij ‘XXX’ werd aangepast op basis van de parameter in de url. 

Het script gebruiken

Om bovenstaande technieken ook in jouw website toe te passen is een klein beetje technische kennis vereist, maar we hebben de code redelijk simpel gemaakt zodat vrijwel iedere marketeer met basiskennis HTML ermee uit de voeten kan. Het belangrijkste is dat je twee tekstelementen op je pagina maakt en die de juiste classname geeft. Het script verandert namelijk de elementen met die bepaalde classname. In onderstaand script zijn de classnames ‘dynamic-text-1’ en ‘dynamic-text-2’. Je kunt deze naam echter ook aanpassen, maar ik vind het zelf wel handig het zo te laten (dan hoef je minder aan te passen in het script). 

<script>

// Get parameter function

function getParam(name) {

  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

  results = regex.exec(location.search);

  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

}


// Set cookie function

function setCookie(cname, cvalue, exdays) {

  const d = new Date();

  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));

  let expires = "expires="+d.toUTCString();

  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

}


// Get cookie function

function getCookie(cname) {

  let name = cname + "=";

  let ca = document.cookie.split(';');

  for(let i = 0; i < ca.length; i++) {

    let c = ca[i];

    while (c.charAt(0) == ' ') {

      c = c.substring(1);

    }

    if (c.indexOf(name) == 0) {

      return c.substring(name.length, c.length);

    }

  }

  return "";

}


// Wait for the page to load

window.onload = function() {  

// Get the parameter from the URL

var variantParam = getParam('variant');

// Set variables if a parameter in the URL exists 

  if (variantParam) {

   setCookie("VariantCookie", variantParam, 30);

  }

  // Get cookie 

  var variant = getCookie("VariantCookie");

  // Set the dynamic text if variant a or b exists 

  if (variant == "a") {

    dynamicTextOne = "Hier kom je tekst voor de eerste variant";

    dynamicTextTwo = "Hier komt je tweede tekst voor de eerste variant";

  } else if (variant == "b") {

    dynamicTextOne = "Hier komt je eerste tekst voor de tweede variant";

    dynamicTextTwo = "Hier komt je tweede tekst voor de tweede variant";

  } 

  // Get the current text if variant a or b doesnot exists

  else {

    dynamicTextOne = document.getElementsByClassName("dynamic-text-1")[0].innerHTML;;

    dynamicTextTwo = document.getElementsByClassName("dynamic-text-2")[0].innerHTML;;

  }

  

  // Replace the text on page

  document.getElementsByClassName("dynamic-text-1")[0].innerHTML = dynamicTextOne;

  document.getElementsByClassName("dynamic-text-2")[0].innerHTML = dynamicTextTwo;

}

</script>

Handleiding

Hieronder leg ik stapsgewijs uit hoe je het script kunt toepassen om jouw pagina teksten te laten aansluiten op je advertentieteksten. 

  1. Kopieer de code en plaats deze voor de sluitingstag </body> op de pagina waarop je het script wil gebruiken. 
  2. Maak twee elementen voor microcopy aan en geef deze dezelfde classname als in het script. In het voorbeeld zijn dat dus ‘dynamic-text-1’ en ‘dynamic-text-2’. Geef deze elementen ook een basistekst mee voor als er geen variant beschikbaar is. Laat deze elementen allebei maar 1 keer op de pagina zien, anders moet je het script iets aanpassen.
  3. Vervolgens kun je in het script invullen wat de tekst moet worden in welke variant. In regel 47 en 48 plaats je de tekst voor de variant A, en in regel 50 en 51 plaats je de tekst voor de variant B. De twee regels per variant zijn voor de twee verschillende tekstelementen die je hebt aangemaakt. Let erop dat je de haakjes laat staan en verder niets in de code aanpast. 
  4. Het kan zo zijn dat iemand van je landingspagina naar een andere pagina op je website navigeert. Als hij vervolgens terugkomt op de landingspagina is hoogstwaarschijnlijk de parameter uit de url weg. Om deze reden wordt een cookie geplaatst. Hiermee wordt onthouden welke variant deze persoon had en wordt die tekst weer geladen. 
  5. Test altijd goed of het script werkt door ?variant=a en ?variant=b achter de url te zetten en neem de verschillende url’s mee in je verschillende advertenties om ervoor te zorgen dat de juiste mensen de juiste boodschap zien. 
Maandelijks de Thought Starter in je mailbox?
Meer weten of een vraag?

Wij helpen je graag!

Vul het formulier in en we nemen zo spoedig mogelijk contact met je op.

Bedankt voor je inschrijving!
Oops! Something went wrong while submitting the form.

Klik op bovenstaande button om de gegevens te verzenden. We zullen je gegevens gebruiken om contact met je op te nemen. Meer informatie lees je in de privacyverklaring.

Gratis proefperiode

Vrijblijvend starten met marketing automation

Vraag nu direct een vrijblijvende trial van ActiveCampaign aan. Vervolgens heb je 14 dagen de tijd om ActiveCampaign van voor tot achter te testen.

Bedankt voor je aanvraag! Binnen enkele ogenblikken ontvang je een mail met inloggegevens om de komende 14 dagen ActiveCampaign te ontdekken!
Oops! Something went wrong while submitting the form.
Interessant voor jou?

Online Concurrentie Check.

Laat onze specialisten uitzoeken wat jij kan leren van de aanpak van je concurrent:

Check aanvragen
Bedankt voor jouw interesse. Je hoort spoedig van ons.
Oeps! Er ging iets fout bij het versturen.
Wij geven mooie MKB bedrijven het podium dat ze verdienen!

Laat mij eens
met je meedenken!

06 - 10 88 10 99
WhatsApp
Bel, app of mail mij om jouw uitdagingen te bespreken.
Bart Degeling
Partner / Consultant