Dokumentation AEM 6.5 LTS Benutzerhandbuch

Entwicklung für zielgerichtete Inhalte developing-for-targeted-content

Letzte Aktualisierung: 3. September 2026

Gilt für:
Experience Manager 6.5 LTS

Themen:
Developing

Erstellt für:

Developer

In diesem Abschnitt werden Themen zum Entwickeln von Komponenten für die Verwendung mit Content-Targeting beschrieben.

Informationen zur Verbindung mit Adobe Target finden Sie unter Integrieren mit Adobe Target.
Weitere Informationen zum Verfassen zielgerichteter Inhalte finden Sie unter Verfassen zielgerichteter Inhalte mit dem Targeting-Modus“.

NOTE

Wenn Sie eine Komponente in AEM Author anvisieren, führt die Komponente eine Reihe von Server-seitigen Aufrufen an Adobe Target durch, um die Kampagne zu registrieren, Angebote einzurichten und Adobe Target-Segmente abzurufen (falls konfiguriert). Es werden keine Server-seitigen Aufrufe von AEM Publish an Adobe Target vorgenommen.

Aktivieren von Targeting mit Adobe Target auf Ihren Seiten enabling-targeting-with-adobe-target-on-your-pages

Um zielgerichtete Komponenten in Ihre Seiten zu integrieren, die mit Adobe Target interagieren, müssen Sie spezifischen Client-seitigen Code in das <head>-Element aufnehmen.

NOTE

Der Targeting-Modus und die klassische AEM-Targeting-Komponente verwenden die AEM Target-Integration auf der Grundlage von ContextHub und den at.js oder mbox.js Client-Bibliotheken (siehe unten), die kein Bereitstellungsmechanismus von AEP Web SDK sind. Aus diesem Grund wird die klassische Targeting-Komponente nicht auf Seiten gerendert, die nur die AEP Web SDK laden.

Sites, die AEP Web SDK verwenden, müssen die Target-Bereitstellung separat über die Web-SDK implementieren (einen konfigurierten Datenstrom, die Web-SDK über Tags oder Alloy und Frontend-Rendering mit renderDecisions/applyPropositions entsprechend den Entscheidungsumfängen der Aktivität). AEM stellt dann die Angebote bereit (nach Adobe Target exportierte Experience Fragments oder Inhaltsfragmente) und die Aktivitäten werden in der Adobe Target-Benutzeroberfläche erstellt.

Der head-Bereich the-head-section

Fügen Sie die beiden folgenden Codeblöcke zum <head> Ihrer Seite hinzu:

<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>

Dieser Code fügt die erforderlichen JavaScript-Analyseobjekte hinzu und lädt die Cloud-Service-Bibliotheken, die mit der Website verbunden sind. Für den Target-Service werden die Bibliotheken über /libs/cq/analytics/components/testandtarget/headlibs.jsp geladen.

Die geladenen Bibliotheken hängen von der Art der Ziel-Client-Bibliothek (mbox.js oder at.js) ab, die in der Target-Konfiguration verwendet wird:

Für standardmäßige mbox.js

<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/mbox.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js"></script>

Für benutzerdefinierte mbox.js

<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/mbox.js"></script>
        <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js"></script>

Für at.js

<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs.js"></script>

NOTE

Nur die at.js-Version, die mit dem Produkt bereitgestellt wird, wird unterstützt. Die at.js-Version, die mit dem Produkt bereitgestellt wird, können Sie über die Datei at.js in folgendem Speicherort abrufen:

/libs/cq/testandtarget/clientlibs/testandtarget/atjs/source/at.js

Für benutzerdefinierte at.js

<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/at.js"></script>
    <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js"></script>

Die Target-Funktion wird Client-seitig vom Objekt CQ_Analytics.TestTarget verwaltet. Daher enthält die Seite Initialisierungs-Code wie im folgenden Beispiel:

<script type="text/javascript">
            if ( !window.CQ_Analytics ) {
                window.CQ_Analytics = {};
            }
            if ( !CQ_Analytics.TestTarget ) {
                CQ_Analytics.TestTarget = {};
            }
            CQ_Analytics.TestTarget.clientCode = 'my_client_code';
        </script>
      ...

    <div class="cloudservice testandtarget">
  <script type="text/javascript">
  CQ_Analytics.TestTarget.maxProfileParams = 11;

  if (CQ_Analytics.CCM) {
   if (CQ_Analytics.CCM.areStoresInitialized) {
    CQ_Analytics.TestTarget.registerMboxUpdateCalls();
   } else {
    CQ_Analytics.CCM.addListener("storesinitialize", function (e) {
     CQ_Analytics.TestTarget.registerMboxUpdateCalls();
    });
   }
  } else {
   // client context not there, still register calls
   CQ_Analytics.TestTarget.registerMboxUpdateCalls();
  }
  </script>
 </div>

Der JSP-Code fügt die erforderlichen JavaScript-Analyseobjekte und Verweise auf Client-seitige JavaScript-Bibliotheken hinzu. Die testandtarget.js-Datei enthält die mbox.js-Funktionen. Der vom Skript generierte HTML-Code ähnelt dem folgenden Beispiel:

<script type="text/javascript">
        if ( !window.CQ_Analytics ) {
            window.CQ_Analytics = {};
        }
        if ( !CQ_Analytics.TestTarget ) {
            CQ_Analytics.TestTarget = {};
        }
        CQ_Analytics.TestTarget.clientCode = 'MyClientCode';
</script>
<link rel="stylesheet" href="/etc/clientlibs/foundation/testandtarget/testandtarget.css" type="text/css">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/testandtarget.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>

Der Hauptteil (Start) the-body-section-start

Fügen Sie den folgenden Code unmittelbar nach dem <body>-Tag hinzu, um der Seite die ClientContext-Funktionen hinzuzufügen:

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

Der Hauptteil (Ende) the-body-section-end

Fügen Sie den folgenden Code unmittelbar vor dem </body>-End-Tag hinzu:

<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>

Das JSP-Skript dieser Komponente generiert Aufrufe an die Target-JavaScript-API und implementiert andere erforderliche Konfigurationen. Der vom Skript generierte HTML-Code ähnelt dem folgenden Beispiel:

<div class="servicecomponents cloudservices">
  <div class="cloudservice testandtarget">
    <script type="text/javascript">
      CQ_Analytics.TestTarget.maxProfileParams = 11;
      CQ_Analytics.CCM.addListener("storesinitialize", function(e) {
        CQ_Analytics.TestTarget.registerMboxUpdateCalls();
      });
    </script>
    <div id="cq-analytics-texthint" style="background:white; padding:0 10px; display:none;">
      <h3 class="cq-texthint-placeholder">Component clientcontext is missing or misplaced.</h3>
    </div>
    <script type="text/javascript">
      $CQ(function(){
      if( CQ_Analytics &&
          CQ_Analytics.ClientContextMgr &&
          !CQ_Analytics.ClientContextMgr.isConfigLoaded )
        {
          $CQ("#cq-analytics-texthint").show();
        }
      });
    </script>
  </div>
</div>

Verwenden einer benutzerdefinierten Target-Bibliotheksdatei using-a-custom-target-library-file

NOTE

Wenn Sie weder DTM noch ein anderes Target-Marketing-System verwenden, können Sie individuelle Target-Bibliotheksdateien verwenden.

NOTE

Standardmäßig werden Mboxes ausgeblendet – die mboxDefault-Klasse bestimmt dieses Verhalten. Das Ausblenden von Mboxes stellt sicher, dass Besuchenden der Standardinhalt nicht angezeigt wird, bevor er ausgetauscht wird. Das Ausblenden von Mboxes wirkt sich jedoch auf die wahrgenommene Leistung aus.

Die standardmäßige mbox.js-Datei, die zum Erstellen von Mboxes verwendet wird, befindet sich unter /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js. Um eine benutzerdefinierte mbox.js-Datei zu verwenden, fügen Sie die Datei zur Target-Cloud-Konfiguration hinzu. Um die Datei hinzuzufügen, muss die mbox.js Datei im Dateisystem verfügbar sein.

Wenn Sie beispielsweise den Marketing Cloud ID-Service 🔗 verwenden möchten, müssen Sie mbox.js herunterladen, damit er den richtigen Wert für die imsOrgID-Variable enthält, die auf Ihrem Mandanten basiert. Diese Variable ist für die Integration mit dem Marketing Cloud-ID-Service erforderlich. Weitere Informationen finden Sie unter Adobe Analytics as the Reporting Source for Adobe Target und Vor der Implementierung.

NOTE

Wenn eine benutzerdefinierte Mbox in einer Target-Konfiguration definiert ist, müssen alle Benutzer Lesezugriff auf /etc/cloudservices auf den Veröffentlichungsservern haben. Ohne diesen Zugriff führt das Laden mbox.js Dateien auf der Veröffentlichungs-Website zu einem 404-Fehler.

Gehen Sie zur CQ-Seite Tools und wählen Sie Cloud-Services aus. (https://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
Wählen Sie in der Baumstruktur „Adobe Target“ aus und doppelklicken Sie in der Liste der Konfigurationen auf Ihre Target-Konfiguration.
Klicken Sie auf der Konfigurationsseite auf „Bearbeiten“.
Klicken Sie für die benutzerdefinierte mbox.js-Eigenschaft auf „Durchsuchen“ und wählen Sie die Datei aus.
Um die Änderungen zu übernehmen, geben Sie das Passwort für Ihr Adobe Target-Konto ein, klicken Sie auf „Erneut mit Target verbinden“ und klicken Sie auf „OK“, wenn die Verbindung erfolgreich hergestellt wurde. Klicken Sie anschließend im Dialogfeld „Komponente bearbeiten“ auf „OK“.

Ihre Target-Konfiguration enthält eine benutzerdefinierte mbox.js-Datei der erforderliche Code im head- Ihrer Seite fügt die Datei dem Client-Bibliotheks-Framework hinzu, anstatt einen Verweis auf die testandtarget.js-Bibliothek zu erstellen.

Deaktivieren des Target-Befehls für Komponenten disabling-the-target-command-for-components

Die meisten Komponenten können mit dem Target-Befehl im Kontextmenü in zielgerichtete Komponenten umgewandelt werden.

chlimage1-21

Um den Target-Befehl aus dem Kontextmenü zu entfernen, fügen Sie die folgende Eigenschaft zum cq:editConfig der Komponente hinzu:

Name: cq:disableTargeting
Typ: Boolean
Wert: True

Um beispielsweise das Targeting für die Titelkomponenten der Seiten der Geometrixx-Demo-Site zu deaktivieren, fügen Sie die Eigenschaft zum /apps/geometrixx/components/title/cq:editConfig hinzu.

chlimage1-22

Senden von Bestellungsbestätigungsinformationen an Adobe Target sending-order-confirmation-information-to-adobe-target

NOTE

Wenn Sie DTM nicht verwenden, senden Sie Bestellungsbestätigungen an Adobe Target.

Um die Leistung Ihrer Website zu verfolgen, senden Sie Kaufinformationen von Ihrer Bestellungsbestätigungsseite an Adobe Target. Siehe Erstellen einer orderConfirmPage-Mbox und Mbox für Bestellungsbestätigungen - Benutzerdefinierte Parameter hinzufügen für weitere Informationen. Adobe Target erkennt mBox-Daten als Auftragsbestätigungsdaten, wenn Ihr mBox-Name orderConfirmPage ist, und verwendet die folgenden spezifischen Parameternamen:

productPurchasedId: Eine Liste der IDs, die die gekauften Produkte identifizieren.
orderId: Die ID der Bestellung.
orderTotal: Der Gesamtbetrag des Kaufs.

Der Code auf der gerenderten HTML-Seite, die die Mbox erstellt, ähnelt dem folgenden Beispiel:

<script type="text/javascript">
     mboxCreate('orderConfirmPage',
     'productPurchasedId=product1 product2 product3',
     'orderId=order1234',
     'orderTotal=24.54');
</script>

Die Werte der einzelnen Parameter sind für jede Bestellung unterschiedlich. Daher benötigen Sie eine Komponente, die den Code basierend auf den Eigenschaften des Kaufs generiert. Das eCommerce-Integrations-Framework von CQ ermöglicht Ihnen die Integration mit Ihrem Produktkatalog und die Implementierung eines Warenkorbs und einer Checkout-Seite.

Das Geometrixx Outdoors-Beispiel zeigt die folgende Bestätigungsseite an, wenn ein Besucher Produkte kauft:

chlimage1-23

Der folgende Code für das JSP-Skript einer Komponente greift auf die Eigenschaften des Warenkorbs zu und gibt anschließend den Code für das Erstellen der Mbox aus.

<%--

  confirmationmbox component.

--%><%
%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false"
          import="com.adobe.cq.commerce.api.CommerceService,
                  com.adobe.cq.commerce.api.CommerceSession,
                  com.adobe.cq.commerce.common.PriceFilter,
                  com.adobe.cq.commerce.api.Product,
                  java.util.List, java.util.Iterator"%><%

/* obtain the CommerceSession object */
CommerceService commerceservice = resource.adaptTo(CommerceService.class);
CommerceSession session = commerceservice.login(slingRequest, slingResponse);

/* obtain the cart items */
List<CommerceSession.CartEntry> entries = session.getCartEntries();
Iterator<CommerceSession.CartEntry> cartiterator = entries.iterator();

/* iterate the items and get the product IDs */
String productIDs = new String();
while(cartiterator.hasNext()){
 CommerceSession.CartEntry entry = cartiterator.next();
 productIDs = productIDs + entry.getProduct().getSKU();
    if (cartiterator.hasNext()) productIDs = productIDs + ", ";
}

/* get the cart price and orderID */
String total = session.getCartPrice(new PriceFilter("CART", "PRE_TAX"));
String orderID = session.getOrderId();

%><div class="mboxDefault"></div>
<script type="text/javascript">
     mboxCreate('orderConfirmPage',
     'productPurchasedId=<%= productIDs %>',
     'orderId=<%= orderID %>',
     'orderTotal=<%= total %>');
</script>

Wenn im vorherigen Beispiel die Komponente in der Kaufbestätigungsseite enthalten ist, enthält der Quell-Code der Seite das folgende Skript, das die Mbox erstellt:

<div class="mboxDefault"></div>
<script type="text/javascript">

     mboxCreate('orderConfirmPage',
     'productPurchasedId=47638-S, 46587',
     'orderId=d03cb015-c30f-4bae-ab12-1d62b4d105ca',
     'orderTotal=US$677.00');

</script>

Grundlagen der Target-Komponente understanding-the-target-component

Die Target-Komponente ermöglicht es Autorinnen und Autoren, dynamische Mboxes aus CQ-Inhaltskomponenten zu erstellen. Weitere Informationen finden unter Content-Targeting“. Die Target-Komponente befindet sich unter /libs/cq/personalization/components/target.

Das target.jsp Skript greift auf die Seiteneigenschaften zu, um die Targeting-Engine zu bestimmen, die für die Komponente verwendet werden soll, und führt dann das entsprechende Skript aus:

Adobe Target: /libs/cq/personalization/components/target/engine_tnt.jsp
Adobe Target mit AT.JS: /libs/cq/personalization/components/target/engine_atjs.jsp
Adobe Campaign: /libs/cq/personalization/components/target/engine_cq_campaign.jsp
Client-seitige Regeln/ContextHub: /libs/cq/personalization/components/target/engine_cq.jsp

Die Erstellung von Mboxes the-creation-of-mboxes

NOTE

Standardmäßig sind Mboxes ausgeblendet. Die mboxDefault Klasse bestimmt dieses Verhalten. Das Ausblenden von Mboxes stellt sicher, dass Besuchenden der Standardinhalt nicht angezeigt wird, bevor er ausgetauscht wird. Das Ausblenden von Mboxes wirkt sich jedoch auf die wahrgenommene Leistung aus.

Wenn Adobe Target das Content-Targeting ausführt, erstellt das engine_tnt.jsp-Skript Mboxes, die den Inhalt des zielgerichteten Erlebnisses enthalten:

Fügt ein div-Element mit der Klasse mboxDefault hinzu, wie es die Adobe Target-API erfordert.
Fügt den mBox-Inhalt (den Inhalt des zielgerichteten Erlebnisses) im div-Element hinzu.

Nach dem mboxDefault-div-Element wird der JavaScript-Code eingefügt, der die mBox erstellt:

Der Name, die ID und der Speicherort der Mbox basieren auf dem Repository-Pfad der Komponente.
Das Skript ruft Client-Kontextparameternamen und -werte ab.
Aufrufe werden an die Funktionen durchgeführt, die mbox.js und andere Client-Bibliotheken definieren, um die Mboxes zu erstellen.

Client-Bibliotheken für Content-Targeting client-libraries-for-content-targeting

Im Folgenden finden Sie die verfügbaren clientlib-Kategorien:

testandtarget.mbox
testandtarget.init
testandtarget.util
testandtarget.atjs
testandtarget.atjs-integration

recommendation-more-help

experience-manager-65-lts-help-main-toc