API: personoidut sähköpostit SendGridillä

Organisaation kyvykkyys yhdistää erilaisia palveluita yhteen rajapintojen (API) avulla voi merkitä etumatkaa suhteessa kilpailijoihin. Kaikkea ei kannata rakentaa itse vaan usein kannattaakin hyödyntää valmiita palveluita osana organisaation tuottamia omia palveluita tai liiketoimintaprosesseja.

Tässä kirjoituksessa esitetään esimerkki, jossa käytetään SendGrid – nimisen palvelun sähköposti API:a personoidun sähköpostin lähettämiseen.

SendGrid

Twilio SendGrid on palvelu, joka tarjoaa markkinoinnin automaation ja sähköposti API tuotteet kehittäjille, jälkimmäisen esimerkiksi integroitavaksi näiden omiin liiketoimintaprosesseihin.

Tässä esimerkissä luodaan transaktionaalinen sähköpostipohja, tätä hyödynnetään tilausvahvistuksena ja siinä luetellaan kaikki palvelut, jotka asiakas juuri tilasi.

Yhtenä tärkeänä osa-alueena tällaista palvelua käyttöön otettaessa on, että varmistetaan sähköpostin perillemeno, tämä vaatii useimmiten jonkun verran konfigurointia.

Dynaaminen sähköpostipohja

Dynaaminen sähköpostipohja eli templaatti suunnitellaan SendGridin sähköpostieditorilla, jolla käytännössä raahataan taustapohjalle erilaisia elementtejä alla olevan kuvan mukaisista moduuleista.

Personoitavat osiot laitetaan HTML – blokin sisälle, SendGrid hyödyntää Handlebars – nimistä templaattikieltä näissä osissa. Käytännössä {{personoitava sisältö}} rakenne HTML – blokissa tuottaa sähköpostin vastaanottajan profiilin mukaisen viestisisällön.

Personoitavan dynaamisen sähköpostin rakenne

Tässä esimerkissä haluamme tuottaa taulukon, joka esittää kaikki ostajan ostamat palvelut riveillä, niiden hinnat sekä hintajaksojen voimassaoloajat. Tämä edellyttää dynaamista taulukkoa, jonka rivit luodaan datan perusteella.

Handlebars tukee tietyntyyppistä for each luuppia, tässä tapauksessa piti luoda dynaaminen taulukko alla olevan mallin mukaan.

<p>Tässä tilaamasi tuotteet {{firstName}} {{lastName}}</p>
<br>
<table style="border: 1px solid black;">
<tr style="border: 1px solid black;">
    <th style="border: 1px solid black;">Tuote</th>
    <th style="border: 1px solid black;">Hinta</th>
    <th style="border: 1px solid black;">Voimassa alkaen</th>
    <th style="border: 1px solid black;">Voimassa asti</th>   
</tr>
<!-- {{#each products}} -->
<tr style="border: 1px solid black;">
    <td style="border: 1px solid black;">{{this.product}}</td>
    <td style="border: 1px solid black;">{{this.price}}</td> 
    <td style="border: 1px solid black;">{{this.startDate}}</td>
    <td style="border: 1px solid black;">{{this.validUntil}}</td>
</tr>
<!-- {{/each}} -->
</table>

Testasin muutamin eri tavoin tyylien asettamista ja ainakaan gmail ei suostunut näyttämään taulukkoa halutulla tavalla, ellei käyttänyt inline CSS tekniikkaa.

SendGridin rajapintakutsu ja käytetty data

SendGrid tarjoaa joukon valmiita kirjastoja, mutta tässä käytin Postmania luomaan JSON muodossa olevan sähköpostin datan sekä rajapintakutsun.

Käytin rajapintakutsuun alla olevan JSON:n mukaista dataa

{
   "from":{
      "email":"[tähän lähettävä sähköpostiosoite]"
   },
   "personalizations":[
      {
         "to":[
            {
               "email":"[tähän vastaanottajan sähköposti]"
            }
         ],
         "dynamic_template_data":{
            "firstName":"Asko",
            "lastName": "Kauppinen",
            "products":[
               {
                  "product":"Ekosähkö perusmaksu",
                  "price":"0.00 € per kuukausi",
                  "startDate":"1.6.2020",
                  "validUntil":"31.8.2020"
               },
               {
                  "product":"Ekosähkö perusmaksu",
                  "price":"3.99 € per kuukausi",
                  "startDate":"1.9.2020",
                  "validUntil":"31.5.2022"
               },
               {
                  "product":"Ekosähkö yleissähkö",
                  "price":"3.75 snt per kWh",
                  "startDate":"1.6.2020",
                  "validUntil":"31.5.2022"
               }
            ]
          }
      }
   ],
   "template_id":"[tähän sähköpostipohjan / templaatin tunniste]"
}

Kohdassa ”dynamic_template_data” ovat keskeisimmät viestisisältöön vaikuttavat asiat.

Lopputulos

Tämä esimerkki osoittaa miten kaupallisen palvelun avulla on mahdollista nopeasti lisätä omaan liiketoimintaprosessiin toiminnallisuuksia, kaikkea ei kannata kehittää itse vaan ottaa käyttöön palveluita.

Ja sähköpostin vastaanottajalle personoitu sähköposti näyttää tältä!