Show Menu
主题×

通过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. Select 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">
                        <container>
                          <input menuId="viewMenuBuilder" options="inbound" type="customizeBtn"
                                 xpath="/ignored/customizeTitle2"/>
                        </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">
                        <container>
                          <input menuId="viewMenuBuilder" options="inbound" type="customizeBtn"
                                 xpath="/ignored/customizePrice"/>
                        </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节点的函数名。 在我们的示例中,调用的up函数打开一个模态窗口(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. Select Overload the XML rendering function .
  3. 转到选项卡 XML rendering 并插入所需的函数。
    该函数可以如下:
    function (proposition) {
      delete proposition.@id;
      proposition.@newAttribute = "newValue";
    }