ビルダーパターンを使用して、マーケティングオートメーションで動的メールテンプレートを作成する

メールテンプレートのコンテキストでは、メールの最終HTMLまたはJSON表現です。ビルダーは、ヘッダ、ボディブロック、フッター、およびダイナミックプレースホルダーなどのコンポーネントを組み立てます。構造ロジックが分離されているため、既存のコードを変更することなく新しいメールタイプを導入できます。この規律は、システムをよりモジュール的にテストしやすくします。

動的メールテンプレートのコアコンポーネント

ビルダーパターンを適用する前に、ほとんどのマーケティングメール共有のビルディングブロックを理解するのに役立ちます。

• []Header] - ロゴ、会社名、オプションのヘッダーイメージ、および先頭のテキスト。
• []Body Section] - 英雄のバナー、テキストブロック、製品グリッド、証言、カウントダウンタイマー、またはカスタムコンテンツモジュール。
• [コールツーアクション(CTA)[ – 受信者を目的とする行動に誘導するボタンまたはリンク。
• [Footer] - リンク、物理的なアドレス、ソーシャルメディアのアイコン、およびプライバシーポリシーを購読解除します。
• ]ダイナミックプレースホルダー[ – {%の未加工%}] {%の%の%の%}、、[]] - 送信時にユーザーごとにポップアップします。

各コンポーネントはキャンペーンタイプによって異なる場合があります。プロモーションメールには、複数の製品ブロックとカウントダウンタイマーが含まれている場合があります。パスワードリセットメールは、スパールとトランザクションになります。Builder Patternは、このバリビリティをエレガントに処理します。

ビルダーパターンをメールテンプレートに適用

ステップ1: Builderインターフェイスを定義する

インターフェイスは、あなたが含める可能性のあるすべてのコンポーネントのメソッドを宣言します。 ここでは、TypeScript のような擬似コードのインターフェイスです。

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:コンクリートビルダーを作成する

各コンクリートビルダーは、インターフェイスを実装し、特定のタイプの電子メールを構築します。 たとえば:

• [PromotionalBuilder] - 製品のグリッド、期間限定オファー、カウントダウンタイマーを追加します。
• []TransactionalBuilder] - 注文の詳細、ステータスアラート、およびマーケティングの気晴らしさで最小限のテンプレートを生成します。
• []ニュースレタービルダー] – 編集コンテンツの複数のセクションレイアウトを作成します。

コンクリートビルダーは、組み立てられたコンポーネントを内部製品オブジェクトに保存します。 デフォルト値やブランドガイドラインも適用できます。

ステップ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()

その結果 オブジェクトは、セクションの配列を保持する単純なデータ構造であり、直接 HTML を生成することができます。ビルダーは、コンテンツの「もの」からアセンブリの「方法」をデカップリングします。

リアルワールドシナリオ: 放棄されたカートの電子メール

具体的なeコマースケースを歩くしましょう。 放棄されたカートメールには以下が含まれます。

• 顧客名と緊急感
• 左の商品がダイナミックなリストです。
• 変換を促す個人割引コードです。
• チェックアウトに戻るには、CTA をクリアします。

を実装する [[]]CartRecoveryBuilder] を作成します。内部状態は、カートのアイテムと生成されたクーポンを追跡する可能性があります。 取締役は、次の呼び出しを行うことができます。

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

ビルダーは、建設時にのみカートデータを受信しているため、テンプレートロジックはクリーンにとどまります。そして、コンクリートビルダーは各コンポーネントのレンダーを制御し、ビジュアルスタイルを変更します(例えば、テーブルベースのレイアウトから現代的なブロックベースのデザインまで)、ビルダーでのみ変更を必要としています。

高度な利点:懸念と試験可能性の分離

懸念の分離

Builder Pattern は、各クラスの単一の責任を強制します。 director] は、シーケンスを知っています。 builder は、集合してレンダリングする方法を知っています。 product (メールテンプレート) は、データのみを保持します。 マーケティングチームは、コードを書くことなく、設定オブジェクトを提供することで、新しいメールタイプを定義できます。 開発者は、それに応じてビルドします。

試験可能性

各ビルダーメソッドは、単独でテストできます。製品グリッドを追加すると、期待されるHTMLフラグメントが生成されるか、動的プレースホルダーが正しく注入されるかを確認することができます。インテグレーションテストでは、各キャンペーンタイプで正しいシーケンスを構築しているかを確認することができます。このモジュール性は、回帰リスクを大幅に低減します。

再利用可能な

コンポーネントは、ビルダー間で再利用可能なものです。同じフッタービルダーメソッドは、プロモーション、トランザクション、ニュースレタービルダーに構成できます。ブランドガイドライン(色、フォント、必要な法的リンク)は、共有ビルダーヘルパー関数で一元化されます。

マーケティングオートメーションプラットフォームとの統合

マーケティング自動化システム()Directus[] - ヘッドレスCMSとコンテンツ管理フレームワーク - このパターンを実装するための優れた環境を提供します。 DirectusのAPIファーストアーキテクチャを使用すると、テンプレートの設定、コンポーネントコンテンツブロック、およびユーザーデータを構造化されたコレクションとして保存することができます。 アプリケーションは、バックエンド(例えば、Node.jsまたはPHPサービス)でBuilder Patternを使用して、SMT APIまたはSMTPプロバイダを介して送信する前に、最終的なEメールペイロードを構築することができます。

例えば、利用可能なヘッダー画像、フッターリンク、コンテンツスニペットを直接収集する場合があります。 []Campaign]コレクションは、ビルダータイプ(プロモーション、トランザクション)を参照し、特定のコンポーネントをオーバーライドすることができます。 あなたのバックエンドコードは、これらのレコードを読み取り、適切なコンクリートビルダーをインスタンス化し、ディレクターに最終的な電子メールを生成します。 このデカップリングは、テンプレート構造からコンテンツ管理を分離し、開発者が自動レンダリングをコントロールしながら、コンテンツ管理を自動化します。

このアプローチを補完する外部リソースには、]]が含まれています。 雑誌のガイドを動的メールテンプレート]と[]]]])のトランザクションメールのベストプラクティス。

コンテンツ

Builder Patternは、マーケティングオートメーションで動的メールテンプレートを作成するための強力なツールです。 構造を表現から分離することにより、従来のコードをリファクタリングすることなく、チームを柔軟に導入することができます。 具体的なビルダーは、詳細を分離し、ディレクターは明確な構造アルゴリズムを提供し、結果コードはよりテスト可能で、保守可能でスケーラブルです。 オーダーメイドのプラットフォームを構築しているか、DirectusのようなヘッドレスなCMSを拡張しているかにかかわらず、このパターンを採用すると、メールワークフローを合理化し、よりパーソナライズされたコミュニケーションを促進します。