パーソナライゼーションのユースケース:買い物かごの放棄メール personalization-use-case-helper-functions

この例では、メールメッセージの本文をパーソナライズします。このメッセージは、買い物かごに商品が残っているが購入を完了していない顧客をターゲットにします。

次のタイプのヘルパー関数を使用します。

  • upperCase 文字列関数:顧客の名を大文字で挿入します。詳細情報
  • each ヘルパー:買い物かごに入っている商品をリストします。詳細情報
  • ifヘルパー:関連製品が買い物かごに入っている場合に製品固有のメモを挿入します。詳細情報

➡️ ヘルパー関数の使用方法については、このビデオをご覧ください

開始する前に、次の要素の設定方法を理解しておく必要があります。

次の手順に従います。

手順 1:最初のイベントと関連ジャーニーの作成 create-context

買い物かごの内容は、ジャーニーからのコンテキスト情報です。したがって、買い物かご固有の情報をメールに追加する前に、最初のイベントとメールをジャーニーに追加する必要があります。

  1. スキーマに productListItems 配列が含まれるイベントを作成します。

  2. この配列のすべてのフィールドを、このイベントのペイロードフィールドとして定義します。

    製品リスト項目のデータタイプについて詳しくは、Adobe Experience Platform のドキュメントを参照してください。

  3. このイベントで開始されるジャーニーを作成します。

  4. ジャーニーに​ メール ​アクティビティを追加します。

手順 2: メールの作成 configure-email

  1. メール ​アクティビティで、「コンテンツを編集」をクリックしたあと、「E メールデザイナー」をクリックします。

  2. E メールデザイナーホームページの左側のパレットから、3 つの構造コンポーネントをメッセージの本文にドラッグ&ドロップします。

  3. HTML コンテンツコンポーネントを、それぞれの新規構造コンポーネントにドラッグ&ドロップします。

手順 3: 顧客の名(大文字)の挿入 uppercase-function

  1. E メールデザイナーのホームページで、顧客の名を追加する HTML コンポーネントをクリックします。

  2. コンテキストツールバーで、「ソースコードを表示」をクリックします。

  3. HTML を編集 ​ウィンドウで、upperCase 文字列関数を追加します。

    1. 左側のメニューで、「ヘルパー関数」を選択します。

    2. 検索フィールドを使用して、「uppercase」を検索します。

    3. 検索結果から、upperCase 関数を追加します。それには、{%= upperCase(string) %}: string の横のプラス記号(+)をクリックします。

      式エディターには、次の式が表示されます。

      code language-handlebars
      {%= upperCase(string) %}
      

  4. 式から「string」プレースホルダーを削除します。

  5. 名トークンを追加します。

    1. 左側のメニューで、「プロファイル属性」を選択します。

    2. ユーザー姓名 ​を選択します。

    3. 式に​ ​トークンを追加します。

      式エディターには、次の式が表示されます。

      code language-handlebars
      {%= upperCase(profile.person.name.firstName) %}
      

      ユーザー名データタイプについて詳しくは、Adobe Experience Platform のドキュメントを参照してください。

  6. 検証」をクリックしてから、「保存」をクリックします。

  7. メッセージを保存します。

手順 4:買い物かご内の商品リストの挿入 each-helper

  1. メッセージコンテンツを再度開きます。

  2. E メールデザイナーのホームページで、買い物かごの内容を一覧表示する HTML コンポーネントをクリックします。

  3. コンテキストツールバーで、「ソースコードを表示」をクリックします。

  4. HTML を編集 ​ウィンドウで、each ヘルパーを追加します。

    1. 左側のメニューで、「ヘルパー関数」を選択します。

    2. 検索フィールドを使用して、「each」を検索します。

    3. 検索結果から、each ヘルパーを追加します。

      式エディターには、次の式が表示されます。

      code language-handlebars
      {{#each someArray as |variable|}} {{/each}}
      

  5. 式に productListItems 配列を追加します。

    1. 式から「someArray」プレースホルダーを削除します。

    2. 左側のメニューで、「コンテキスト属性」を選択します。

      コンテキスト属性 ​は、ジャーニーコンテキストがメッセージに渡された後でのみ使用できます。

    3. Journey Optimizerイベントevent_name を選択し、productListItems ノードを展開します。

      この例では、event_name はイベントの名前を表します。

    4. 式に​ 製品 ​トークンを追加します。

      式エディターには、次の式が表示されます。

      code language-handlebars
      {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}
      

      この例では、event_ID はイベントの ID を表します。

    5. 式を次のように変更します。

      1. 「.product」文字列を削除します。
      2. 「variable」プレースホルダーを「product」に置き換えます。

      次の例は、変更された式を示しています。

      code language-handlebars
      {{#each context.journey.events.event_ID.productListItems as |product|}}
      
  6. 次のコードを、{{#each}} 開始タグと {/each}} 終了タグの間に貼り付けます。

    code language-html
    <table>
       <tbody>
          <tr>
             <td><b>#name</b></td>
             <td><b>#quantity</b></td>
             <td><b>$#priceTotal</b></td>
          </tr>
       </tbody>
    </table>
    
  7. 商品名、数量および価格のパーソナライゼーショントークンを追加します。

    1. HTML テーブルからプレースホルダー「#name」を削除します。
    2. 前の検索結果から、名前 ​トークンを式に追加します。

    次の手順を 2 回繰り返します。

    • プレースホルダー「#quantity」を​ 数量 ​トークンに置き換えます。
    • プレースホルダー「#priceTotal」を​ 合計価格 ​トークンに置き換えます。

    次の例は、変更された式を示しています。

    code language-handlebars
    {{#each context.journey.events.event_ID.productListItems as |product|}}
       <table>
          <tbody>
             <tr>
             <td><b>{{product.name}}</b></td>
             <td><b>{{product.quantity}}</b></td>
             <td><b>${{product.priceTotal}}</b></td>
             </tr>
          </tbody>
       </table>
    {{/each}}
    
  8. 検証」をクリックしてから、「保存」をクリックします。

手順 5:製品固有のメモの挿入 if-helper

  1. E メールデザイナーのホームページで、メモを挿入する HTML コンポーネントをクリックします。

  2. コンテキストツールバーで、「ソースコードを表示」をクリックします。

  3. HTML を編集 ​ウィンドウで、if ヘルパーを追加します。

    1. 左側のメニューで、「ヘルパー関数」を選択します。

    2. 検索フィールドを使用して、「if」を検索します。

    3. 検索結果から、if ヘルパーを追加します。

      式エディターには、次の式が表示されます。

      code language-handlebars
      {%#if condition1%} render_1
         {%else if condition2%} render_2
         {%else%} default_render
      {%/if%}
      

  4. 式から次の条件を削除します。

    code language-handlebars
    {%else if condition2%} render_2
    

    次の例は、変更された式を示しています。

    code language-handlebars
    {%#if condition1%} render_1
       {%else%} default_render
    {%/if%}
    
  5. 製品名トークンを条件に追加します。

    1. 式から「condition1」プレースホルダーを削除します。

    2. 左側のメニューで、「コンテキスト属性」を選択します。

    3. Journey Orchestrationイベントevent_name を選択し、productListItems ノードを展開します。

      この例では、event_name はイベントの名前を表します。

    4. 式に​ 名前 ​トークンを追加します。

      式エディターには、次の式が表示されます。

      code language-handlebars
      {%#if context.journey.events.`event_ID`.productListItems.name%}
         render_1
         {%else%} default_render
      {%/if%}
      

  6. 式を次のように変更します。

    1. 式エディターで、name トークンの後に製品名を指定します。

      次の構文を使用します。ここで、product_name は製品の名前を表します。

      code language-javascript
      = "product_name"
      

      この例では、製品名は「Juno Jacket」です。

      code language-handlebars
      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
         render_1
         {%else%} default_render
      {%/if%}
      
    2. 「render_1」プレースホルダーをメモのテキストに置き換えます。

      例:

      code language-handlebars
      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
         Due to longer than usual lead times on the Juno Jacket, please expect item to ship two weeks after purchase.
         {%else%} default_render
      {%/if%}
      
    3. 式から「default_render」プレースホルダーを削除します。

  7. 検証」をクリックしてから、「保存」をクリックします。

  8. メッセージを保存します。

手順 6:ジャーニーのテストと公開 test-and-publish

  1. テスト」トグルをオンにしてから、「イベントをトリガー」をクリックします。

  2. イベント設定 ​ウィンドウで、入力値を入力し、「送信」をクリックします。

    テストモードは、テストプロファイルでのみ機能します。

    メールがテストプロファイルのアドレスに送信されます。

    この例では、Juno Jacket に関するメモがメールに含まれています。これは、この製品が買い物かごに入っているからです。

  3. エラーがないことを確認し、ジャーニーを公開します。

Handlebars 関数 handlebars

ユースケース use-case

チュートリアルビデオ video

ヘルパー関数の使用方法を説明します。

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76