針對目標內容開發

本節說明有關開發元件以搭配內容定位的主題。

如需連線Adobe Target的相關資訊，請參閱與Adobe Target整合。
如需製作目標內容的相關資訊，請參閱使用目標模式製作目標內容。

注意

當您在AEM作者中定位元件時，元件會向Adobe Target發出一系列伺服器端呼叫，以註冊促銷活動、設定選件及擷取Adobe Target區段（如果已設定）。不會從AEM發佈至Adobe Target進行伺服器端呼叫。

在您的頁面上使用Adobe Target啟用定位

若要在與Adobe Target互動的頁面中使用目標元件，請在<head>元素中包含特定的用戶端代碼。

頭部

將下列兩個程式碼區塊新增至頁面的<head>區段：

<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>

此程式碼會新增所需的analytics javascript物件，並載入與網站相關聯的雲端服務程式庫。若為Target服務，程式庫會透過/libs/cq/analytics/components/testandtarget/headlibs.jsp載入

載入的程式庫集取決於Target設定上使用的目標用戶端程式庫（mbox.js或at.js）類型：

針對預設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>

針對自訂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>

針對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版本。查看位於/etc/clientlibs/foundation/testandtarget/atjs/source/at.js的at.js檔案，可獲得產品附帶的at.js版本。

針對自訂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>

用戶端上的Target功能由CQ_Analytics.TestTarget物件管理。因此，頁面將包含一些init程式碼，如下列範例：

<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會將所需的analytics javascript物件和參考新增至用戶端javascript程式庫。 testandtarget.js檔案包含mbox.js函式。指令碼產生的HTML類似於以下範例：

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

正文部分（開始）

在<body>標籤後面加上下列程式碼，將用戶端內容功能新增至頁面：

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

正文部分（結尾）

在</body>結束標籤前面加上下列程式碼：

<cq:include path="cloudservices" resourceType="cq/cloudserviceconfigs/components/servicecomponents"/>

此元件的JSP指令碼會產生對Target javascript API的呼叫，並實作其他必要的設定。指令碼產生的HTML類似於以下範例：

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

使用自訂Target程式庫檔案

注意

如果您未使用DTM或其他目標行銷系統，則可使用自訂目標程式庫檔案。

注意

依預設，會隱藏mbox - mboxDefault類別會決定此行為。隱藏mbox可確保訪客在交換預設內容之前不會看到該內容；不過，隱藏mbox會影響感知的效能。

用於建立mbox的預設mbox.js檔案位於/etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js。若要使用客戶mbox.js檔案，請將檔案新增至Target雲端設定。若要新增檔案，檔案系統上必須有mbox.js檔案。

例如，如果您想使用Marketing CloudID服務，則需要下載mbox.js，使其包含以您的租用戶為基礎之imsOrgID變數的正確值。若要與Marketing CloudID服務整合，此變數為必要項目。如需詳細資訊，請參閱Adobe Analytics作為Adobe Target和實作之前的報表來源。

注意

如果在Target設定中定義了自訂mbox，則每個人都必須擁有發佈伺服器上**/etc/cloudservices**的讀取存取權。若無此存取權，在發佈的網站上載入mbox.js檔案會產生404錯誤。

前往CQ 工具頁面，然後選取Cloud Services。 (http://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
在樹狀結構中，選取Adobe Target，然後在設定清單中，連按兩下您的Target設定。
在設定頁面上，按一下「編輯」。
若為自訂mbox.js屬性，請按一下「瀏覽」並選取檔案。
若要套用變更，請輸入Adobe Target帳戶的密碼，按一下重新連線至Target，然後在連線成功時按一下確定。然後，在「編輯元件」(Edit Component)對話框中按一下「確定」(OK)。

您的Target設定包含自訂mbox.js檔案，頁面標題區段中的必要程式碼會將檔案新增至用戶端程式庫架構，而非testandtarget.js程式庫的參考。

禁用元件的目標命令

大部分元件都可使用內容功能表上的Target命令轉換為目標元件。

chlimage_1-173

若要從內容功能表移除Target命令，請將下列屬性新增至元件的cq:editConfig節點：

名稱: cq:disableTargeting
類型: Boolean
值: True

例如，要禁用Geometrixx演示網站頁的標題元件的定位，請將屬性添加到/apps/geometrixx/components/title/cq:editConfig節點。

chlimage_1-174

傳送訂單確認資訊至Adobe Target

注意

若您未使用DTM，請將訂單確認傳送至Adobe Target。

若要追蹤網站效能，請從訂單確認頁面傳送購買資訊至Adobe Target。 (請參閱Adobe Target檔案中的建立orderConfirmPage Mbox 。) 當您的MBox名稱為orderConfirmPage,Adobe Target會將mbox資料辨識為訂單確認資料，並使用下列特定參數名稱：

productPurchasedId:識別已購買產品的ID清單。
orderId:訂單ID。
orderTotal:購買的總金額。

呈現的HTML頁面上建立mbox的程式碼類似於下列範例：

<script type="text/javascript">
     mboxCreate('orderConfirmPage',
     'productPurchasedId=product1 product2 product3',
     'orderId=order1234',
     'orderTotal=24.54');
</script>

每個順序的每個參數值都不同。因此，您需要元件根據購買的屬性產生代碼。 CQ eCommerce Integration Framework可讓您與產品目錄整合，並實作購物車和結帳頁面。

Geometrixx Outdoors範例會在訪客購買產品時顯示下列確認頁面：

chlimage_1-175

元件的JSP指令碼的以下代碼訪問購物車的屬性，然後打印用於建立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>

在上一個範例的結帳頁面中包含元件時，頁面來源會包含下列指令碼，用以建立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>

了解目標元件

Target元件可讓作者從CQ內容元件建立動態mbox。（請參閱內容鎖定目標。） Target元件位於/libs/cq/personalization/components/target。

target.jsp指令碼訪問頁面屬性以確定要用於元件的目標引擎，然後執行相應的指令碼：

Adobe Target: /libs/cq/personalization/components/target/engine_tnt.jsp
Adobe Target搭配AT.JS: /libs/cq/personalization/components/target/engine_atjs.jsp
Adobe Campaign: /libs/cq/personalization/components/target/engine_cq_campaign.jsp
用戶端規則/ContextHub:/libs/cq/personalization/components/target/engine_cq.jsp

Mbox的建立

注意

依預設，會隱藏mbox - mboxDefault類別會決定此行為。隱藏mbox可確保訪客在交換預設內容之前不會看到該內容；不過，隱藏mbox會影響感知的效能。

當Adobe Target驅動內容目標定位時，engine_tnt.jsp指令碼會建立包含目標體驗內容的mbox:

根據Adobe Target API的要求，新增div類別mboxDefault的元素。
在div元素內新增mbox內容（目標體驗的內容）。

在mboxDefault div元素後，會插入建立mbox的javascript:

mbox名稱、ID和位置以元件的存放庫路徑為基礎。
指令碼獲取客戶端上下文參數名稱和值。
會呼叫mbox.js和其他用戶端程式庫所定義的函式，以建立mbox。

用於內容定位的客戶端庫

以下是可用的clientlib類別：

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

adobe.com 上的資源

Cms Cloud Targeted Content Managed Cloud Dynamic Media Digital Asset Management Digital Signage

針對目標內容開發

在您的頁面上使用Adobe Target啟用定位

頭部

正文部分（開始）

正文部分（結尾）

使用自訂Target程式庫檔案

禁用元件的目標命令

傳送訂單確認資訊至Adobe Target

了解目標元件

Mbox的建立

用於內容定位的客戶端庫

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe