Show Menu
THEMEN×

JavaScript-Integration (clientseitig)

Innerhalb einer Webseite erfolgt die Abfrage an das Interaction-Angebotsmodul direkt durch Integration eines JavaScript-Aufrufs. Dieser Aufruf gibt den Angebotsinhalt zurück in einem gezielten
Element.
Adobe empfiehlt die Verwendung der JavaScript-Integrationsmethode.
Die URL des Aufruf-Scripts stellt sich wie folgt dar:
<script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=" type="text/javascript"></script>

Der Parameter " env " erhält den internen Namen der anonymen Interaktionen vorbehaltenen Live-Umgebung.
Um ein Angebot zu unterbreiten, müssen somit eine Umgebung und eine Platzierung in Adobe Campaign erstellt sowie eine HTML-Seite konfiguriert werden.
Unten stehend werden verschiedene Integrationsmöglichkeiten mit JavaScript beispielhaft dargestellt.

HTML-Modus

Angebote für anonyme Kontakte

  1. 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.
  2. 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>
    
    
    Das <script> -Element darf nicht in sich geschlossen sein.
    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.
  3. 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>
    
    

Angebote für identifizierte Kontakte

Um einem identifizierten Kontakt ein Angebot zu unterbreiten, läuft der Prozess ähnlich ab, wie hier beschrieben: Angebote für anonyme Kontakte . Im Inhalt der Web-Seite müssen Sie das folgende Script hinzufügen, das während des Aufrufs an das Modul den Kontakt identifiziert:
<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>

  1. 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.
  2. 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>
    
    

HTML-Rendering-Funktion verwenden

Die Verwendung einer HTML-Rendering-Funktion bietet den Vorteil, das die HTML-Darstellung des Angebots automatisch erzeugt wird.
  1. Klicken Sie in der Angebotsplatzierung auf den Link Funktionen bearbeiten... .
  2. Kreuzen Sie die Option HTML-Rendering-Funktion überschreiben an.
  3. 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.

XML-Modus

Angebote unterbreiten

Interaction bietet die Möglichkeit, der das Angebotsmodul abfragenden HTML-Seite einen XML-Knoten zurückzugeben. Dieser XML-Knoten kann von clientseitig zu entwickelnden Funktionen verarbeitet werden.
Die Angebotsmodul-Abfrage stellt sich wie folgt dar:
<script type="text/javascript" id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=&cb="></script>

Der Parameter " env " erhält den internen Namen der Live-Umgebung.
Der optionale Parameter " cb " erhält den Namen der Funktion, die den vom Angebotsmodul zurückgegebenen XML-Knoten auswerten wird (Callback).
Der optionale Parameter " t " erhält bei Interaktionen mit identifizierten Kontakten die Kennung des Kontakts. Der Parameter kann auch mit der Variablen interactionTarget übergeben werden.
Der optionale Parameter " c " erhält die Liste der internen Kategorienamen.
Der optionale Parameter " th " erhält die Liste der Themen.
Der optionale Parameter " gctx " erhält die globalen Aufrufdaten (Kontext) der gesamten Seite.
Der zurückgegebene XML-Knoten stellt sich wie folgt dar:
<propositions>
 <proposition id="" offer-id="" weight="" rank="" space="" div=""> //proposition identifiers
   ...XML content defined in Adobe Campaign...
 </proposition>
 ...
</propositions>

Das folgende Anwendungsbeispiel beschreibt die in Adobe Campaign vorzunehmenden Konfigurationen zur Aktivierung des XML-Modus und zeigt das Ergebnis der Angebotsmodul-Abfrage in der HTML-Seite. Gehen Sie wie folgt vor.
  1. 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.
  2. 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="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>
    
    
    Jedes Element muss zweimal definiert werden. CDATA-Elemente ("_jst") können Personalisierungsfelder enthalten.
    Danach ist eine Aktualisierung der Datenbankstruktur erforderlich. Weiterführende Informationen dazu finden Sie in diesem Abschnitt .
    Sie können das Angebotsschema erweitern, um neue Felder sowohl im Batch- als auch im Einzelmodus sowie in jedem beliebigen Format (Text, HTML und XML) hinzuzufügen.
  3. 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:
    Die Formularfelder ( <input> ) müssen auf die im zuvor erstellten Schema definierten CDATA-Elemente verweisen.
    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.
  4. Erstellung eines Angebots
    Weitere Informationen zum Erstellen von Angeboten finden Sie unter Erstellung eines Angebots .
    Im vorliegenden Anwendungsbeispiel wird das Angebot wie folgt konfiguriert:
  5. 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.
  6. 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>
    
    

Verwendung einer Rendering-Funktion

Es besteht die Möglichkeit, Angebotsdarstellungen mithilfe von XML-Rendering-Funktionen zu erzeugen. Diese Funktion ändert den infolge der Modulabfrage an die HTML-Seite zurückgegebenen XML-Knoten.
  1. Klicken Sie in der Angebotsplatzierung auf den Link Funktionen bearbeiten... .
  2. Kreuzen Sie die Option XML-Rendering-Funktion überschreiben an.
  3. 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";
    }