Utveckla för riktat innehåll developing-for-targeted-content

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:
Utveckling

Skapat för:

Utvecklare

I det här avsnittet beskrivs ämnen om utveckling av komponenter för användning med målinriktning mot innehåll.

Mer information om hur du ansluter med Adobe Target finns i Integrera med Adobe Target.
Mer information om att skapa riktat innehåll finns i Skapa riktat innehåll med målläge.

NOTE

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 anrop på serversidan görs från AEM publicera till Adobe Target.

Aktivera anpassning med Adobe Target på dina sidor enabling-targeting-with-adobe-target-on-your-pages

Om du vill använda målkomponenter på dina sidor som interagerar med Adobe Target, ska du inkludera specifik klientkod i <head>-elementet.

Huvudsektionen the-head-section

Lägg till båda följande kodblock i <head>-avsnittet 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:

För 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>

NOTE

Endast den version av at.js som levererades med produkten stöds. Versionen av at.js som levererades med produkten kan hämtas genom att du tittar på filen at.js på platsen:

/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>

Målfunktionen på klientsidan hanteras av objektet CQ_Analytics.TestTarget. 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>

The body Section (start) the-body-section-start

Lägg till följande kod omedelbart efter <body>-taggen för att lägga till klientkontextfunktionerna på sidan:

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

The body Section (end) the-body-section-end

Lägg till följande kod omedelbart före </body>-sluttaggen:

<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>

Använda en anpassad målbiblioteksfil using-a-custom-target-library-file

NOTE

Om du inte använder DTM eller något annat målmarknadsföringssystem kan du använda anpassade målbiblioteksfiler.

NOTE

Som standard är rutor dolda - klassen mboxDefault bestämmer detta beteende. Genom att dölja kryssrutor kan besökare inte se standardinnehållet innan det byts ut, men om du döljer kryssrutor påverkas den upplevda prestandan.

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 tjänsten Marketing Cloud ID måste du hämta mbox.js så att den innehåller rätt värde för variabeln imsOrgID som baseras på din klientorganisation. Den här variabeln krävs för integrering med Marketing Cloud ID-tjänsten. Mer information finns i Adobe Analytics som Reporting Source för Adobe Target och Innan du implementerar.

NOTE

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.

Gå till CQ-sidan Verktyg och välj Cloud Service. (https://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
Välj Adobe Target i trädet och dubbelklicka på målkonfigurationen i listan över konfigurationer.
Klicka på Redigera på konfigurationssidan.
För egenskapen Custom mbox.js klickar du på Browse och väljer filen.
Om du vill använda ändringarna anger du lösenordet för ditt Adobe Target-konto, klickar på Anslut till mål igen och klickar på OK när anslutningen lyckas. Klicka sedan på OK i dialogrutan Redigera komponent.

Målkonfigurationen innehåller en anpassad mbox.js-fil, den nödvändiga koden i huvudsektionen på sidan lägger till filen i klientbibliotekets ramverk i stället för en referens till biblioteket testandtarget.js.

Inaktivera målkommandot för komponenter disabling-the-target-command-for-components

De flesta komponenter kan konverteras till målkomponenter med hjälp av kommandot Mål på snabbmenyn.

chlimage_1-21

Om du vill ta bort kommandot Target från snabbmenyn lägger du till följande egenskap i cq:editConfig-noden för komponenten:

Namn: cq:disableTargeting
Typ: Boolean
Värde: Sant

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.

chlimage_1-22

Skicka orderbekräftelseinformation till Adobe Target sending-order-confirmation-information-to-adobe-target

NOTE

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 Order Confirmation Mbox - 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:

productPurchasedId: En lista med ID:n som identifierar de köpta produkterna.
orderId: Orderns ID.
orderTotal: Det totala beloppet för inköpet.

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:

chlimage_1-23

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>

Förstå målkomponenten understanding-the-target-component

Med Target-komponenten kan författare skapa dynamiska rutor från CQ-innehållskomponenter. (Se Innehållsmål.) 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:

Adobe Target: /libs/cq/personalization/components/target/engine_tnt.jsp
Adobe Target med AT.JS: /libs/cq/personalization/components/target/engine_atjs.jsp
Adobe Campaign: /libs/cq/personalization/components/target/engine_cq_campaign.jsp
Regler för klientsidan/ContextHub: /libs/cq/personalization/components/target/engine_cq.jsp

Skapa Mboxes the-creation-of-mboxes

NOTE

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 ett div-element med klassen mboxDefault, vilket krävs av Adobe Target API.
Lägger till mbox-innehållet (innehållet i målupplevelsen) inuti elementet div.

Efter div-elementet mboxDefault infogas det javascript som skapar mbox:

Rutans namn, ID och plats baseras på komponentens databassökväg.
Skriptet hämtar namn och värden för klientkontextparametrar.
Anrop görs till de funktioner som mbox.js och andra klientbibliotek definierar för att skapa mbox-filer.

Klientbibliotek för målanpassning av innehåll client-libraries-for-content-targeting

Följande är tillgängliga clientlib-kategorier:

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

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2