通过 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模式

呈现匿名选件

准备交互引擎

打开Adobe Campaign界面并准备匿名环境。

创建链接到匿名环境的选件空间。

创建链接到选件空间的选件及其表示形式。
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>标记不能自闭。

此静态调用将自动生成一个动态调用，其中包含交互引擎所需的所有参数。

此行为允许您在同一页面上使用多个选件空间，以便通过对引擎的单次调用进行管理。

生成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>

转到网页将调用的选件空间，单击Advanced parameters并添加一个或多个标识键。

在此示例中，标识键是复合的，因为它既基于电子邮件，也基于收件人名称。
在网页显示期间，脚本评估允许您将收件人ID传递到选件引擎。如果ID是复合的，则键值会按与高级设置中相同的顺序显示，并且会由 | 。

在以下示例中，联系人已登录到网站，并在调用交互引擎时被识别，这要归功于其电子邮件和姓名。
```
<script type="text/javascript">
  interactionTarget = myEmail|myName;
</script>
```

使用HTML渲染函数

要自动生成HTML选件表示形式，您可以使用渲染函数。

转到选件空间，然后单击Edit functions链接。
选择 Overload the HTML rendering function。
转到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页面中显示对引擎的调用结果。

创建环境和选件空间

有关创建环境的更多信息，请参阅实时/设计环境。

有关创建选件空间的更多信息，请参阅创建选件空间。

扩展选件架构以添加新字段

此架构将定义以下字段：标题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）添加新字段。

扩展选件公式以编辑新字段和修改现有字段

编辑选件(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字段。

创建优惠

有关创建选件的更多信息，请参阅创建选件。

在以下用例中，选件的输入方式如下：
批准选件或由其他人批准该选件，然后在上一步创建的选件空间上将其激活，以便该选件在链接的实时环境中可用。

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节点。

转到选件空间，然后单击Edit functions链接。
选择 Overload the XML rendering function。

转到XML rendering选项卡并插入所需的函数。

函数可以如下所示：

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

adobe.com 上的资源

Campaign Reporting Email Reporting Triggered Emails Campaign Management Email Deliverability Omni Channel Marketing

通过 JavaScript 集成（客户端）

HTML模式

呈现匿名选件

呈现已识别的选件

使用HTML渲染函数

XML模式

呈现优惠

使用渲染函数

adobe.com 上的资源

在此页面上

查看下一个：

学习

文档

社区

技术支持

资源

Adobe 帐户

Adobe