Sviluppo per contenuti mirati developing-for-targeted-content
Questa sezione descrive argomenti sullo sviluppo di componenti da utilizzare con il targeting dei contenuti.
- Per informazioni sulla connessione con Adobe Target, vedi Integrazione Con Adobe Target.
- Per informazioni sulla creazione di contenuti mirati, consulta Creazione di contenuti mirati tramite la modalità di targeting.
Abilitazione del targeting con Adobe Target nelle pagine enabling-targeting-with-adobe-target-on-your-pages
Per utilizzare nelle pagine componenti di destinazione che interagiscono con Adobe Target, includi nel <head>
elemento.
Sezione testa the-head-section
Aggiungi entrambi i seguenti blocchi di codice al <head> sezione della pagina:
<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
Questo codice aggiunge gli oggetti javascript di analytics richiesti e carica le librerie dei servizi cloud associate al sito web. Per il servizio Target, le librerie vengono caricate tramite /libs/cq/analytics/components/testandtarget/headlibs.jsp
Il set di librerie caricato dipende dal tipo di libreria client target (mbox.js o at.js) utilizzata nella configurazione di Target:
Per mbox.js predefinito
<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>
Per mbox.js personalizzato
<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>
Per at.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>
at.js
fornito con il prodotto è supportato. Versione di at.js
spedito con il prodotto può essere ottenuto guardando il at.js
file in posizione /etc/clientlibs/foundation/testandtarget/atjs/source/at.js
.Per at.js personalizzato
<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>
La funzionalità di Target sul lato client viene gestita dal CQ_Analytics.TestTarget
oggetto. Pertanto, la pagina conterrà un codice init, come nell’esempio seguente:
<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>
Il JSP aggiunge gli oggetti JavaScript di analisi richiesti e i riferimenti alle librerie javascript lato client. La testandtarget.js
il file contiene mbox.js
funzioni. Il HTML generato dallo script è simile al seguente:
<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>
Sezione corpo (inizio) the-body-section-start
Aggiungi il codice seguente immediatamente dopo il <body>
per aggiungere alla pagina le funzioni ClientContext:
<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>
Sezione corpo (fine) the-body-section-end
Aggiungi il codice seguente immediatamente prima del </body>
tag finale:
<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>
Lo script JSP di questo componente genera chiamate all’API javascript di Target e implementa altre configurazioni richieste. Il HTML generato dallo script è simile al seguente:
<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>
Utilizzo di un file di libreria di Target personalizzato using-a-custom-target-library-file
Il file mbox.js predefinito utilizzato per creare mbox si trova in /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js
. Per utilizzare un file mbox.js del cliente, aggiungi il file alla configurazione cloud di Target. Per aggiungere il file, mbox.js
il file deve essere disponibile nel file system.
Ad esempio, se desideri utilizzare il Servizio ID Marketing Cloud devi scaricare mbox.js in modo che contenga il valore corretto per la imsOrgID
, basata sul tenant. Questa variabile è necessaria per l'integrazione con il servizio ID Marketing Cloud. Per informazioni, consulta Adobe Analytics come origine per la generazione di rapporti per Adobe Target e Prima dell’implementazione.
- Vai a CQ Strumenti e seleziona Cloud Services. (http://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
- Nella struttura, seleziona Adobe Target e fai doppio clic sulla configurazione di Target nell’elenco delle configurazioni.
- Nella pagina di configurazione, fai clic su Modifica.
- Per la proprietà Custom mbox.js , fai clic su Sfoglia e seleziona il file .
- Per applicare le modifiche, immetti la password del tuo account Adobe Target, fai clic su Riconnetti a Target e fai clic su OK quando la connessione ha esito positivo. Quindi fare clic su OK nella finestra di dialogo Modifica componente.
La configurazione di Target include un file mbox.js personalizzato, il codice richiesto nella sezione head della pagina aggiunge il file al framework della libreria client anziché un riferimento alla libreria testandtarget.js .
Disabilitazione del comando Target per i componenti disabling-the-target-command-for-components
La maggior parte dei componenti può essere convertita in componenti di destinazione utilizzando il comando Target nel menu di scelta rapida.
Per rimuovere il comando Target dal menu di scelta rapida, aggiungi la seguente proprietà al nodo cq:editConfig del componente:
- Nome:
cq:disableTargeting
- Tipo:
Boolean
- Valore:
True
Ad esempio, per disabilitare il targeting per i componenti titolo delle pagine di Geometrixx Demo Site, aggiungi la proprietà al /apps/geometrixx/components/title/cq:editConfig
nodo.
Invio di informazioni di conferma dell’ordine ad Adobe Target sending-order-confirmation-information-to-adobe-target
Per tenere traccia delle prestazioni del sito web, invia ad Adobe Target le informazioni di acquisto dalla pagina di conferma dell’ordine. (Vedi Creare una mbox orderConfirmPage nella documentazione di Adobe Target.) Adobe Target riconosce i dati mbox come dati di conferma dell'ordine quando il nome della MBox è orderConfirmPage
e utilizza i seguenti nomi di parametro specifici:
- productPurchasedId: Elenco di ID che identificano i prodotti acquistati.
- orderId: ID dell'ordine.
- orderTotal: Importo totale dell'acquisto.
Il codice sulla pagina HTML renderizzata che crea la mbox è simile al seguente:
<script type="text/javascript">
mboxCreate('orderConfirmPage',
'productPurchasedId=product1 product2 product3',
'orderId=order1234',
'orderTotal=24.54');
</script>
I valori di ciascun parametro sono diversi per ciascun ordine. Pertanto, è necessario un componente che generi il codice in base alle proprietà dell’acquisto. CQ Framework di integrazione di eCommerce consente di integrarsi con il catalogo dei prodotti e implementare un carrello e una pagina di pagamento.
L’esempio di Geometrixx Outdoors mostra la seguente pagina di conferma quando un visitatore acquista prodotti:
Il codice seguente per lo script JSP di un componente accede alle proprietà del carrello e quindi stampa il codice per la creazione della 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>
Quando il componente è incluso nella pagina di pagamento dell’esempio precedente, l’origine pagina include il seguente script che crea la 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>
Informazioni sul componente Target understanding-the-target-component
Il componente Target consente agli autori di creare mbox dinamiche dai componenti di contenuto CQ. (Vedi Targeting dei contenuti.) Il componente Target si trova in /libs/cq/personalization/components/target.
Lo script target.jsp accede alle proprietà della pagina per determinare il motore di destinazione da utilizzare per il componente, quindi esegue lo script appropriato:
- Adobe Target:
/libs/cq/personalization/components/target/engine_tnt.jsp
- Adobe Target con AT.JS:
/libs/cq/personalization/components/target/engine_atjs.jsp
- Adobe Campaign:
/libs/cq/personalization/components/target/engine_cq_campaign.jsp
- Regole lato client/ContextHub:
/libs/cq/personalization/components/target/engine_cq.jsp
Creazione di mbox the-creation-of-mboxes
Quando Adobe Target guida il targeting del contenuto, lo script engine_tnt.jsp crea mbox che contengono il contenuto dell'esperienza di destinazione:
-
Aggiunge un
div
con la classe dimboxDefault
, come richiesto dall’API di Adobe Target. -
Aggiunge il contenuto mbox (il contenuto dell’esperienza di destinazione) all’interno di
div
elemento.
Seguendo mboxDefault
l’elemento div, il codice javascript che crea la mbox viene inserito:
- Il nome mbox, l’ID e la posizione si basano sul percorso dell’archivio del componente.
- Lo script ottiene i nomi e i valori dei parametri Client Context.
- Vengono effettuate chiamate alle funzioni definite da mbox.js e da altre librerie client per creare mbox.
Librerie client per il targeting dei contenuti client-libraries-for-content-targeting
Di seguito sono riportate le categorie clientlib disponibili:
testandtarget.mbox
testandtarget.init
testandtarget.util
testandtarget.atjs
testandtarget.atjs-integration