Add an offer in a web page add-an-offer-in-web

To call the Offer engine in a web page, insert a call to a JavaScript code directly into the page. This call returns the offer content in a targeted element.

The script calling URL looks like this:

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

The “env” parameter receives the internal name of the live environment dedicated to anonymous interactions.

To present an offer, we need to create an environment and an offer space in Adobe Campaign, then configure the HTML page.

The following use cases detail the possible options for integrating offers via JavaScript.

Option 1: HTML mode html-mode

Present an anonymous offer presenting-an-anonymous-offer

Step 1: Prepare the Offer engine

Step 2: Update the content of the HTML page

The HTML page must include an element with an @id attribute with the value of the internal name of the created offer space (“i_internal name space”). The offer will be inserted into this element by Interaction.

In our example, the @id attribute receives the “i_SPC12” value, where “SPC12” is the internal name of the previously created offer space:

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

In our example, the URL for calling the script is as follows (“OE3” is the internal name of the live environment):

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

This static call will automatically generate a dynamic call containing all the parameters needed by the Offer engine.

This behavior lets you use several offer spaces on the same page, to be managed by a single call to the Offer engine.

Step 3: Display the results in the HTML page

The content of the offer representation is returned to the HTML page by the Offer engine:

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

Present an identified offer presenting-an-identified-offer

To present an offer to an identified contact, the process is similar as the one detailed in this section.

In the content of the web page, you need to add the following script that will identify the contact during the call to the Offer engine:

<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>

Use an HTML rendering function using-an-html-rendering-function

To generate the HTML offer representation automatically, you can use a rendering function.

Option 2: XML mode xml-mode

Present an offer presenting-an-offer

Campaign Interaction module lets you return an XML node to the HTML page which calls up the Offer engine. This XML node can be processed by functions to be developed on the customer side.

The call to the Offer engine looks like this:

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

The returned XML node looks like this:

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

The use case below details the configurations to carry out in Adobe Campaign to enable XML mode then show the result of the call to the engine in the HTML page.

Use a rendering function using-a-rendering-function-

It’s possible to use an XML rendering function to create an offer presentation. This function will modify the XML node that is returned to the HTML page during the call to the Offer engine.

Set up a SOAP integration

The SOAP web services provided for offer management are different from those usually used in Adobe Campaign. They can be accessed via the interaction URL described in the previous section and let you present or update offers for a given contact.

Offer proposition offer-proposition

For an offer proposition via SOAP, add the nms:proposition#Propose command followed by the following parameters:

In response to the query, the SOAP service will return the following parameters:

Offer update offer-update

Add the nms:interaction#UpdateStatus command to the URL, followed by these parameters:

Example using a SOAP call example-using-a-soap-call

Here is an example of code for a SOAP call:

<%
  var space = request.parameters.sp
  var cnx = new HttpSoapConnection(
    "https://" + request.serverName + ":" + request.serverPort + "/interaction/" + env + "/" + space,
    "utf-8",
    HttpSoapConnection.SOAP_12)
  var session = new SoapService(cnx, "nms:interaction")
  var action = request.parameters.a
  if( action == undefined )
    action = 'propose'

  try
  {
    switch( action )
    {
    case "update":
      var proposition = request.parameters.p
      var status      = request.parameters.st
      session.addMethod("UpdateStatus", "nms:interaction#UpdateStatus",
       ["proposition", "string",
        "status",      "string",
        "context",     "NLElement"],
       [])
      session.UpdateStatus(proposition, status, <undef/>)
      var redirect = request.parameters.r
      if( redirect != undefined )
        response.sendRedirect(redirect)
      break;

    case "propose":
      var count = request.parameters.n
      var target = request.parameters.t
      var categorie = request.parameters.c
      var theme = request.parameters.th
      var layout = request.parameters.l
      if( count == undefined )
        count = 1
      session.addMethod("Propose", "nms:proposition#Propose",
       ["targetId",      "string",
        "maxCount",      "string",
         "categories",    "string",
         "themes",        "string",
        "context",       "NLElement"],
       ["interactionId", "string",
        "propositions",  "NLElement"])
      response.setContentType("text/html")
      var result = session.Propose(target, count, category, theme, <empty/>)
      var props = result[1]
  %><table><tr><%
      for each( var propHtml in props.proposition.*.mdSource )
      {
        %><td><%=propHtml%></td><%
      }
  %></tr></table><%
      break;
    }
  }
  catch( e )
  {
  }
  %>