文件 Journey Optimizer Journey Optimizer 指南

在程式碼型體驗中使用可編輯的表單欄位 code-based-form-fields

Last update: Sat Sep 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
基於程式碼的體驗

建立對象：

經驗豐富
使用者

為了更靈活地控制程式碼型體驗，Journey Optimizer可讓您的開發團隊建立包含特定預先定義可編輯欄位的JSON或HTML內容範本。

建立程式碼型體驗時，非技術行銷人員可直接在介面中編輯這些欄位，而不需要開啟個人化編輯器，或觸控其歷程或行銷活動中的任何其他程式碼元素。

此功能為行銷使用者提供簡化的體驗，同時讓開發人員更能掌控程式碼內容，減少錯誤的空間。

瞭解表單欄位語法 form-field-syntax

若要讓HTML或JSON程式碼裝載的部分可編輯，您必須在運算式編輯器中使用特定語法。這涉及宣告具有預設值的變數，使用者在將內容範本套用至其程式碼型體驗後，可覆寫該預設值。

例如，假設您要建立內容範本，以將其套用至程式碼型體驗，並允許使用者自訂用於不同位置的特定顏色，例如框架或按鈕的背景顏色。

建立內容範本時，您必須宣告具有 唯一識別碼 的變數（例如"color"），並在內容中想要套用此顏色的位置呼叫它。

將內容範本套用至其內容時，使用者將可自訂在任何參考變數的位置所使用的顏色。

將可編輯的欄位新增到 HTML 或 JSON 內容範本 add-editable-fields

若要讓您的一些JSON或HTML程式碼可編輯，請先建立程式碼型體驗內容範本，您可以在其中定義特定表單欄位。

NOTE

此步驟通常由開發人員角色執行。

➡️ 在此影片中瞭解如何新增可編輯的欄位到程式碼型體驗範本

建立內容範本並選取 程式碼型體驗 管道。瞭解如何建立範本

選取編寫模式：HTML或JSON。

note caution
CAUTION
變更編寫模式將會遺失您目前的所有程式碼。以此範本為基礎的程式碼型體驗需要使用相同的編寫模式。

開啟個人化編輯器以編輯您的程式碼內容。
若要定義可編輯的表單欄位，請導覽至左側導覽窗格中的 協助程式功能 功能表，然後新增內嵌屬性。宣告及呼叫變數的語法會自動新增至內容中。

{width="85%"}

以唯一ID取代"name"以識別可編輯的欄位。例如，輸入「imgURL」。

note note
NOTE
欄位ID必須是唯一的，並且不能包含空格。此ID應在您的內容中要顯示變數值的任何位置使用。

新增下表詳述的引數，調整語法以符合您的需求：

table 0-row-3 1-row-3 2-row-3
動作	參數	範例
宣告具有預設值的可編輯欄位。將範本新增至您的內容時，如果您未自訂範本，將會使用此預設值。	在內嵌標籤之間新增預設值。	`{{#inline "editableFieldID"}}default_value{{/inline}}`
為可編輯欄位定義標籤。編輯範本的欄位時，此標籤會顯示在程式碼編輯器中。	`name="title"`	`{{#inline "editableFieldID" name="title"}}default_value{{/inline}}`

按一下 預覽表單欄位 以檢查可編輯的表單欄位在套用此範本的程式碼式體驗中會如何顯示。

{width="85%"}
在您要顯示可編輯欄位值的每個位置，使用程式碼中的{{{name}}}語法。將name取代為先前定義之欄位的唯一識別碼。

{width="85%"}
以類似方式繼續新增其他可編輯的欄位，每個欄位都以{{#inline}}和{{/inline}}標籤包住。
視需要編輯其餘的程式碼，包括與您定義的可編輯欄位相對應的ID。了解作法
儲存您的範本。

在可編輯的欄位表單中使用決定原則 decision-policy-in-form-fields

建立程式碼型體驗內容範本時，您可以使用決定原則在可編輯表單欄位中運用優惠方案。

建立程式碼型體驗範本，如上述所述。
使用版本畫面右側邊欄的 顯示決策 圖示，或在左側功能表的 決策原則 區段的運算式編輯器中，按一下 新增決策原則。

瞭解如何在本節中建立決定原則。
按一下 插入原則 按鈕。已新增與決定原則對應的程式碼。
在{{#each}}標籤之後，使用上述的說明內嵌語法，插入對應至您要新增之可編輯表單欄位的代碼。以唯一ID取代"name"以識別可編輯的欄位。在此範例中，請使用「title」。

{width="90%"}
按一下 預覽表單欄位 以檢查可編輯的表單欄位在套用此範本的程式碼式體驗中會如何顯示。

{width="70%"}
將剩餘的程式碼插入到{{/each}}標籤上方。在您想要顯示可編輯欄位值的每個位置，在程式碼中使用{{{name}}}語法。在此範例中，將name取代為「title」。

{width="85%"}
儲存您的範本。

程式碼範例 code-examples

以下是一些JSON和HTML範本的範例，其中包括決定原則。

JSON範本：

{{#inline "title" name="Title"}}Best gear for winter is here for you!{{/inline}}
{{#inline "description" name="Description"}}Add description{{/inline}}
{{#inline "imgURL" name="Image Link"}}Add link{{/inline}}
{{#inline "number_of_items" name="Number of items"}}23{{/inline}}

{
  "title": "{{{title}}}",
  "description": "{{{description}}}",
  "imageUrl": "{{{imgURL}}}",
  "number_of_items": {{{number_of_items}}},
  "code": "DEFAULT"
}

NOTE

參考JSON裝載中的內嵌欄位時：

字串型別欄位必須括在雙引號中。
整數或布林值不可使用雙引號括住。（請參閱上述範例中的number_of_items欄位。）

具有決策的 JSON範本：

{
"offer": [
{{#each decisionPolicy.fff709b7-7fef-4e4e-83d7-594fbcf196c1.items as |item|}}
{{#inline "title" name="Title"}}{{item._mobiledx.Title1}}{{/inline}} {{#inline "description" name="Description"}}{{item._mobiledx.Title2}}{{/inline}} {{#inline "imgURL" name="Image Link"}}https://luma.enablementadobe.com/content/luma/us/en/experience/warming-up/_jcr_content/root/hero_image.coreimg.jpeg{{/inline}}

{
"title": "{{{title}}}",
"description": "{{{description}}}",
"imageUrl": "{{{imgURL}}}",
"link": "https://lumaenablement.adobe.com/web/luma/home", "code": "DEFAULT"
},
{{/each}}
]
}

NOTE

您要使用決策專案的內嵌欄位必須放在決策原則區塊中 — 介於{{#each}}和{{/each}}標籤之間。

HTML範本：

{{#inline "title" name="Title"}}Please enter title here{{/inline}}
{{#inline "imgSrc" name="Image link"}}{{/inline}}

<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{{imgSrc}}}" />{{{title}}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>

含決策的HTML範本：

{{#each decisionPolicy.f112884a-5654-43ad-9d6d-dbd32ae23ee6.items as |item|}}
{{#inline "title" name="Title"}}Title is: {{item._mobiledx.Title1}}{{/inline}}

<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{item._mobiledx.HeroBannerImage.sourceURL}}" />{{{title}}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>

{{/each}}