Personalization使用案例:購物車放棄電子郵件 personalization-use-case-helper-functions

在此頁面上:​遵循購物車放棄使用案例,此案例使用upperCase、each及Adobe Journey Optimizer中的協助程式功能個人化電子郵件內文。

在此範例中,您將個人化電子郵件內文。 此訊息會鎖定在購物車中保留商品,但尚未完成購買的客戶。

您將使用下列型別的協助程式函式:

  • upperCase字串函式,以大寫字母插入客戶的名字。 了解更多
  • each協助程式,列出購物車中的專案。 了解更多
  • if協助程式,在購物車中有相關產品時插入產品特定附註。 了解更多

➡️ 在此影片中瞭解如何使用協助程式函式

開始之前,請確定您知道如何設定這些元素:

請依照下列步驟操作:

步驟1:建立初始事件和相關歷程 create-context

購物車內容是歷程中的內容相關資訊。 因此,您必須先將初始事件和電子郵件新增至歷程,才能將購物車特定資訊新增至電子郵件。

  1. 建立其結構描述包含productListItems陣列的事件。

  2. 將此陣列中的所有欄位定義為此事件的裝載欄位。

    Adobe Experience Platform檔案中進一步瞭解產品清單專案資料型別。

  3. 建立從此事件開始的歷程。

  4. 將​ 電子郵件 ​活動新增至歷程。

    歷程畫布,其中包含事件和流程中的電子郵件活動

步驟2:建立電子郵件 configure-email

  1. 在​ 電子郵件 ​活動中,按一下​編輯內容,然後按一下​電子郵件Designer

    電子郵件活動包含編輯內容及電子郵件Designer選項

  2. 從電子郵件Designer首頁的左側浮動視窗,將三個結構元件拖放至訊息內文上。

  3. 將HTML內容元件拖放至每個新結構元件上。

    傳送電子郵件給Designer,內文中有三個結構元件和HTML內容元件

步驟3:以大寫字母插入客戶的名字 uppercase-function

  1. 在電子郵件Designer首頁上,按一下您想要新增客戶名字的HTML元件。

  2. 在內容工具列上,按一下​顯示原始程式碼

    包含「顯示原始程式碼」選項的內容工具列

  3. 在​ 編輯HTML ​視窗中,新增upperCase字串函式:

    1. 在左側功能表中,選取​協助程式函式

    2. 使用搜尋欄位來尋找「大寫」。

    3. 從搜尋結果中新增upperCase函式。 若要這麼做,請按一下{%= upperCase(string) %}: string旁的加號(+)。

      運算式編輯器會顯示此運算式:

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

      在Helper函式中選取upperCase函式的 運算式編輯器

  4. 從運算式中移除「字串」預留位置。

  5. 新增名字代號:

    1. 在左側功能表中,選取​設定檔屬性

    2. 選取​人員 > 全名

    3. 將​ 名字 ​權杖新增至運算式。

      運算式編輯器會顯示此運算式:

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

      運算式編輯器顯示具有設定檔名字語彙基元的大寫

      Adobe Experience Platform檔案中進一步瞭解人員名稱資料型別。

  6. 按一下​驗證,然後按一下​儲存

    使用驗證和儲存按鈕編輯HTML視窗

  7. 儲存訊息。

步驟4:從購物車插入專案清單 each-helper

此步驟示範反複處理事件資料。 如需反複處理不同資料來源(事件、自訂動作回應及其他內容資料)的完整範例,請參閱使用Handlebars反複處理內容資料

  1. 重新開啟訊息內容。

  2. 在電子郵件Designer首頁上,按一下您要列出購物車內容的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 > 事件 > 事件名稱,然後展開​ productListItems ​節點。

      在此範例中,event_name​代表事件的名稱。

    4. 將​ Product ​權杖新增至運算式。

      運算式編輯器會顯示此運算式:

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

      在此範例中,event_ID​代表您事件的識別碼。

      在內容屬性中有productListItems的 運算式編輯器

    5. 修改運算式:

      1. 移除「.product」字串。
      2. 將「變數」預留位置取代為「產品」。

      此範例顯示修改後的運算式:

      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. 從先前的搜尋結果中,將​ Name ​權杖新增至運算式。

    重複這些步驟兩次:

    • 將預留位置「#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. 在電子郵件Designer首頁上,按一下您要插入附註的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%}
      

      具有if協助程式範本 🔗 的運算式編輯器

  4. 從運算式移除此條件:

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

    此範例顯示修改後的運算式:

    code language-handlebars
    {%#if condition1%} render_1
       {%else%} default_render
    {%/if%}
    
  5. 將產品名稱Token新增至條件:

    1. 從運算式中移除「condition1」預留位置。

    2. 在左側功能表中,選取​內容屬性

    3. 選取​Journey Orchestration > 事件 > 事件名稱,然後展開​ productListItems ​節點。

      在此範例中,event_name​代表事件的名稱。

    4. 將​ Name ​權杖新增至運算式。

      運算式編輯器會顯示此運算式:

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

      在if條件中有productListItems名稱權杖的 運算式編輯器

  6. 修改運算式:

    1. 在運算式編輯器中,在name Token後面指定產品名稱。

      使用此語法,其中​ 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. 按一下​驗證,然後按一下​儲存

    設定if區塊後 使用「驗證並儲存」編輯HTML視窗

  8. 儲存訊息。

步驟6:測試並發佈歷程 test-and-publish

  1. 開啟​ 測試 ​切換,然後按一下​觸發事件

    開啟測試切換並觸發事件按鈕

  2. 在​ 事件組態 ​視窗中輸入輸入值,然後按一下​傳送

    測試模式僅適用於測試設定檔。

    具有輸入值和傳送按鈕的事件設定視窗

    電子郵件會傳送至測試設定檔的地址。

    在此範例中,電子郵件會包含有關Juno Jacket的備註,因為此產品已在購物車中:

    在郵件內文中顯示Juno Jacket送貨備註的電子郵件範例

  3. 確認沒有錯誤,然後發佈歷程。

Handlebars函式 handlebars

使用案例 use-case

作法影片 video

瞭解如何使用協助程式函式。

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page walks through a cart abandonment email use case using three helper functions — upperCase, each, and if — to display a customer’s first name in capitals, list cart items, and insert a product-specific shipping note conditionally.

Intents:

  • Create a journey event whose schema includes the productListItems array
  • Insert a customer’s first name in uppercase using {%= upperCase(profile.person.name.firstName) %}
  • List cart items by iterating over context.journey.events.event_ID.productListItems with {{#each}}
  • Display a product-specific note conditionally using {%#if context.journey.events.\event_ID`.productListItems.name = “product_name” %}`
  • Test the journey in test mode using a test profile with event payload, then publish

Glossary:

  • upperCase: A PQL string function that converts a string to uppercase; called with {%= upperCase(string) %}. (product-specific)
  • each helper: A Handlebars block helper ({{#each array as |alias|}} ... {{/each}}) that iterates over an array such as productListItems. (product-specific)
  • if helper: A conditional block helper ({%#if condition%} ... {%else%} ... {%/if%}) that renders content only when the specified condition is true.
  • productListItems: A standard XDM array representing cart contents, with fields including name, quantity, and priceTotal. (product-specific)
  • Test mode: A journey feature that enables sending test messages to test profile addresses to verify journey and message behavior before publication. (product-specific)

Guardrails:

  • Contextual attributes (including journey event data) are available in the personalization editor only after the message has been placed inside a journey that includes the relevant event.
  • Test mode works only with test profiles.

Terminology:

  • Canonical name: cart abandonment email — variants: cart abandonment use case
  • Do not confuse: context.journey.events.event_ID.productListItems (event-sourced array, accessed via Contextual attributes) ≠ profile.* attributes (profile-sourced, always available)

FAQ:

  • Q: What helper functions are used in this use case? — Three: upperCase (renders first name in capitals), each (iterates over the cart items array), and if (conditionally displays a product-specific shipping note).
  • Q: Where does the cart item data come from in the personalization expression? — From the journey event’s productListItems array, accessed via Contextual attributes at context.journey.events.event_ID.productListItems.
  • Q: Can contextual attributes be used before placing the message inside a journey? — No. Contextual attributes are available in the personalization editor only after the message is placed inside a journey that includes the relevant event.
  • Q: How do I test the email with cart data? — Turn on the Test toggle in the journey, click Trigger an event, and enter the input values in the Event configuration window, then click Send. The email is sent to the test profile’s address.
recommendation-more-help
journey-optimizer-help