I det här avsnittet beskrivs ämnen om utveckling av komponenter för användning med målinriktning mot innehåll.
När du riktar in dig på en komponent i AEM författare gör komponenten ett antal serveranrop till Adobe Target för att registrera kampanjen, konfigurera erbjudanden och hämta Adobe Target-segment (om de är konfigurerade). Inga serversamtal görs från AEM publicera till Adobe Target.
Om du vill använda riktade komponenter på dina sidor som interagerar med Adobe Target, ska du inkludera specifik klientkod i <head> -element.
Lägg till båda följande kodblock i <head> på sidan:
<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
Den här koden lägger till de nödvändiga JavaScript-analysobjekten och läser in molntjänstbiblioteken som är kopplade till webbplatsen. För måltjänsten läses biblioteken in via /libs/cq/analytics/components/testandtarget/headlibs.jsp
Den inlästa biblioteksuppsättningen beror på vilken typ av målklientbibliotek (mbox.js eller at.js) som används i målkonfigurationen:
Som standard 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 anpassad 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>
For 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>
Endast versionen av at.js
som levereras med produkten stöds. Versionen av at.js
som levereras med produkten kan du få genom att titta på at.js
fil på plats:
/libs/cq/testandtarget/clientlibs/testandtarget/atjs/source/at.js.
För anpassad 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>
Target-funktionen på klientsidan hanteras av CQ_Analytics.TestTarget
-objekt. Därför kommer sidan att innehålla init-kod som i följande exempel:
<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 lägger till de nödvändiga JavaScript-analysobjekten och referenserna i javascript-bibliotek på klientsidan. Filen testandtarget.js innehåller funktionerna mbox.js. HTML som skriptet genererar liknar följande exempel:
<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>
Lägg till följande kod omedelbart efter <body> tagg för att lägga till klientkontextfunktioner på sidan:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
Lägg till följande kod omedelbart före </body> sluttagg:
<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
JSP-skriptet för den här komponenten genererar anrop till Target javascript API och implementerar andra nödvändiga konfigurationer. HTML som skriptet genererar liknar följande exempel:
<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>
Om du inte använder DTM eller något annat målmarknadsföringssystem kan du använda anpassade målbiblioteksfiler.
Som standard är rutor dolda - klassen mboxDefault bestämmer detta beteende. Genom att dölja kryssrutor kan besökarna inte se standardinnehållet innan det byts ut. Men om du döljer lådor påverkas upplevda prestanda.
Standardfilen mbox.js som används för att skapa mbox finns på /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js. Om du vill använda filen mbox.js för en kund lägger du till filen i molnkonfigurationen för Target. Om du vill lägga till filen måste filen mbox.js vara tillgänglig i filsystemet.
Om du till exempel vill använda Marketing Cloud ID-tjänst du behöver ladda ned mbox.js så att den innehåller rätt värde för imsOrgID
variabel, som baseras på din klient. Den här variabeln krävs för integrering med Marketing Cloud ID-tjänsten. Mer information finns i Adobe Analytics som rapportkälla för Adobe Target och Innan du implementerar.
Om en anpassad mbox definieras i en målkonfiguration måste alla ha läsåtkomst till /etc/cloudServices på publiceringsservrar. Utan den här åtkomsten uppstår ett 404-fel när mbox.js-filer läses in på publiceringswebbplatsen.
Målkonfigurationen innehåller en anpassad mbox.js-fil, den kod som krävs i huvudsektionen på sidan lägger till filen i klientbibliotekets ramverk i stället för en referens till biblioteket testandtarget.js.
De flesta komponenter kan konverteras till målkomponenter med hjälp av kommandot Mål på snabbmenyn.
Om du vill ta bort kommandot Target från snabbmenyn lägger du till följande egenskap i cq:editConfig-noden för komponenten:
Om du till exempel vill inaktivera mål för titelkomponenterna på Geometrixx demowebbplatssidor lägger du till egenskapen i noden /apps/geometrixx/components/title/cq:editConfig.
Om du inte använder DTM skickar du en orderbekräftelse till Adobe Target.
Om du vill följa upp hur webbplatsen fungerar skickar du inköpsinformation från orderbekräftelsesidan till Adobe Target. (Se Skapa en orderConfirmPage Mbox och Mbox för orderbekräftelse - Lägg till anpassade parametrar.) Adobe Target känner igen mbox-data som orderbekräftelsedata när ditt MBox-namn är orderConfirmPage
och använder följande specifika parameternamn:
Koden på den återgivna HTML-sidan som skapar mbox liknar följande exempel:
<script type="text/javascript">
mboxCreate('orderConfirmPage',
'productPurchasedId=product1 product2 product3',
'orderId=order1234',
'orderTotal=24.54');
</script>
Värdena för varje parameter är olika för varje ordning. Därför behöver du en komponent som genererar koden baserat på inköpets egenskaper. CQ eCommerce Integration Framework gör att du kan integrera med din produktkatalog och implementera en kundvagn- och utcheckningssida.
I exemplet på Geometrixx Outdoors visas följande bekräftelsesida när en besökare köper produkter:
Följande kod för JSP-skriptet för en komponent öppnar egenskaperna för kundvagnen och skriver sedan ut koden för att skapa 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>
När komponenten inkluderas på utcheckningssidan i föregående exempel innehåller sidkällan följande skript som skapar mbox:
<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>
Med Target-komponenten kan författare skapa dynamiska rutor från CQ-innehållskomponenter. (Se Målinriktat innehåll.) Målkomponenten finns på /libs/cq/personalization/components/target.
Skriptet target.jsp får åtkomst till sidegenskaperna för att avgöra vilken målmotor som ska användas för komponenten och kör sedan rätt skript:
Som standard är rutor dolda - klassen mboxDefault bestämmer detta beteende. Genom att dölja kryssrutor kan besökarna inte se standardinnehållet innan det byts ut. Men om du döljer lådor påverkas upplevda prestanda.
När Adobe Target skapar innehåll för målinriktning skapar skriptet engine_tnt.jsp mbox som innehåller innehållet i målupplevelsen:
Lägger till en div
element med klassen mboxDefault
, enligt kraven i Adobe Target API.
Lägger till innehållet i mbox (innehållet i målupplevelsen) inuti div
-element.
Efter mboxDefault
div-element infogas det javascript som skapar mbox:
Följande är tillgängliga clientlib-kategorier: