Utveckla för riktat innehåll

Senaste uppdatering: 2023-04-18
  • Skapat för:
  • Developer

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

OBSERVERA

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.

Aktivera anpassning med Adobe Target på dina sidor

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

Huvudsektionen

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

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>

The body Section (start)

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

The body Section (end)

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>

Använda en anpassad målbiblioteksfil

OBSERVERA

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

OBSERVERA

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.

OBSERVERA

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.

  1. Gå till CQ verktyg sida och markera Cloud Services. (https://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
  2. Välj Adobe Target i trädet och dubbelklicka på målkonfigurationen i listan över konfigurationer.
  3. Klicka på Redigera på konfigurationssidan.
  4. För egenskapen Custom mbox.js klickar du på Browse och väljer filen.
  5. 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 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.

Inaktivera målkommandot för komponenter

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

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

OBSERVERA

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:

  • productPurchasedId: En lista med ID:n som identifierar de köpta produkterna.
  • orderId: Orderns ID.
  • orderTotal: Det totala beloppet för kö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

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:

  • 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/ContextHub på klientsidan: /libs/cq/personalization/components/target/engine_cq.jsp

Skapa Mboxes

OBSERVERA

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:

  • Rutans namn, ID och plats baseras på komponentens databassökväg.
  • Skriptet hämtar parameternamn 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

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

  • testandtarget.mbox
  • testandtarget.init
  • testandtarget.util
  • testandtarget.atjs
  • testandtarget.atjs-integration
Föregående sida
Next page

På denna sida