JavaScript-Integration (Client-seitig) integration-via-javascript-client-side

Vorbereitung des Angebotsmoduls

Konfigurieren Sie in Adobe Campaign eine anonyme Umgebung.

Erstellen Sie dann eine dieser Umgebung zugeordnete Platzierung.

Erstellen Sie schließlich ein Angebot und eine der Platzierung entsprechende Darstellung.

Inhalt der HTML-Seite

Die HTML-Seite muss ein

-Element mit einem „@id“-Attribut enthalten, das den Wert des internen Namens der erstellten Platzierung hat („i_internal name space“). Das Angebot wird durch Interaction in dieses Element eingefügt.

Im vorliegenden Beispiel nimmt das Attribut @id den Wert "i_SPC12" an, wobei "SPC12" der interne Name der zuvor erstellten Platzierung ist:

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

Im vorliegenden Beispiel stellt sich die URL des Script-Aufrufs wie folgt dar ("OE3" ist der interne Name der Live-Umgebung):

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

Dieser statische Aufruf erzeugt automatisch einen dynamischen Aufruf, welcher alle vom Angebotsmodul benötigten Parameter enthält.

Dies ermöglicht es beispielsweise, verschiedene Platzierungen innerhalb einer Seite mit einer einzigen Abfrage des Angebotsmoduls abzudecken.

Ergebnis in der HTML-Seite

Der Inhalt der Angebotsdarstellung wird durch das Angebotsmodul an die HTML-Seite zurückgegeben:

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

Klicken Sie in der Platzierung, die von der Webseite aus aufgerufen werden soll, auf Erweiterte Parameter und fügen Sie mindestens einen Identifikationsschlüssel hinzu.

Im vorliegenden Beispiel handelt es sich um einen zusammengesetzten Identifikationsschlüssel, da er sowohl auf die E-Mail-Adresse als auch auf den Namen des Kontakts Bezug nimmt.

Wenn die Webseite aufgerufen wird, ermöglicht es die Auswertung des Scripts, die Kennung des Kontakts an das Angebotsmodul zu übergeben. Bei zusammengesetzten Kennungen werden die Schlüssel in der gleichen Reihenfolge angezeigt wie in den erweiterten Parametern und durch | getrennt.

In folgendem Beispielcode hat sich der Kontakt auf der Webseite mit seinen Kundendaten angemeldet. Er wurde somit bei der Abfrage des Angebotsmodul mithilfe seiner E-Mail-Adresse und seines Familiennamens identifiziert:

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

Klicken Sie in der Angebotsplatzierung auf den Link Funktionen bearbeiten….

Kreuzen Sie die Option HTML-Rendering-Funktion überschreiben an.

Geben Sie dann im Tab HTML-Rendering die den in der Platzierung für den Angebotsinhalt definierten Feldern entsprechenden Variablen ein.

Im vorliegenden Beispiel wird das Angebot in Form eines Webseitenbanners unterbreitet. Es besteht aus einem anklickbaren Bild mit Untertitel, entsprechend den im Angebotsinhalt definierten Feldern.

Erstellung einer Umgebung und einer Platzierung

Weitere Informationen zum Erstellen einer Umgebung finden Sie unter Live-/Design-Umgebungen.

Die Erstellung von Platzierungen wird im Abschnitt Angebotsplatzierungen genauer erläutert.

Erweiterung des Angebotsschemas zur Hinzufügung neuer Felder

Das Schema definiert die Felder Titel 2 und Preis.

Im vorliegenden Beispiel trägt es den Namen cus:offer.

<srcSchema _cs="Marketing offers (cus)" created="2 AAAA-MM-DD HH:MM:SS.762Z" createdBy-id="0"
           desc="" entitySchema="xtk:srcSchema" extendedSchema="nms:offer" img="nms:offer.png"
           label="Marketing offers" labelSingular="Marketing offers" lastModified="AAAA-MM-DD HH:MM:SS.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>

Erweiterung des Angebotsformulars zur Hinzufügung der neuen Felder und Änderung eines existierenden Felds

Öffnen Sie das Formular Angebot (nms).

Fügen Sie im Abschnitt "Views" die zwei neuen Felder mit folgendem Inhalt ein:

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

Kommentieren Sie das Ziel-URL-Feld:

Im Formular der Angebotsdarstellungen schlagen sich die Änderungen wie folgt nieder:

Die Felder Titel 2 und Preis wurden eingefügt und das Feld Ziel-URL wird nicht mehr angezeigt.

Erstellung eines Angebots

Weitere Informationen zum Erstellen von Angeboten finden Sie unter Erstellung eines Angebots.

Im vorliegenden Anwendungsbeispiel wird das Angebot wie folgt konfiguriert:

Validieren Sie das Angebot oder lassen Sie es validieren und aktivieren Sie es in der zuvor erstellten Platzierung, um es in der entsprechenden Live-Umgebung verfügbar zu machen.

Abfrage des Angebotsmoduls und Ergebnis in der HTML-Seite

Die Modulabfrage in der HTML-Seite stellt sich wie folgt dar:

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

Der Parameter "env" nimmt als Wert den internen Namen der Live-Umgebung an.

Der Parameter "cb" nimmt als Wert den Namen der Funktion an, die den vom Angebotsmodul zurückgegebenen XML-Knoten auswerten soll. Im vorliegenden Beispiel öffnet die aufgerufene Funktion ein Modalfenster (alert()-Funktion).

Der vom Angebotsmodul zurückgegebene XML-Knoten stellt sich wie folgt dar:

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

Klicken Sie in der Angebotsplatzierung auf den Link Funktionen bearbeiten….

Kreuzen Sie die Option XML-Rendering-Funktion überschreiben an.

Fügen Sie im Tab XML-Rendering die gewünschte Funktion ein.

Die Funktion kann folgendem Beispiel entsprechen:

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