Conditionele content, en wat je er mee kan doen

Conditionele content in WordPress en WooCommerce

Eén van de manieren om jouw bezoeker de content aan te bieden die hij of zij het liefst ziet, is te werken met dynamische content, content waarin jouw klant het meest in geïnteresseerd is. En dat kan je natuurlijk op verschillende manieren doen.

In dit blogartikel wil ik ingaan op een aantal plugins die je kunnen helpen om conditionele content aan te bieden.

Ik zal de termen ‘dynamische content’ en ‘conditionele content’ door elkaar gebruiken, maar er is een verschil tussen. In principe is alle conditionele content dynamisch, maar niet alle dynamische content is conditioneel. Een beetje ‘een koe is een dier, maar niet ieder dier is een koe’.

Dynamische content, is content die zich aanpast. Wanneer ik een nieuwe blogpost schrijf, dan zal het overzicht van mijn blogposts op de archiefpagina en het lijstje met nieuwe blogposts op de homepage worden aangepast.

Wanneer ik een blok op mijn website zo instel, dat er drie willekeurige blogposts getoond moeten worden, dan is dit blok wel dynamisch, maar nog steeds niet conditioneel.

Dynamische gegevens zijn conditioneel, wanneer er factoren zijn, waardoor verschillende bezoekers gepland verschillende content te zien krijgen.

Enkele voorbeelden

Eén voorbeeld is de ‘Recent bekeken’ widget van WooCommerce. Hierin worden de producten getoond, die je zojuist hebt bekeken. Die zijn voor iedere bezoeker verschillend. Productaanbevelingen die afhankelijk zijn van jouw browse- of koopgeschiedenis is een ander voorbeeld.

Dit zijn enkele eenvoudige voorbeelden, maar in dit blogartikel, en een aantal artikelen die hierop volgen, gaan we dieper in op meer geavanceerde mogelijkheden.

De plugins

In dit blogartikel kijken we naar een drietal plugins. Als eerste de Page- en Theme builder Elementor Pro. Als tweede naar de plugins ‘Dynamic Tags for Elementor’ en ‘Conditional Tags for Elementor’ (Ik weet het, technisch gezien zijn het twee plugins, maar ik tel ze als één, omdat deze plugins nauw samenwerken) en tenslotte If-So. Bij If-So bespreek ik ook een aantal ‘add-ons’ door If-So, maar ook dit zie ik niet als afzonderlijke plugins.

Maar laten we met de ‘Dynamic Conditions’ van Elementor beginnen.

Elementor Pro – Display Conditions

De Elementor Pro ‘Display Conditions’ vind je bij iedere widget en elke container onder ‘Geavanceerd -> Lay-out -> Weergave voorwaarden.

Klik je daarop, dan krijg je een dialoogscherm waarop je de voorwaarden waaronder een bepaalde widget of container moet tonen te zien.

De condities die je hier kunt gebruiken om content wel of niet te tonen zijn op dit moment:

• Pagina titel – Je kan hier aangeven of een pagina titel wel of niet een bepaalde waarde moet hebben. Een optie waar ik zelf niet veel serieuze gebruiksmogelijkheden voor zie. Wanneer er een optie ‘bevat’ zou zijn om te controleren (dus je wilt bijvoorbeeld elementen alleen tonen, wanneer de paginatitel een specifieke tekst bevat, zou ik er nog enig nut in zien. Voor een specifieke pagina niet zo zeer.
• Hoofdpagina – Dit begint zinvol te worden. Als je bepaalde elementen wilt tonen of verbergen op pagina’s die onder een bepaalde hoofdpagina vallen, dan kan dit een nuttige conditie zijn.
• Auteur (van Pagina) – Toont of verbergt elementen voor pagina’s van een specifieke auteur.
• Bericht titel – Toont of verbergt elementen voor post-types met een specifieke titel. Zie ook bij ‘pagina titel’ waarom dit niet zinvol is.
• In categorieën – Toont of verbergt elementen die al dan niet in specifieke categorieën zitten. Dit kan bijvoorbeeld nuttig zijn, wanneer je bepaalde elementen alleen wilt tonen onder aan specifieke blogposts. Bijvoorbeeld, je organiseert een workshop vliegtuigjes vouwen, en je wil die alleen onder de aandacht brengen van mensen die de blogposts in de categorie ‘vliegtuigjes vouwen’ lezen.
• In tags – Hetzelfde als met categorieën.
• Datum aangepast – Hier kun je aangeven, dat een element alleen getoond moet worden, indien de datum van de laatste aanpassing groter of kleiner is dan een bepaalde datum. Dit kan bijvoorbeeld nuttig zijn, wanneer je een badge ‘updated’ op een post zou willen laten zien. Het enige probleem hier, is dat je hier alleen met absolute datums kan werken, dus niet iets als ’30 dagen geleden’.
• Datum van publicatie – Hetzelfde verhaal als met ‘datum aangepast’.
• Uitgelichte afbeelding – Hier heb je de keuze ‘is ingesteld’ of ‘is niet ingesteld’. Hiermee kan je elementen tonen of verbergen afhankelijk van het wel of niet voorkomen van een uitgelichte afbeelding.
• Login status – Afhankelijk van het wel- of niet ingelogd zijn van de bezoeker worden elementen wel of niet getoond. Bijvoorbeeld handig om een inlogformulier al dan niet te tonen of verbergen.
• Rol – Elementen worden getoond of verborgen afhankelijk van de gebruikersrol van een ingelogde gebruiker.
• Registratiedatum – Een element wordt al dan niet getoond op basis van de registratiedatum van een gebruiker. Omdat dit opnieuw -zie ook ‘Datum aangepast’, alleen op basis van een absolute datum kan, en niet op basis van een x aantal dagen in vergelijking met een andere datum, is ook dit een conditie met beperkte gebruiksmogelijkheden.
• Dag van de week – Dag van de week toont of verbergt elementen op basis van de dag in de week. Enkele jaren geleden heb ik een opdracht gehad van een klant die niet wilde, dat mensen op zondag in zijn webshop konden kopen. Toen maakten de ‘Display conditions’ nog geen deel uit van Elementor (en los daarvan, de klant gebruikte geen Elementor), maar in plaats van de ‘ingewikkelde code’ die ik destijds heb moeten schrijven, had dit ook opgelost kunnen worden, door ‘winkelwagen’ en ‘checkout’ knoppen op zondag te verbergen.
• Tijd van de dag – Elementen worden getoond of verborgen op basis van een tijdstip op de dag.
• Huidige datum – Dit is er één die ik zelf vaak gebruik. Wanneer er een kortingsactie is, die op een bepaalde dag verloopt, dan wordt de kortingsactie verborgen wanneer de datum is verstreken.
• Van categorieën (Archief) – De elementen worden getoond of verborgen, wanneer een categorie archief wordt geladen. Kan bijvoorbeeld handig zijn voor categorie gerelateerde advertenties / aankondigingen.
• Van tags (Archief) – Als ‘van categorieën’, maar nu met tags
• Van auteurs (Archief) – Als ‘van categorieën’, maar ditmaal heeft het betrekking op de auteur van een artikel
• Van URL – Elementen worden verborgen of getoond naar aanleiding van een URL of een deel van de URL. Dit kan je bijvoorbeeld op landingspagina’s gebruiken, wanneer je een bezoeker van Facebook anders wilt begroeten dan een bezoeker die via YouTube binnen is gekomen.
• Dynamische tags – Hier kan je aan de hand van dynamische tags en ‘custom fields’ en hun waarde je voorwaarden instellen.

Zoals je ziet bieden de Elementor Display Conditions een groot aantal mogelijkheden om content conditioneel te tonen. Helaas ontbreken een aantal opties die het werkelijk interessant maken, zoals de mogelijkheden om voorwaarden te creëren op basis van een deel van een titel, of data vergelijkingen in ‘dagen voor of na’ te maken, inplaats van data tegen een vaste datum te moeten vergelijken.

Er staan diverse verzoeken richting Elementor open om dit aan te passen, dus het is goed mogelijk, dat het in een toekomstige versie wordt aangepast.

Dynamic Conditions/ DynamicTags

Elementor Display Conditions zijn relatief nieuw. Omdat het altijd al wenselijk is geweest secties -en later containers- conditioneel te kunnen tonen, zijn er in de loop der jaren een aantal plugins verschenen die dit mogelijk maken voor Elementor.

Eén van de meest populaire is de combinatie van DynamicTags en Dynamic Conditions van RTO Gmbh. De DynamicTags plugin voegt een enorme hoeveelheid extra dynamische tags toe aan Elementor. Teveel haast om op te noemen. Iets wat wel even speciale aandacht verdient is dat alle typen ACF velden inclusief ACF-pro velden worden ondersteund, en dus niet alleen de beperkte subset die Elementor zelf ondersteunt. Deze DynamicTags werken ook prima samen met de zuster-plugin ‘Dynamic Conditions’.

Wanneer we de Elementor ‘native’ Display Conditions met Dynamic Conditions van RTO Gmbh vergelijken, zijn er een paar belangrijke verschillen.

• Met Elementor Pro is het mogelijk meerdere condities te gebruiken, met Dynamic Conditions kun je slechts één conditie per widget of container gebruiken
• De meeste Elementor Pro condities zijn nogal rechttoe-rechtaan. Je kan bij de meeste eigenschappen alleen ingeven of een veld gelijk of niet gelijk moet zijn aan een waaarde, bij Dynamic Conditions heb je een groot aantal opties, waaronder:
  • is gelijk aan
  • is niet gelijk aan
  • bevat
  • bevat niet
  • is leeg
  • is niet leeg
  • tussen
  • minder dan
  • groter dan
  • in array
  • array bevat
• De extra tags die door DynamicTags beschikbaar gemaakt worden zijn niet te gebruiken in de Elementor Display Conditions. Overigens, een groot aantal tags die in Elementor zelf al voorkomen kun je ook niet voor de Elementor Display Conditions gebruiken.

Wanneer we beide plugins met elkaar vergelijken kan je dus in het kort zeggen, dat ze allebei ernstige beperkingen hebben. Elementor zelf biedt zeer beperkte conditionele mogelijkheden, maar staat wel meerdere voorwaarden per element toe, Dynamic Conditions biedt een groot scala aan mogelijkheden, maar staat geen meerdere voorwaarden per element toe.

If-So

De derde plugin manier om conditionele content te tonen is met de If-So plugin. De If-So plugin is niet typisch voor Elementor (Pro) bedoeld, maar kan in vrijwel iedere page builder gebruikt worden. Voor een aantal pagebuilders heeft If-So een eigen integratie, in andere pagebuilders zal de conditionele content via shortcodes getoond moeten worden. Gelukkig is er voor Elementor (Pro) een integratie beschikbaar.

Er is ook een gratis versie van deze plugin, maar hier ga ik verder niet op in, voornamelijk omdat deze gratis versie geen extra opties biedt, die niet in Dynamic Conditions worden geboden, en Dynamic Conditions zelfs meer mogelijkheden heeft. Wil je echter meer dan is If-So een heel goede optie.

Een groot verschil tussen de eerder besproken plugins en If-So is dat bij If-So een cookie gezet kan worden, waardoor bij een volgend bezoek informatie beschikbaar is over je bezoeker.

If-So en de GDPR

Wanneer we het over het zetten van Cookies hebben, dan is natuurlijk direct de vraag, of en in hoeverre If-So aan de GDPR voldoet. Het mooie van deze plugin is echter, dat de informatie over de gebruiker niet in de database wordt opgeslagen, maar uitsluitend in cookies. Jij legt dus geen informatie over de gebruiker vast en registreert ook niets -behalve dan wat je via andere plugins registreert- over je gebruikers.

If-So is daarom ook helemaal GDPR proof.

Audiences

In ‘If-So’ (betaalde editie, maar alles wat ik hier verder schrijf heeft alleen betrekking op de betaalde editie) is het mogelijk om zogenaamde ‘audiences’ aan te maken. Een ‘Audience’ is een bepaalde doelgroep die je wilt bereiken, met je conditionele content.

Bezoekers kunnen op drie manieren worden toegevoegd aan een audience

• Indien er aan een voorwaarde wordt voldaan.
• Omdat op de pagina een specifieke shortcode voorkomt, waarmee een bezoeker wordt toegevoegd
• Door ‘zelf selectie’. Het is mogelijk om een pop-up of een formulier te tonen, waarmee de bezoeker een voorkeur voor een bepaalde productgroep, zijn leeftijd of andere relevante informatie aan kan geven.

Laten we eens aan de hand van een voorbeeld bekijken, hoe dit werkt. Stel, ik heb een website waarop ik kleding verkoop. En op de homepage wil ik de 4 nieuwste producten aangeven die in een bepaalde categorie zijn toegevoegd, maar die categorie wil ik af laten hangen van de voorkeuren van een bezoeker aan mijn site. Ik verkoop heren- en dameskleding en beide categorieën onderverdeeld in ‘formeel’ en casual’

Ik maak dus vier audiences aan: ‘Heren – Formeel’, ‘Heren – Casual’, ‘Dames – Formeel’ en ‘Dames – Casual’.

Indien er aan een specifieke voorwaarde wordt voldaan

If-So beschikt over een integratie voor WooCommerce. Eén van de mogelijkheden van deze integratie is te kijken naar welke producten of categorieën er in de winkelwagen voorkomen. Ik zou dus als trigger kunnen gebruiken, dat bij het toevoegen aan de winkelwagen van een product in een specifieke categorie de bezoeker ‘lid’ gemaakt wordt van de desbetreffende audience.

Door een shortcode

Wat ik ook kan doen is een shortcode aanmaken, die een bezoeker van de pagina’s met die shortcode toevoegt aan de desbetreffende audience. Zodra iemand dus bijvoorbeeld producten in de categorie ‘Heren – Casual’ bezoekt, wordt hij ook toegevoegd aan de audience voor ‘Heren – Casual’.

Door zelf-selectie

En tenslotte is er nog de mogelijkheid om de klant toe te voegen door de klant zelf -bijvoorbeeld door een pop-up- in een lijstje aan te laten geven waar hij in geïnteresseerd is.

Belangrijk

Een belangrijk punt om te realiseren is, dat ‘audiences’ nooit zichtbaar worden binnen je website zelf. Je kan dus op geen enkele manier zien hoe groot je audiences zijn. Het ‘lidmaatschap’ van zo’n audience wordt alleen opgeslagen in de browser van je bezoeker. Je kunt wel het resultaat van het benoemen van je audiences zien. Want If-So houdt netjes bij welk alternatief hoe vaak is gekozen.

Wanneer je dus op basis van het lidmaatschap van een audience op de homepage een widget laat zien met de vier meest recente producten voor de verschillende audiences, zie je precies hoe vaak welke versie is getoond.

Extensions en Integrations

Voor If-So is een groot aantal extensions (toevoegingen aan de functionaliteit van If-So zelf) als integrations (een integratie met een andere plugin) beschikbaar.

Recentelijk heb ik laten zien hoe je met Elementor Pro een ‘Abandoned Cart’ pop up kunt maken. Helaas werkt dit alleen wanneer je Elementor Pro Advanced Solo of hoger gebruikt, niet met Elementor Pro essentials. Binnenkort zal ik je laten zien hoe je met If-So ook een Abandoned Cart pop up kunt bouwen.

Voor wat de ‘Integrations’ betreft, er is op dit moment een groot aantal integrations beschikbaar. Onder andere met:

• WooCommerce
• WooCommerce Subscriptions
• ActiveCampaign
• Wishlist Member
• MemberPress
• Restrict Content Pro
• Paid Memberships Pro
• AffiliateWP
• Easy Digital Downloads
• Weglot
• WPML
• LearnDash
• WP Courseware
• MasterStudy
• LearnPress
• TutorLMS
• WP Job Manager
• WP Fusion

Tientallen voorbeelden

Wanneer je wilt weten wat er allemaal mogelijk is met If-So, op de website van If-So staan tientallen voorbeelden.

Er is meer

Aangezien tegenwoordig If-So ook integraties aanbiedt met een aantal plugins die ik met WordXPression gebruik, zal ik zeker vaker over If-So gaan schrijven. Zoals beloofd, binnenkort komt er een artikel over hoe je een abandoned cart pop up in kan bouwen in je website met behulp van If-So.

Mocht je zolang niet willen wachten om meer over If-So te weten te komen, dan kan je ook alvast een wat ouder artikel over deze plugin lezen… Hoe je If-So kan gebruiken voor A/B testen.

Ben je op zoek naar een nieuwe website, wil je jouw bestaande website omzetten naar Elementor, of zoek je een online leeromgeving om jouw cursussen en trainingen aan te bieden? Neem dan eens contact op met WordXPression