透過 JavaScript 進行整合 (用戶端)

若要在網頁中呼叫互動引擎,請直接將對JavaScript程式碼的呼叫插入網頁。 此呼叫會傳回定位

元素。

Adobe建議使用JavaScript整合方法。

呼叫URL的指令碼如下所示:

<script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=" type="text/javascript"></script>

"env"參數接收專用於匿名交互的即時環境的內部名稱。

若要呈現選件,我們需要在Adobe Campaign中建立環境和選件空間,然後設定HTML頁面。

下列使用案例詳細說明透過JavaScript整合選件的可能選項。

HTML模式

呈現匿名選件

  1. 準備互動引擎

    開啟Adobe Campaign介面並準備匿名環境。

    建立連結至匿名環境的選件空間。

    建立連結至選件空間的選件及其表示法。

  2. HTML頁面的內容

    HTML頁面必須包含

    元素,其中包含@id屬性,其值為已建立的選件空間的內部名稱(「i_internal name space」)。 選件將會插入此
    元素。

    在我們的範例中,@id屬性會接收"i_SPC12"值,其中"SPC12"是先前建立的選件空間的內部名稱:

    <div id="i_SPC12"></div>
    

    在我們的範例中,呼叫指令碼的URL如下(「OE3」是即時環境的內部名稱):

    <script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
    
    重要

    <script>標籤不能自行關閉。

    此靜態呼叫會自動產生動態呼叫,其中包含互動引擎所需的所有參數。

    此行為可讓您在相同頁面上使用數個選件空格,由對引擎的單一呼叫管理。

  3. HTML頁面的結果

    選件表示法的內容會由互動引擎傳回至HTML頁面:

    <div id="banner_header">
      <div id="i_SPC12">
        <table>
          <tbody>
            <tr>
              <td><h3>Fly to Japan!</h3></td>
            </tr>
            <tr>
              <td><img width="150px" src="https://instance.adobe.org/res/Track/874fdaf72ddc256b2d8260bb8ec3a104.jpg"></td>
              <td>
                <p>Discover Japan for 2 weeks at an unbelievable price!!</p>
                <p><b>2345 Dollars - All inclusive</b></p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <script src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" id="interactionProposalScript" type="text/javascript"></script>
    </div>
    

呈現已識別的選件

若要向已識別的連絡人提供選件,程式與此處詳述的程式類似:呈現匿名選件。 在網頁內容中,您需要新增下列指令碼,以識別呼叫引擎期間的連絡人:

<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>
  1. 前往網頁將會呼叫的選件空間,按一下​Advanced parameters​並新增一或多個識別碼。

    在此範例中,識別碼是複合的,因為它是以電子郵件和收件者名稱為基礎。

  2. 在網頁顯示期間,指令碼評估可讓您將收件者ID傳遞至選件引擎。 如果ID是複合的,則按鍵會以與進階設定中使用的相同順序顯示,並以 |.

    在下列範例中,連絡人已登入網站,在呼叫互動引擎時,由於其電子郵件和姓名而被識別。

    <script type="text/javascript">
      interactionTarget = myEmail|myName;
    </script>
    

使用HTML轉換函式

若要自動產生HTML選件表示法,您可以使用轉換函式。

  1. 前往選件空間,然後按一下​Edit functions​連結。

  2. 選取 Overload the HTML rendering function

  3. 前往​HTML rendering​標籤,並插入與選件空間中為選件內容所定義欄位相符的變數。

    在此範例中,選件會以橫幅的形式顯示在網頁中,並由可點選的影像和標題所組成,這些標題與選件內容中定義的欄位相符。

XML模式

呈現選件

互動功能可讓您將XML節點傳回至呼叫選件引擎的HTML頁面。 此XML節點可由客戶端開發的功能來處理。

對互動引擎的呼叫如下所示:

<script type="text/javascript" id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=&cb="></script>

"env"參數接收即時環境的內部名稱。

"cb"參數接收函式的名稱,該名稱將讀取包含(回呼)命題的引擎返回的XML節點。 此參數為可選參數。

"t"參數僅接收所標識的交互的目標值。 此參數也可與​interactionTarget​變數一起傳遞。 此參數為可選參數。

"c"參數接收類別的內部名稱清單。 此參數為可選參數。

th」參數接收主題清單。 此參數為可選參數。

"gctx"參數接收整個頁面的呼叫資料全域(內容)。 此參數為可選參數。

傳回的XML節點如下所示:

<propositions>
 <proposition id="" offer-id="" weight="" rank="" space="" div=""> //proposition identifiers
   ...XML content defined in Adobe Campaign...
 </proposition>
 ...
</propositions>

下列使用案例詳細說明在Adobe Campaign中要進行的設定,以啟用XML模式,然後在HTML頁面中顯示對引擎的呼叫結果。

  1. 建立環境和選件空間

    有關建立環境的詳細資訊,請參閱即時/設計環境

    有關建立選件空間的詳細資訊,請參閱建立選件空間

  2. 擴充選件結構以新增欄位

    此方案將定義以下欄位:標題2和價格。

    範例中的架構名稱為​cus:offer

    <srcSchema _cs="Marketing offers (cus)" created="2013-01-18 17:14:20.762Z" createdBy-id="0"
               desc="" entitySchema="xtk:srcSchema" extendedSchema="nms:offer" img="nms:offer.png"
               label="Marketing offers" labelSingular="Marketing offers" lastModified="2013-01-18 15:20:18.373Z"
               mappingType="sql" md5="F14A7AA009AE1FCE31B0611E72866AC3" modifiedBy-id="0"
               name="offer" namespace="cus" xtkschema="xtk:srcSchema">
      <createdBy _cs="Administrator (admin)"/>
      <modifiedBy _cs="Administrator (admin)"/>
      <element img="nms:offer.png" label="Marketing offers" labelSingular="Marketing offer"
               name="offer">
        <element label="Content" name="view">
          <element label="Price" name="price" type="long" xml="true"/>
          <element label="Title 2" name="title2" type="string" xml="true"/>
    
          <element advanced="true" desc="Price calculation script." label="Script price"
                   name="price_jst" type="CDATA" xml="true"/>
          <element advanced="true" desc="Title calculation script." label="Script title"
                   name="title2_jst" type="CDATA" xml="true"/>
        </element>
      </element>
    </srcSchema>
    
    重要

    每個元素必須定義兩次。 CDATA("_jst")類型元素可以包含個性化欄位。

    不要忘記更新資料庫結構。 如需詳細資訊,請參閱本章節

    注意

    您可以擴充選件結構,以批次和統一模式,以及任何格式(文字、HTML和XML)新增欄位。

  3. 擴充選件公式以編輯新欄位並修改現有欄位

    編輯​選件(nsm)​輸入表單。

    在「檢視」區段中,插入兩個新欄位,其中包含下列內容:

    <input label="Title 2" margin-right="5" prebuildSubForm="false" type="subFormLink"
                         xpath="title2_jst">
                    <form label="Edit title 2" name="editForm" nothingToSave="true">
                      <input nolabel="true" toolbarAlign="horizontal" type="jstEdit"
                             xpath="." xpathInsert="/ignored/customizeTitle2?lang=zh-Hant">
                        <container>
                          <input menuId="viewMenuBuilder" options="inbound" type="customizeBtn"
                                 xpath="/ignored/customizeTitle2?lang=zh-Hant"/>
                        </container>
                      </input>
                    </form>
                  </input>
                  <input nolabel="true" type="edit" xpath="title2_jst"/>
    
                  <input label="Price" margin-right="5" prebuildSubForm="false" type="subFormLink"
                         xpath="price_jst">
                    <form label="Edit price" name="editForm" nothingToSave="true">
                      <input nolabel="true" toolbarAlign="horizontal" type="jstEdit"
                             xpath="." xpathInsert="/ignored/customizePrice?lang=zh-Hant">
                        <container>
                          <input menuId="viewMenuBuilder" options="inbound" type="customizeBtn"
                                 xpath="/ignored/customizePrice?lang=zh-Hant"/>
                        </container>
                      </input>
                    </form>
                  </input>
                  <input colspan="2" label="Prix" nolabel="true" type="number" xpath="price_jst"/>
    

    注釋掉目標URL欄位:

    重要

    (<input>)表單的欄位必須指向在建立的模式中定義的CDATA類型元素。

    選件表示形式中的轉換如下所示:

    Title 2​和​Price​欄位已新增,Destination URL​欄位不再顯示。

  4. 建立優惠方案

    如需建立選件的詳細資訊,請參閱建立選件

    在下列使用案例中,選件的輸入方式如下:

  5. 核准選件或讓其他人核准選件,然後在最後一個步驟建立的選件空間上啟動選件,以便在連結的即時環境中使用。

  6. HTML頁面上的引擎呼叫和結果

    在HTML頁面中呼叫互動引擎的情形如下:

    <script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=OE7&cb=alert" type="text/javascript">
    

    "env"參數的值是即時環境的內部名稱。

    "cb"參數的值是需要解譯引擎返回的XML節點的函式的名稱。 在我們的範例中,呼叫的函式會開啟一個模式視窗(alert()函式)。

    交互引擎返回的XML節點如下所示:

    <propositions>
     <proposition id="a28002" offer-id="10322005" weight="1" rank="1" space="SPC14" div="i_SPC14">
      <xmlOfferView>
       <title>Travel to Russia</title>
       <price>3456</price>
       <description>Discover this vacation package!INCLUDES 10 nights. FEATURES buffet breakfast daily. BONUS 5th night free.</description>
       <image>
        <path>https://myinstance.com/res/Track/ae1d2113ed732d58a3beb441084e5960.jpg</path>
        <alt>Travel to Russia</alt>
       </image>
      </xmlOfferView>
     </proposition>
    </propositions>
    

使用渲染函式

您可使用XML轉換功能來建立選件簡報。 此函式將修改在調用引擎期間返回到HTML頁面的XML節點。

  1. 前往選件空間,然後按一下​Edit functions​連結。

  2. 選取 Overload the XML rendering function

  3. 前往​XML rendering​標籤並插入所需的函式。

    函式可以如下所示:

    function (proposition) {
      delete proposition.@id;
      proposition.@newAttribute = "newValue";
    } 
    

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now