Käyttämällä Builder-malli luoda Dynamic Email malleja markkinoinnin automaatio

Kun sähköpostimallit, tuote ... on lopullinen HTML tai JSON edustus sähköposti. Rakentaja kokoaa komponentteja, kuten otsikot, kehon lohkot, alatunnisteet, ja dynaaminen paikka haltijat. Koska rakentaminen logiikka on eristetty, voit ottaa käyttöön uusia sähköpostityyppejä muuttamatta olemassa olevaa koodia. Tämä kurinalaisuus tekee järjestelmästä enemmän modulaarinen ja helpompi testata.

Dynaamisen sähköpostimallin ydinkomponentit

Ennen kuin käytät Builder-kuviota, se auttaa ymmärtämään rakennuspalikoita, jotka useimmat markkinointisähköpostit jakavat:

• Otsikko[ . Logo, yrityksen nimi, valinnainen otsikkokuva ja esiotsaketeksti.
• Koodin osat[ . Sankaribanderit, tekstipalikat, tuoteruudut, suosittelut, lähtölaskenta-ajastimet tai mukautetut sisältömoduulit.
• Call-to-action (CTA)[ ... .................................................................................................................................................................................................................................
• Footer[ . ...
• Dynaamiset paikanhaltijat[ ... [% raaka-aine %]...[% lopputuote %) , ...

Jokainen komponentti voi vaihdella kampanjatyypin mukaan. Mainossähköposti voi sisältää useita tuotelohkoja ja lähtölaskenta-ajastimen; salasanan palautussähköposti on harva ja transaktiollinen. Builder Pattern käsittelee tätä vaihtelua tyylikkäästi.

Sovelletaan Builder-kuviota sähköpostimalleihin

Vaihe 1: Määrittele rakentajan rajapinta

Käyttöliittymä ilmoittaa menetelmät jokaiselle komponentille, johon voit sisällyttää. Tässä on käyttöliittymä tyyppiScript-tyyppisessä pseudokoodissa:

interface EmailBuilder {
 setHeader(logo: string, company: string): this;
 addHeroBanner(imageUrl: string, alt: string): this;
 addTextBlock(heading: string, body: string): this;
 addProductGrid(products: Product[]): this;
 addCtaButton(text: string, url: string): this;
 setFooter(unsubscribe: string, address: string): this;
 addDynamicPlaceholder(key: string, defaultValue: string): this;
 build(): EmailTemplate;
}

Huomaa, että jokainen menetelmä palauttaa ... ... tämä tukee menetelmän ketjuttamista, jolloin asiakaskoodi on tiivis.

Vaihe 2: Luo betonirakentajat

Jokainen betonirakentaja toteuttaa käyttöliittymän ja rakentaa tietynlaisen sähköpostin. Esimerkiksi:

• PromotionalBuilder[ ... Lisää tuoteruudut, rajoitetun ajan tarjoukset, lähtölaskenta-ajastimet.
• TransactionalBuilder[ . ... Tuottaa minimaalisia malleja, joissa on tilaustiedot, tilahälytykset ja joissa ei ole markkinoinnin häiriötekijöitä.
• NewsletterRakentaja ...

Betonirakentajat varastoivat kootut komponentit sisäiseen tuote-esineeseen. He voivat myös soveltaa oletusarvoja tai tuotemerkkiohjeita.

Vaihe 3: Johtajan toteuttaminen

Johtaja tietää rakennusjärjestyksen, mutta ei kunkin osan yksityiskohtia. Se ottaa rakentaja ja kutsuu asianmukaiset menetelmät jotta:

class EmailDirector {
 constructPromotional(builder: EmailBuilder): EmailTemplate {
 return builder
 .setHeader('https://cdn.example.com/logo.png', 'MyBrand')
 .addHeroBanner('banner.jpg', 'Spring Sale')
 .addTextBlock('Hurry!', 'Offer expires in 24 hours.')
 .addProductGrid(fetchFeaturedProducts())
 .addCtaButton('Shop Now', 'https://shop.example.com')
 .setFooter('unsub link', '123 Main St')
 .addDynamicPlaceholder('first_name', 'valued customer')
 .build();
 }

 constructTransactional(builder: EmailBuilder): EmailTemplate {
 return builder
 .setHeader('logo.png', 'MyBrand')
 .addTextBlock('Order Confirmation', 'Your order #{{order_id}} has been placed.')
 .setFooter('unsub link', '123 Main St')
 .addDynamicPlaceholder('order_id', 'N/A')
 .build();
 }
}

Ohjaaja eristää rakennusalgoritmin. Kun tarvitaan uutta sähköpostityyppiä, lisätään ohjaajalle menetelmä ja mahdollisesti uusi betonirakentaja .

Vaihe 4: Rakenna lopullinen malli

Asiakaskoodi valitsee halutun rakentajan ja ohjaajan menetelmän:

const builder = new PromotionalBuilder();
const director = new EmailDirector();
const template = director.constructPromotional(builder);
// template.render(userData) or template.toHtml()

Tuloksena objekti voi olla yksinkertainen datarakenne, joka pitää joukon osia, tai se voi suoraan luoda HTML. Rakentaja decouples kokoonpanon ...mitä tahansa sisältöä.

Real-World skenaario: Hylätty ostoskori Sähköposti

Letkaits kävellä läpi konkreettisen sähköisen kaupankäynnin tapauksessa. Hylätty ostoskorin sähköpostin pitäisi sisältää:

• Asiakkaan nimi ja kiireellisyys.
• Dynaaminen luettelo jälkeen jääneistä tuotteista.
• Henkilökohtainen alennuskoodi, joka kannustaa muuntamiseen.
• CTA:n on palattava kassalle.

Luomme CartRecoveryBuilder[], joka toteuttaa []. Sen sisäinen tila voi seurata kärryn kohteita ja luotu kuponki. Ohjaaja voisi soittaa:

constructAbandonedCart(builder: EmailBuilder, cart: Cart): EmailTemplate {
 return builder
 .setHeader('logo.png', 'ShopNow')
 .addTextBlock('Did you forget something?', `Hi ${cart.customerName}, your cart is waiting.`)
 .addProductGrid(cart.items)
 .addTextBlock('Complete your order within 24 hours and save 10%!',
 `Use code: ${generateDiscountCode()}`)
 .addCtaButton('Complete Purchase', checkoutUrl(cart.id))
 .setFooter('unsubscribe', '123 St')
 .addDynamicPlaceholder('discount_code', 'SAVE10')
 .build();
}

Koska rakentaja saa kärryn tiedot vain rakennusaikaan, mallilogiikka pysyy puhtaana. Ja koska betonirakentaja hallitsee, miten kukin komponentti tekee, muuttaa visuaalista tyyliä (esim. pöytäpohjaisesta asettelusta moderniin lohkopohjaiseen suunnitteluun) vaatii muutoksia vain rakentajassa .

Edistyneet edut: Huolen ja testattavuuden erottaminen

Huolenjako

Builder-mallilla on yksi vastuu kustakin luokasta. ohjaaja[ tietää sarjan, rakentaja[ tietää, miten koota ja renderoida, ja [tuotteella[] (email-malli) on vain tietoa. Markkinointitiimit voivat määritellä uudet sähköpostityypit tarjoamalla konfiguraatio-objektin ilman kirjoituskoodia. Kehittäjät sitten toteuttavat rakentajan vastaavasti.

Testikelpoisuus

Voit tarkistaa, että tuoteruudukon lisääminen tuottaa odotetun HTML-fragmentin tai että dynaaminen paikanpidin on oikein injektoitu. Integrointitestit voivat tarkistaa, että ohjaaja rakentaa oikean sekvenssin jokaiselle kampanjatyypille. Tämä modulaarisuus vähentää merkittävästi regressioriskiä.

Uudelleenkäytettävyys

Komponentit ovat uudelleenkäytettäviä eri rakentajille. Sama alatunnisteen rakentajamenetelmä voidaan muodostaa mainos-, tapahtuma- ja uutiskirjeiden rakentajille. Brändin ohjeet (värit, fontit, vaaditut oikeudelliset linkit) ovat keskitettyjä jaetun rakentajan apuritoiminnoissa.

Integrointi markkinoinnin automaatioalustoihin

Markkinointiautomaatiojärjestelmät kuten Directus[ ... .................................................................................................................................................................................................................................

Esimerkiksi voit tallentaa saatavilla olevia otsikon kuvia, alatunnistelinkkejä ja sisältöjä Directus-kokoelmiin. A Campaign[ -kokoelma voisi viitata rakennuttajan tyyppiin (edistäminen, transaktio) ja ohittaa tietyt komponentit. Taustakoodisi lukee nämä tietueet, instantoittaa sopivan betoninrakentajan ja kutsuu ohjaajaa tuottamaan lopullisen sähköpostin. Tämä decouples sisällönhallinta mallirakenteesta, joka antaa markkinoijille autonomian sisällöstä samalla kun kehittäjät säilyttävät hallinnan renderointilogiikaation suhteen.

Tätä lähestymistapaa täydentäviä ulkoisia resursseja ovat [Smashing Magazine.