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

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

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

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

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

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

請依照下列步驟操作:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. 新增名字代號:

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

    2. 選取​ 人員 > 全名

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

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

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

      AdobeExperience Plaform檔案中進一步瞭解人員名稱資料型別。

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

  7. 儲存訊息。

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

  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 ​代表您事件的識別碼。

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

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

  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. 按一下​ 驗證,然後按一下​ 儲存

  8. 儲存訊息。

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

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

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

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

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

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

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

相關主題 related-topics

Handlebars函式 handlebars

使用案例 use-case

操作說明影片 video

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

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