Deze sectie beschrijft onderwerpen over het ontwikkelen van componenten voor gebruik met inhoud het richten.
Wanneer u een component in AEM auteur richt, maakt de component een reeks server-zijvraag aan Adobe Target om de campagne te registreren, opstellingsaanbiedingen, en de segmenten van Adobe Target terug te winnen (indien gevormd). Er worden geen serveraanroepen vanuit AEM naar Adobe Target gepubliceerd.
Als u doelcomponenten wilt gebruiken op uw pagina's die met Adobe Target werken, neemt u specifieke code aan de clientzijde op in het element <head>
.
Voeg beide volgende codeblokken toe aan de sectie <head> van de pagina:
<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
Met deze code voegt u de vereiste analytische JavaScript-objecten toe en worden de cloudservicebibliotheken geladen die aan de website zijn gekoppeld. Voor de doelservice worden de bibliotheken geladen via /libs/cq/analytics/components/testandtarget/headlibs.jsp
De set bibliotheken die wordt geladen, is afhankelijk van het type doelclientbibliotheek (mbox.js of at.js) dat wordt gebruikt in de doelconfiguratie:
Voor standaard mbox.js
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/mbox.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/personalization/integrations/commons.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/util.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>
Voor aangepaste mbox.js
<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/mbox.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/personalization/integrations/commons.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/util.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>
Voor om.js
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs-integration.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs.js"></script>
Alleen de bij het product geleverde versie van at.js
wordt ondersteund. De met het product geleverde versie van at.js
kan worden verkregen door het at.js
bestand op locatie /etc/clientlibs/foundation/testandtarget/atjs/source/at.js
te bekijken.
Voor aangepaste at.js
<script type="text/javascript" src="/etc/cloudservices/testandtarget/<CLIENT-CODE>/_jcr_content/public/at.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs-integration.js"></script>
De functionaliteit Doel aan de clientzijde wordt beheerd door het object CQ_Analytics.TestTarget
. Daarom zal de pagina wat init code zoals in het volgende voorbeeld bevatten:
<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>
JSP voegt de vereiste analytische voorwerpen javascript en verwijzingen naar cliënt-kant JavaScript bibliotheken toe. Het testandtarget.js
-bestand bevat de functies mbox.js
. De HTML die het script genereert, is vergelijkbaar met het volgende voorbeeld:
<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>
Voeg onmiddellijk na de tag <body>
de volgende code toe om de kenmerken van de clientcontext aan de pagina toe te voegen:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
Voeg de volgende code direct vóór de eindtag </body>
toe:
<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
Het JSP manuscript van deze component produceert vraag aan het Doel javascript API en voert andere vereiste configuraties uit. De HTML die het script genereert, is vergelijkbaar met het volgende voorbeeld:
<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>
Als u geen DTM of een ander doelmarketingsysteem gebruikt, kunt u aangepaste doelbibliotheekbestanden gebruiken.
De vakken zijn standaard verborgen. De klasse mboxDefault bepaalt dit gedrag. Verborgen vakken zorgen ervoor dat bezoekers de standaardinhoud niet zien voordat deze wordt omgewisseld. het verbergen van vakken heeft echter invloed op waargenomen prestaties .
Het standaard mbox.js- dossier dat wordt gebruikt om dozen tot stand te brengen wordt gevestigd bij /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js
. Als u een bestand mbox.js van de klant wilt gebruiken, voegt u het bestand toe aan de configuratie van de doelcloud. Als u het bestand wilt toevoegen, moet het mbox.js
-bestand beschikbaar zijn op het bestandssysteem.
Bijvoorbeeld, als u de dienst van identiteitskaart van de Marketing Cloud wilt gebruiken moet u mbox.js downloaden zodat het de correcte waarde voor imsOrgID
variabele bevat, die op uw huurder gebaseerd is. Deze variabele wordt vereist voor het integreren met de dienst van identiteitskaart van de Marketing Cloud. Voor informatie, zie Adobe Analytics als Rapporterende Bron voor Adobe Target en Alvorens u uitvoert.
Als een aangepaste box in een doelconfiguratie is gedefinieerd, moet iedereen op publicatieservers lees-toegang hebben tot /etc/cloudservices. Zonder deze toegang leidt het laden van mbox.js-bestanden op de publicatiewebsite tot een fout van 404.
Uw doelconfiguratie bevat een aangepast bestand mbox.js. Met de vereiste code in de kopsectie van de pagina wordt het bestand toegevoegd aan het clientbibliotheekframework in plaats van een verwijzing naar de testandtarget.js-bibliotheek.
De meeste componenten kunnen in gerichte componenten worden omgezet gebruikend het bevel van het Doel op het contextmenu.
Als u de opdracht Doel uit het contextmenu wilt verwijderen, voegt u de volgende eigenschap toe aan het knooppunt cq:editConfig van de component:
cq:disableTargeting
Boolean
True
Bijvoorbeeld, om het richten voor de titelcomponenten van de pagina's van de Plaats van de Demo van de Geometrixx uit te schakelen, voeg het bezit aan /apps/geometrixx/components/title/cq:editConfig
knoop toe.
Als u DTM niet gebruikt, stuurt u een bevestiging van de bestelling naar Adobe Target.
Als u de prestaties van uw website wilt volgen, stuurt u aankoopgegevens van de bevestigingspagina van uw bestelling naar Adobe Target. (Zie Een orderConfirmPage Mbox maken in de documentatie van Adobe Target.) Adobe Target herkent mbox-gegevens als orderbevestigingsgegevens wanneer uw MBox-naam orderConfirmPage
is en gebruikt de volgende specifieke parameternamen:
De code op de weergegeven HTML-pagina die de mbox maakt, is vergelijkbaar met het volgende voorbeeld:
<script type="text/javascript">
mboxCreate('orderConfirmPage',
'productPurchasedId=product1 product2 product3',
'orderId=order1234',
'orderTotal=24.54');
</script>
De waarden van elke parameter zijn verschillend voor elke orde. Daarom hebt u een component nodig die de code genereert op basis van de eigenschappen van de aankoop. Met het CQ eCommerce Integration Framework kunt u integreren met uw productcatalogus en een winkelwagentje en afhandelingspagina implementeren.
In het voorbeeld Geometrixx Outdoors wordt de volgende bevestigingspagina weergegeven wanneer een bezoeker producten koopt:
De volgende code voor het JSP manuscript van een component heeft toegang tot de eigenschappen van het het winkelwagentje en drukt dan de code voor het creëren van mbox.
<%--
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>
Wanneer de component is opgenomen in de uitcheckpagina in het vorige voorbeeld, bevat de paginabron het volgende script waarmee het selectievakje wordt gemaakt:
<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>
Met de component Target kunnen auteurs dynamische vakken maken op basis van CQ-inhoudscomponenten. (Zie Inhoudsgericht.) De doelcomponent bevindt zich op /libs/cq/personalization/components/target.
Het target.jsp manuscript toegang tot de paginaeigenschappen om de het richten motor te bepalen voor de component te gebruiken, en voert dan het aangewezen manuscript uit:
/libs/cq/personalization/components/target/engine_tnt.jsp
/libs/cq/personalization/components/target/engine_atjs.jsp
/libs/cq/personalization/components/target/engine_cq_campaign.jsp
/libs/cq/personalization/components/target/engine_cq.jsp
De vakken zijn standaard verborgen. De klasse mboxDefault bepaalt dit gedrag. Verborgen vakken zorgen ervoor dat bezoekers de standaardinhoud niet zien voordat deze wordt omgewisseld. het verbergen van vakken heeft echter invloed op waargenomen prestaties .
Als Adobe Target de doelinhoud aanstuurt, maakt het script engine_tnt.jsp vakken die de inhoud van de beoogde ervaring bevatten:
Voegt een div
element met de klasse van mboxDefault
, zoals vereist door Adobe Target API toe.
Voegt de inhoud van de box (de inhoud van de beoogde ervaring) toe binnen het element div
.
Na het div-element mboxDefault
wordt het javascript waarmee de mbox wordt gemaakt, ingevoegd:
Hier volgen de beschikbare clientlib-categorieën:
testandtarget.mbox
testandtarget.init
testandtarget.util
testandtarget.atjs
testandtarget.atjs-integration