Ik Kreeg een Snelheidsbekeuring
Maar ik leerde er wel een nieuwe truc door! De kerstvakantie is voorbij en blijkbaar had ik haast om thuis te komen na het kerstdiner. Dit was duidelijk nadat ik een late kerstkaart kreeg van mijn leasemaatschappij:
Geachte heer Van Brakel,
Hieronder treft u een link aan met belangrijke informatie inzake een verkeersovertreding. Het betreft hier het voertuig met kenteken X-XXX-XX. Indien gewenst kunt u veilig en snel de verkeersovertreding betalen met iDEAL.
Uw verkeersovertreding kunt u raadplegen via deze link: Klik hier
Met vriendelijke groet,
Lease maatschappij
Ik was natuurlijk niet al te blij met het zien van de foto bij de verkeersboete, waar duidelijk uit bleek dat deze boete voor mij bestemd was. Als goede burger die ik ben heb ik de boete direct betaald, dit al voor de kans zich op deed dat ik de boete zou vergeten te betalen.
Nadat ik de boete had betaald, opende ik de mail van de leasemaatschappij opnieuw. Ik zag dat het icoon met het vraagteken, wat eerst naast de betaalknop stond, was veranderd in een groene check.
Ik ging ervan uit dat dit soort emails statische informatie bevatten en dus dat emails alleen actueel zijn vanaf het moment dat ze verstuurd worden, maar dat is dus niet het geval. Hoe lukt het de personen achter de gestuurde mail om live te laten zijn wat de status van mijn rekening is? In onderstaand deel van de blog gaan we samen uitzoeken hoe dit kan, wat de verschillende methodes zijn en of we dit zelf makkelijk kunnen implementeren in onze emails.
Hoe Werkt Het
Als eerste ben ik gaan kijken naar de broncode van de email. En dit zag er allemaal normaal uit gewoon een icoon en wat tekst. Geen javascript of andere magie. Het icoon wordt opgehaald van een externe server en hierin staat een uniek identificatienummer in plaats van een generic icoon, die in meerdere emails gebruikt kan worden:
https://example.com/a30e1708-d9fe-45b5-a9aa-f165466898f7/status.png
Dit nummer is waarschijnlijk gelinkt aan mijn verkeersboete, en als ik deze boete betaal vervangt een proces op de achtergrond het icoon met het vraagteken in een icoon met het check teken. Doordat dit icoon dezelfde naam heeft zal de email in combinatie met het cache beleid niet lokaal worden opgeslagen (gecached). Het cache beleid is als volgt opgebouwd:
cache-control: no-cache, no-store, max-age=0, must-revalidate
Met als resultaat dat iedere keer dat jij de email opent er van de server de nieuwste versie van de afbeelding wordt opgehaald. Hiermee wordt er bepaald of je dus of het icoon van het vraagteken of het check teken te zien krijgt.
Door mijn boete staat hier nu een duidelijk voorbeeld van hoe veranderde inhoud van een email kan worden toegepast en hoe het kan werken. Met het toepassen hiervan geef je de lezer een gevoel van haast (met het vraagteken icoon) of van bevestiging als de boete betaald is (met het check icoon).
Countdown Timers
Terwijl ik dit aan het onderzoeken ben begin ik mijzelf af te vragen of er ook een andere manier is om live content te laten zien. En het blijkt dat die er zeker zijn! Een voorbeeld wat overal op het internet terugkomt is die van een countdown. De countdown wordt primair gebruikt voor marketing om bijvoorbeeld aan te geven wanneer een aanbieding afloopt.
Gemaakt met: https://www.sendtric.com
Zoals hierboven te zien is worden GIFs gebruikt voor het weergeven van een countdown. Dit zorgt ervoor dat de email nog interactiever voelt. Misschien als je zelf zo een countdown in je mailbox hebt gehad is het je opgevallen dat de countdown na een minuut (of een paar minuten) reset.
Zoals alles op het internet moet het geoptimaliseerd zijn voor slome internetverbindingen en kleine databundels. Dat is ook wat je bij deze GIFs ziet. Door het beperken van de duur van de GIF bevat deze minder afbeeldingen en is deze dus minder groot dan bij de volledige duur.
Dit werkt verder op bijna dezelfde manier als bij het status icoontjes van het vorige hoofdstuk. Iedere keer als je de email opent wordt er een verzoek verstuurd naar de server van de GIF, die hiervoor snel een nieuwe versie genereert met de correcte beelden betreffende de countdown. Sommige platformen bieden zelfs opties aan om specifieke afbeeldingen te laten zien als de timer afloopt of gebaseerd op de tijdzone van de gebruiker.
Afbeeldingen en GIFs
Nu hebben we gezien hoe een simpele techniek ervoor kan zorgen dat een email die eerst alleen statische informatie kon bevatten, nu ook live informatie kan weergeven. Dit kan weer in ontelbare creatieve manieren gebruikt worden, zoals bij: buienradars, resultaten van een poll of zelfs het inventaris van een product wat bijna leeg is.
Als je interesse gewekt is over dit onderwerp en je benieuwd bent naar een nog complexere oplossing, verwijs ik je graag door naar de volgende blog. Het is een post van het marketing platform Litmus waar ze uitleggen hoe je een live twitter feed kan weergeven in je emails, gebruik makend van CSS bestanden om de data in te vervoeren. Ze gebruiken daarbij globaal hetzelfde principe als wat hier is beschreven in bovenstaande paragrafen.
Een van de nadelen van implementatie die in deze blog en door Litmus wordt beschreven is dat afbeeldingen GIFs of CSS bestanden maar een keer worden geladen. Dit is alleen als een gebruiker de email opent, als deze dan open blijft staan wordt de status niet meer aangepast of loopt de countdown niet meer gelijk met de werkelijkheid. Dit is normaal geen groot probleem aangezien de meeste mensen een email maar kort geopend hebben.
Conclusie
Ik heb alleen nog maar het topje van de ijsberg ontdekt wat betreft email ontwikkeling, maar het is erg leuk om meer over zo een niche onderwerp te leren. Doordat er zoveel beperkingen zijn door alle verschillende email clients word je als ontwikkelaar gedwongen om creatieve oplossingen te bedenken voor problemen waar je tegen aan loopt. Het weergeven van live email content is daar een goed voorbeeld van.
In de toekomst zou ik graag dieper op dit soort (of aanverwante) onderwerpen willen duiken. Je kan dan denken aan volg pixels (afbeeldingen) die de zender een bericht geven als een email is geopend, honeypots om in de gaten te kunnen houden of er op je mailbox is ingebroken, responsive emails, of zelfs een plan b om iets te corrigeren in een al verstuurde email.
Als je vragen hebt of zelf graag een blog wilt zien over een verwant onderwerp, voel je vrij om een reactie te plaatsen en wie weet komt het terug in mijn volgende blog.
TL;DR
Live data in emails wordt voornamelijk gebruikt door het weergeven van afbeeldingen of GIFs waarvan het cache beleid is uitgeschakeld. Hierdoor is de server verantwoordelijk voor het vervangen van de afbeelding met een die de meet up-to-date status weergeeft. Er zijn meer complexe methodes om dit te doen door middel van bijvoorbeeld CSS bestanden. Maar deze zijn niet zo breed ondersteunt als het live gebruik van afbeeldingen en GIFs.
Coverafbeelding door: Michael Schwarzenberger