チュートリアル: カスタム メッセージ テンプレートの作成

概要

EXM を使用してメール キャンペーン用のカスタム メッセージ テンプレートを作成する方法。

コンテンツ エディターでは、Email Experience Manager (EXM) のメール キャンペーンに使用できるカスタム メッセージ テンプレートを作成できます。これらのメッセージ テンプレートは、Sitecore の通常のアイテム テンプレートとは異なります。カスタム メッセージ テンプレートを作成するには、ブランチ テンプレート、メッセージ テンプレート、レイアウト、およびビューを作成し、これらをバインドして、EXM で使用できるようにします。

注記

このチュートリアルでは、HTML の例で説明します。メッセージ テンプレートの作成を開始する前に、最終的なカスタム テンプレートのレイアウトに使用する HTML コードが必要です。カスタム テンプレートに何を含めるかについては、標準の EXM メール メッセージ テンプレートを参照してください。

このチュートリアルでは、次の方法について説明します。

カスタム メッセージ テンプレートを作成するには、ブランチ テンプレートが必要です。これらは、既存の EXM メッセージ テンプレートに基づくことができます。カスタム メッセージ テンプレートは、ブランチ データに基づき、これはブランチ テンプレート定義アイテムと $name アイテムで構成されます。

既存の EXM メッセージ テンプレートからブランチ テンプレートを作成するには:

  1. コンテンツ エディターを開き、/sitecore/templates/Branches/System/Email/Messages に移動します。[オプション] ウィンドウで [新しいブランチ] をクリックします。

    [新しいブランチ] ボタンを使用して、新しいブランチを作成します。
  2. メール キャンペーンが AB テスト可能であることを確認するには、開いた [新しいブランチを作成する] ダイアログ ボックスで、システム/メール/メッセージに移動して、[AB テストのメッセージ] をクリックし、[作成] をクリックします。

    [新しいブランチを作成する] ウィンドウで、[AB テストのメッセージ] を選択します。
  3. ブランチの名前を変更します。これを行うには、右クリックして [名前の変更] を選択するか、F2 キーを押します。次の例では、Simple Email という名前を付けました。

  4. ブランチの [コンテンツ] タブで、[アピアランス] タブに移動し、サイズが 180x249 ピクセルの新しいサムネイルをアップロードします。サムネイルは、ユーザーが EXM で新しいメール キャンペーンを作成するときに、メッセージ テンプレートに使用されます。また、[コンテンツ] タブで、[ヘルプ] セクションまでスクロールして、[長い説明] を追加します。長い説明は、ユーザーがテンプレートを使用して新しいメッセージを作成するときにサムネイルの下に表示されるテキストです。

    注記

    サムネイルと説明に関するこれらのオプションが [コンテンツ] タブに表示されない場合は、上部のナビゲーション バーの [表示] タブで、[スタンダード フィールド] チェック ボックスをオンにします。

  5. メッセージ テンプレートをコンテンツ レイアウトにバインドするには、$name アイテムの下にメッセージ ルートを挿入する必要があります。$name アイテムを右クリックして、[挿入] > [テンプレートから挿入] をクリックします。

  6. [テンプレートから挿入] ダイアログ ボックスで、/Templates/System/Email/Messages/Inner Content/Message Root に移動し、[アイテム名] フィールドに名前を入力します。たとえば、Message root と入力して、[挿入] をクリックします。

  7. メッセージ ルートを $name アイテムに接続するには、$name アイテムをクリックして、[Message] セクションの [Body] フィールドで、ドロップダウン矢印をクリックして、message root に移動します。

新しいブランチ テンプレートは次のようになります。

$name、メッセージ ルート、コンテンツ ファイルを含む、ブランチ テンプレートの外観の画像。

新しいテンプレートを作成して、デフォルトのメッセージ コンテンツとして使用する標準値 (たとえば、ヘッダーとフッターのテキスト) を指定します。

メッセージ データ テンプレートを作成するには:

  1. コンテンツ エディターで、sitecore/Templates/System/Email/Messages/Inner Content に移動します。

  2. [フォルダー] タブで、[オプション] の [新しいテンプレート] をクリックします。開いた [名前を選択] ウィンドウで、テンプレートに名前を付けて、[次へ] をクリックします。

    [名前を選択] ウィンドウで、テンプレートの名前を入力します。
  3. 新しいテンプレートについて、[ビルダー] タブの [新しいセクションを追加] フィールドに、関連するデータ テンプレート フィールド、たとえば、ヘッダー テキストとフッター テキストを追加します。

    [ビルダー] タブで、関連するテンプレート フィールドを追加します。
  4. 変更を保存します。

  5. ツリー ナビゲーションで、カスタム テンプレートの [Message Root] に移動し、Content 子アイテムを作成します。これで、メール メッセージにコンテンツを追加できるようになりました。

レイアウトの場合、Sitecore は ASP.NET MVC フレームワークを使用します。詳細については、「MVC とレンダリング」を参照してください。

MVC を使用してメッセージ テンプレートのレイアウトを作成するには:

  1. コンピューターで、\sitecore modules\Web\EXM\layouts に移動し、以下の内容の <Your custom template>.cshtml ファイルを作成します。

    @using Sitecore.Mvc 
    @using Sitecore.Mvc.Presentation   
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
    @Html.Sitecore().Placeholder("msg-html-title")  
    </head>  
    
    <body class="em_body" style="margin: 0px auto; padding: 0px;" bgcolor="#ffffff">
    @Html.Sitecore().Placeholder("msg-html-body") 
    </body> 
    </html> 
  2. Sitecore のコンテンツ エディターで、/sitecore/Layout/Layouts/System/Email/ に移動します。[フォルダー] タブの [オプション] > [レイアウト] で、レイアウトの新しい名前を入力します。たとえば、Simple Email Layout と入力して、[OK] をクリックします。

    [フォルダー] タブで、レイアウトの名前を入力します。
  3. コンテンツ ツリーで新しいレイアウトを選択し、[コンテンツ] タブ の [データ] セクションで、[パス] フィールドをクリックし、レイアウト ファイルが保存されている場所、たとえば、/sitecore modules/Web/EXM/Layouts/SimpleEmailLayout.cshtml に移動します。

  4. コンピューターで、\Views に移動し、以下の内容の <Your custom template>.cshtml ファイルをもう 1 つ作成します。

    @using Sitecore.Mvc.Presentation
    @using Sitecore.Mvc
    @model RenderingModel
    
    <h1>@Html.Sitecore().Field("Header", Model.Item)</h1>
    
    @Html.Sitecore().Field("Body", Model.Item)
  5. Sitecore のコンテンツ エディターで、/sitecore/layout/Renderings/System/Email に移動します。[フォルダー] タブの [オプション] で、[ビュー レンダリング] をクリックして、テンプレート用の新しいビュー レンダリングを作成します。[パス] を ~/Views/<Your custom template>.cshtml に設定します。

レイアウトとビューをメッセージ テンプレートにバインドするには:

  1. 作成したブランチ テンプレートのメッセージ ルート、たとえば、/sitecore/Templates/Branches/System/Email/Messages/<YourCustomTemplate>/Name/Message root に移動します。

  2. リボンの [プレゼンテーション] タブの [レイアウト] グループで、[詳細] をクリックします。

  3. [レイアウト詳細] ダイアログ ボックスで、[デフォルト] デバイスについて、[編集] をクリックします。

    [レイアウト詳細] で、デフォルト デバイスの設定を編集します。
  4. [デバイス エディター] ダイアログ ボックスで、[レイアウト] タブのドロップダウン メニューをクリックし、作成したレイアウトに移動します。この例では、Simple Email Layout を作成しました。

    [デバイス エディター] で、[レイアウト] タブのドロップダウン メニューで、作成したレイアウトを選択します。
  5. [コントロール] の [追加] をクリックし、[レンダリング] > [システム] > [メール] に移動します。カスタム テンプレートのメニューを展開します。MVC コード スニペットの内容をプレースホルダーにマッピングする必要があります。少なくとも、以下のコントロールを追加してマッピングします。

    • Set Page Title - [プレースホルダーに追加] で、これを msg-html-title にマッピングします。

    • <YourCustomTeplate> コンテンツ - [プレースホルダーに追加] で、これを msg-html-body にマッピングします。[データ ソース] で、カスタム テンプレートのメッセージ ルートのパスを /sitecore/Templates/Branches/System/Email/Messages/<YourCustomTemplate>/Name/Message root/<Your Content> と入力します。

    [デバイス エディター] で、コントロールを MVC コードにマッピングします。
  6. [コントロールのプロパティ] で、[キャッシュ] セクションで、以下のチェック ボックスをオンにします。

    • Cacheable

    • Vary by Data

    • Vary by Parameters

    • Vary by Query String

  7. [OK] をクリックします。

EXM でユーザーがテンプレートを使用できるようにするには:

  1. コンテンツ エディターで、sitecore/Content/Email/Message Types に移動します。

  2. 新しいメッセージ テンプレートを追加するメッセージ タイプを展開し、[Default] アイテムをクリックします。

  3. [設定] タブで、[挿入オプション] グループの [割り当て] をクリックします。

  4. [挿入オプション] ダイアログ ボックスで、メッセージ テンプレート、たとえば、/テンプレート/ブランチ/システム/メール/メッセージ/Simple Email に移動し、カスタム テンプレートを見つけて、[選択済み] ペインに追加します。

  5. [OK] をクリックして変更を保存します。

EXM で、ユーザーが新しいメッセージを作成するときに、テンプレートのリストからメッセージ テンプレートを選択できるようになりました。ブランチ テンプレートの作成時にサムネイルをアップロードし、長い説明を追加した場合、これらはテンプレートとともに表示されます。次の例では、Simple Email テンプレートを作成しました。

新しいカスタム テンプレートを含む、テンプレートの表示例。