Liczniki czasu w e-mailach

Czasem obojętnie przechodzimy obok wynalazków, których sposób działania wydaje się oczywisty. Gdy jednak przyjrzymy im się dokładniej, następuje konsternacja: „hej, to przecież nie może funkcjonować w ten sposób!”. Potem poznajemy faktycznie zastosowane koncepcje, stajemy się odrobinę mądrzejsi a świat odrobinę bardziej zrozumiały.

Taką właśnie ścieżkę przeszedłem, gdy uważniej spojrzałem na obrazkowy licznik mierzący czas do końca promocji w jakimś mailu reklamowym. Licznik był – jak sądziłem – animowanym GIF-em osadzonym w treści wiadomości. Tylko… jak to się działo, że zawsze pokazywał prawidłową wartość? Przecież obrazki załączone do e-maila pozostają niezmienne!

Obrazki w e-mailach

Gdy mowa o osadzaniu obrazków w e-mailach, najpierw przypomnijmy kilka faktów. Poczta elektroniczna pojawiła się we wczesnych latach siedemdziesiątych i przez długi czas obsługiwała jedynie wiadomości tekstowe w „gołym” standardzie ASCII, bez literek z ogonkami i bez załączników.

Wiadomości z dołączonymi plikami były przez długi czas domeną zamkniętych rozwiązań korporacyjnych, jak np. Lotus Notes. Do ogólnego użycia weszły w drugiej połowie lat dziewięćdziesiątych, gdy ustandaryzowano format MIME, wprowadzający dwie ważne nowinki. Po pierwsze – tekstowa część wiadomości mogła być formatowana za pomocą znaczników HTML, co pozwoliło na użycie kolorów, pogrubiania, wypunktowań, justowania bloków tekstu i tak dalej. Po drugie – w pojedynczej wiadomości dało się osadzić dowolne pliki, w tym graficzne.

Bardzo ważna jest kombinacja obu nowinek – przesyłka może zawierać plik graficzny, do którego odwołuje się tekst formatowany w HTML. Spójrzmy na poniższego e-maila wyświetlanego w webowym interfejsie Gmail:

Gdy zajrzymy do tej wiadomości w postaci pierwotnej, jaka rzeczywiście podróżuje przez internet, zobaczymy to:

Na początku mamy nagłówki z datą, nadawcą, odbiorcą oraz deklaracją, że jest to wieloczęściowa wiadomość MIME. Potem widzimy treść e-maila w postaci tekstowej (czerwona sekcja) – tam nie da się wstawić obrazka, edytor oznacza jedynie jego planowaną pozycję w treści, przekazując intencje autora.

Drugą sekcją (oznaczoną na zielono) jest treść wiadomości w formacie HTML. Jak poprzednio, tak i tu polskie literki zakodowane są jako quoted-printable. Ważniejszy jest jednak fragment podkreślony na żółto – jest to HTML-owa definicja obrazka, którego lokalizacją źródłową jest tajemniczy ciąg znaków cid:ii_l49y3sro0.

Odnajdujemy go w trzeciej sekcji (niebieskiej) – ów tekst to identyfikator obrazka załączonego do wiadomości. Wiemy stąd, że „obrazek.png” dołączony do e-maila pod identyfikatorem ii_l49y3sro0 jest tym, który pojawia się w sekcji zielonej. Oczywiście nie ma obowiązku osadzania obrazka w tekście, może on pełnić rolę „zwyczajnego” załącznika.

Osadzanie obrazka ze zdalnego serwera

W przywołanym przed chwilą przykładzie źródłem obrazka był załącznik w tej samej wiadomości. Tak jednak być nie musi – osadzony obrazek może pochodzić z dowolnego serwera podłączonego do internetu. Efekt uboczny? Niektóre programy pocztowe nie pokażą ich bez wyraźnej zgody użytkownika, bo za pomocą unikalnych nazw obrazków możliwe jest śledzenie aktywności odbiorcy, m.in. jego numeru IP czy godzin, w których czytuje pocztę.

Oto wiadomość od niezaufanego odbiorcy wyświetlana w programie Outlook 365. Widzimy, że program wyświetlił ostrzeżenie oraz wstrzymał ładowanie obrazków oznaczonych strzałkami.

Funkcja osadzania w e-mailu zegara odliczającego czas do jakiegoś wydarzenia korzysta właśnie z obrazków pobieranych ze zdalnego serwera. Aby się o tym przekonać, przygotowałem nowy mailing w Mailerlite i wstawiłem tam komponent „Countdown” („odliczanie”).

Gdy wysłałem sobie testowego maila, znalazłem w jego treści następujący fragment:

Wyróżniony link wygląda tak:
https://static.mailerlite.com/cbuilder/timer/2022-08-31%2023%3A59%3A59/light/Europe%2FVienna

Gdy otworzyłem go w oknie przeglądarki, zobaczyłem następującą animację:

Uwaga! Animowany licznik pokazany powyżej zawsze pokaże 81 dni, bo jest to obrazek pobierany z mojego serwera. On pozostanie niezmienny. Gdy jednak klikniesz ten link, przy każdym odświeżeniu zobaczysz odliczanie startujące od nieco niższej wartości.

Jeśli zaś czytasz ten tekst we wrześniu 2022 lub później, a licznik doszedł do zera, możesz zmienić rok i miesiąc w URL-u tak, aby wybiegał kilkanaście dni w przyszłość.

Animowany obrazek z licznikiem

Skoro wiemy, jak działa mechanizm odliczania czasu, możemy odpowiedzieć na kilka pytań dotyczących architektury takiego rozwiązania.

Dlaczego animowany GIF a nie Javascript?

Osadzony w HTML-u programik w Javascripcie oferowałby programistom i designerom dużo większą swobodę twórczą. Programy pocztowe nie pozwalają jednak na wykonanie kodu Javascript osadzonego w e-mailach, więc taka opcja jest wykluczona. Z perspektywy czasu można krzyknąć: na szczęście! Różnorodność ataków na użytkowników internetu jest zatrważająco duża, nie potrzebujemy ryzyk związanych ze wstrzykiwaniem złośliwych skryptów do poczty elektronicznej.

Jak to się dzieje, że taki licznik umie liczyć w nieskończoność?

Nie umie! Użyjmy programu Imagemagick, aby wszystkie klatki animacji zapisać w jednym obrazku

magick montage countdown.gif -coalesce -tile 7x -geometry "+4+4" -background gray -resize 150x singlepic.gif

Oto efekt:

Widzimy, że animacja zawiera jedynie 91 jednosekundowych kadrów. Tyle wystarcza, bo prawie nikt nie będzie się gapił w licznik dłużej, niż półtorej minuty. Ponadto przy każdym kolejnym otworzeniu maila obrazek załaduje się od nowa.

Czemu obrazek załaduje się od nowa?

Nagłówki HTTP wysyłane wraz z obrazkiem przez serwer zawierają następujące dyrektywy:

expires: Sat, 26 Jul 1997 05:00:00 GMT
last-modified: Sat, 11 Jun 2022 15:15:38 GMT
cache-control: no-store, no-cache, must-revalidate
cache-control: post-check=0, pre-check=0
pragma: no-cache

Wszystkie na kilka różnych sposobów mówią to samo – obrazek nie powinien trafić do cache, już jest nieaktualny, przy każdym kolejnym wyświetleniu trzeba go pobrać od nowa.

Ile różnych obrazków siedzi po stronie serwera?

Zależy to od konkretnego dostawcy liczników. Mailerlite pozwala na odliczanie nie dłuższe niż 100 dni, potrzebnych jest więc ponad osiem i pół miliona różnych obrazków.

Wbrew pozorom nie jest to szczególnie wielka liczba. Po pierwsze – nie musimy wszystkich generować zawczasu, możemy tworzyć je na żywo przy pierwszym pobraniu i zachowywać do późniejszego wykorzystania. Po drugie – możemy uznać, że nie potrzebujemy sekundowej precyzji i zaokrąglać godzinę żądania do dziesiątek sekund, co dziesięciokrotnie zmniejszy liczbę plików. Po trzecie – dystrybucja statycznych grafik przez CDN kosztuje grosze, więc możemy dowolną ich liczbę przenieść na serwery usługodawcy.

Dlaczego w URL-u z obrazkiem pojawia się Europa i Wiedeń?

Przypomnijmy adres:

https://static.mailerlite.com/cbuilder/timer/2022-08-31%2023%3A59%3A59/light/Europe%2FVienna

Wyjaśnienie jest następujące – licznik ma odliczać czas do konkretnej chwili, np. do ostatniej sekundy przerwy wakacyjnej dzielącej kolejne lata nauki szkolnej. Wskazana godzina jest jednak ściśle związana z polskim systemem edukacji, a więc i polską strefą czasową. Jeśli pojedziemy do Nowego Yorku (minus 6h względem Polski), to nie przedłuży to o 6 godzin wakacji w kraju. Licznik ma brać pod uwagę czas warszawski, nie lokalny czas podróżnika.

Czemu Wiedeń? Bo to ta sama strefa czasowa, co Warszawa.

Czy trzeba mieć konto w systemach mailingowych aby używać licznika?

Nie trzeba. Wystarczy Gmail i licznik wyklikany na stronie sendtric.com (albo countdownmail.com albo dowolnej innej, jest ich cała masa). Procedura wygląda następująco:

• wchodzisz na stronę sendtric.com, generujesz licznik
• wygenerowany kod HTML z linkowanym obrazkiem kopiujesz do pliku tekstowego, zapisujesz go z rozszerzeniem html
• otwierasz plik w przeglądarce internetowej, potem CTRL-A i CTRL-C (zaznacz wszystko, kopiuj do schowka)
• w Gmailu tworzysz nowego maila, ustawiasz kursor, CTRL-V (wklej)

Wynik powinien wyglądać jakoś tak:

Ty wysyłasz maila, odbiorca widzi w nim licznik. Do takich testów najlepiej użyć dwóch kont pocztowych od dwóch różnych dostawców.

Z ciekawostek – Sendtric umieszcza w swoich GIF-ach jedynie 60 sekund odliczania:

Zakończenie

Szykując ten tekst sprawdziłem specyfikację formatu GIF89a – chciałem poznać wewnętrzną budowę animowanego GIF-a. Wiecie, że nigdzie w nagłówkach nie ma deklaracji rozmiaru pliku ani liczby klatek animacji? Kadry są ze sobą sklejane aż do momentu, gdy zamiast kolejnego obrazka nastąpi znacznik końca pliku.

To oznacza, że teoretycznie można zrobić licznik, który zamiast nędznej minuty czy półtorej obsłuży całe tygodnie odliczania, z jedną klatką animacji dosyłaną co sekundę przez cały ów okres, przez jedno połączenie HTTP transmitujące niekończącego się GIF-a! Jedyny problem to odporność przeglądarek na ładowane tygodniami gigantyczne animacje. Sądzę, że większość podda się gdzieś pomiędzy jednym tygodniem (~370 MB) a jednym miesiącem (~1500 MB).

Weryfikację tego faktu pozostawiamy jako ćwiczenie dla zainteresowanego czytelnika.