Χρησιμοποιώντας το μοτίβο Builder για να δημιουργήσετε δυναμικά πρότυπα ηλεκτρονικού ταχυδρομείου στην Αυτοματοποίηση Marketing

Στο πλαίσιο των προτύπων ηλεκτρονικού ταχυδρομείου, το «προϊόν» είναι η τελική HTML ή JSON αναπαράσταση ενός ηλεκτρονικού ταχυδρομείου. Ο κατασκευαστής συγκεντρώνει συστατικά όπως κεφαλίδες, body blocks, υποσέλιδα, και δυναμική τοποθέτες. Επειδή η λογική κατασκευής είναι απομονωμένη, μπορείτε να εισάγετε νέους τύπους ηλεκτρονικού ταχυδρομείου χωρίς να τροποποιήσετε τον υπάρχοντα κώδικα.

Βασικά συστατικά ενός δυναμικού προτύπου ηλεκτρονικού ταχυδρομείου

Πριν από την εφαρμογή του μοτίβου Builder, βοηθά στην κατανόηση των δομικών μπλοκ που τα περισσότερα μηνύματα ηλεκτρονικού ταχυδρομείου μάρκετινγκ μοιράζονται:

• Header ⁇ Logo, όνομα εταιρείας, προαιρετική εικόνα κεφαλίδας, και προεπικεφαλής κείμενο.
• Τομές σώματος ⁇ Ηρωικά πανό, μπλοκ κειμένου, πλέγματα προϊόντων, μαρτυρίες, χρονόμετρα αντίστροφης μέτρησης, ή προσαρμοσμένες ενότητες περιεχομένου.
• Call-to-action (CTA) ⁇ Κουμπιά ή συνδέσεις που οδηγούν τον παραλήπτη προς μια επιθυμητή δράση.
• Πρωτότυπο ⁇ Διαγραφή συνδέσμου, φυσικής διεύθυνσης, εικονιδίων κοινωνικών μέσων και πολιτικής απορρήτου.
• Δυναμικοί κάτοχοι χώρων ⁇ {% ακατέργαστο %} {% endraw %}, , ⁇ κατοικούνται ανά χρήστη κατά την αποστολή.

Ένα διαφημιστικό email μπορεί να περιλαμβάνει πολλαπλά μπλοκ προϊόντων και ένα χρονόμετρο αντίστροφης μέτρησης. Ένα email με κωδικό πρόσβασης θα είναι αραιό και συναλλακτικό. Το μοτίβο Builder χειρίζεται αυτή τη μεταβλητότητα κομψά.

Εφαρμογή του μοτίβου κατασκευής σε πρότυπα ηλεκτρονικού ταχυδρομείου

Βήμα 1: Καθορίστε τη διεπαφή του κατασκευαστή

Η διεπαφή δηλώνει μεθόδους για κάθε συστατικό που μπορεί να συμπεριλάβετε. Εδώ είναι μια διεπαφή στον ψευδοκωδικό τύπουScript:

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;
}

Σημειώστε ότι κάθε μέθοδος επιστρέφει ⁇ αυτή υποστηρίζει την αλυσιδωτή μέθοδο, καθιστώντας τον κωδικό πελάτη συνοπτικό.

Βήμα 2: Δημιουργία Κατασκευαστών Σκυροδέματος

Κάθε κατασκευαστής σκυροδέματος υλοποιεί τη διασύνδεση και κατασκευάζει ένα συγκεκριμένο τύπο ηλεκτρονικού ταχυδρομείου. Για παράδειγμα:

• Προωθητικό Χτισμένο ⁇ Προσθέτει πλέγματα προϊόντων, προσφορές περιορισμένου χρόνου, χρονομετρητές αντίστροφης μέτρησης.
• Συναλλακτική κατασκευή[ ⁇ Παράγει ελάχιστα πρότυπα με λεπτομέρειες παραγγελίας, ειδοποιήσεις κατάστασης, και χωρίς περισπασμούς μάρκετινγκ.
• NewsletterBuilder ⁇ Δημιουργεί πολυ-ενότητες για συντακτικό περιεχόμενο.

Οι κατασκευαστές σκυροδέματος αποθηκεύουν τα συναρμολογημένα εξαρτήματα σε ένα εσωτερικό αντικείμενο προϊόντος. Μπορούν επίσης να εφαρμόσουν προκαθορισμένες τιμές ή οδηγίες για το εμπορικό σήμα.

Βήμα 3: Εφαρμογή του διευθυντή

Ο Διευθυντής γνωρίζει την ακολουθία της κατασκευής αλλά όχι τις λεπτομέρειες κάθε τμήματος.

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();
 }
}

Όταν χρειάζεται ένας νέος τύπος ηλεκτρονικού ταχυδρομείου, προσθέτετε μια μέθοδο στο διευθυντή και ενδεχομένως έναν νέο κατασκευαστή σκυροδέματος ⁇ δεν αλλάζει κανένας άλλος κώδικας.

Βήμα 4: Κατασκευή του τελικού προτύπου

Ο κώδικας πελάτη επιλέγει την επιθυμητή μέθοδο κατασκευής και διευθυντή:

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

Το αποτέλεσμα [[LFT:7] αντικείμενο μπορεί να είναι μια απλή δομή δεδομένων που κατέχει μια σειρά τμημάτων, ή θα μπορούσε να δημιουργήσει άμεσα HTML. Ο κατασκευαστής αποσυνδέει το «πώς» της συναρμολόγησης από το «τι» του περιεχομένου.

Πραγματικό-World Σενάριο: Εγκαταλελειμένο Καλάθι Email

Ας περπατήσουμε μέσα από μια συγκεκριμένη περίπτωση ηλεκτρονικού εμπορίου. Ένα εγκαταλελειμμένο ηλεκτρονικό ταχυδρομείο καρτ θα πρέπει να περιέχει:

• Όνομα πελάτη και αίσθηση του επείγοντος.
• Μια δυναμική λίστα των προϊόντων που έχουν μείνει πίσω.
• Ένας προσωπικός κωδικός έκπτωσης για να ενθαρρύνει τη μετατροπή.
• Ένας καθαρός CTA για να επιστρέψει στο checkout.

Δημιουργούμε ένα CartRecoveryBuilder[[LPT:1]] που υλοποιεί [[LFT:8]]. Η εσωτερική του κατάσταση μπορεί να παρακολουθεί τα αντικείμενα του καλαθιού και ένα παραγόμενο κουπόνι. Ο σκηνοθέτης θα μπορούσε να καλέσει:

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();
}