本節說明有關開發元件以搭配內容定位的主題。
當您在AEM作者中定位元件時,元件會向Adobe Target發出一系列伺服器端呼叫,以註冊促銷活動、設定選件及擷取Adobe Target區段(如果已設定)。 不會從AEM發佈至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>
如果您未使用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錯誤。
您的Target設定包含自訂mbox.js檔案,頁面標題區段中的必要程式碼會將檔案新增至用戶端程式庫架構,而非testandtarget.js程式庫的參考。
大部分元件都可使用內容功能表上的Target命令轉換為目標元件。
若要從內容功能表移除Target命令,請將下列屬性新增至元件的cq:editConfig節點:
cq:disableTargeting
Boolean
True
例如,要禁用Geometrixx演示網站頁的標題元件的定位,請將屬性添加到/apps/geometrixx/components/title/cq:editConfig
節點。
若您未使用DTM,請將訂單確認傳送至Adobe Target。
若要追蹤網站效能,請從訂單確認頁面傳送購買資訊至Adobe Target。 (請參閱Adobe Target檔案中的建立orderConfirmPage Mbox 。) 當您的MBox名稱為orderConfirmPage
,Adobe Target會將mbox資料辨識為訂單確認資料,並使用下列特定參數名稱:
呈現的HTML頁面上建立mbox的程式碼類似於下列範例:
<script type="text/javascript">
mboxCreate('orderConfirmPage',
'productPurchasedId=product1 product2 product3',
'orderId=order1234',
'orderTotal=24.54');
</script>
每個順序的每個參數值都不同。 因此,您需要元件根據購買的屬性產生代碼。 CQ eCommerce Integration Framework可讓您與產品目錄整合,並實作購物車和結帳頁面。
Geometrixx Outdoors範例會在訪客購買產品時顯示下列確認頁面:
元件的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指令碼訪問頁面屬性以確定要用於元件的目標引擎,然後執行相應的指令碼:
/libs/cq/personalization/components/target/engine_tnt.jsp
/libs/cq/personalization/components/target/engine_atjs.jsp
/libs/cq/personalization/components/target/engine_cq_campaign.jsp
/libs/cq/personalization/components/target/engine_cq.jsp
依預設,會隱藏mbox - mboxDefault類別會決定此行為。 隱藏mbox可確保訪客在交換預設內容之前不會看到該內容;不過,隱藏mbox會影響感知的效能。
當Adobe Target驅動內容目標定位時,engine_tnt.jsp指令碼會建立包含目標體驗內容的mbox:
根據Adobe Target API的要求,新增div
類別mboxDefault
的元素。
在div
元素內新增mbox內容(目標體驗的內容)。
在mboxDefault
div元素後,會插入建立mbox的javascript:
以下是可用的clientlib類別:
testandtarget.mbox
testandtarget.init
testandtarget.util
testandtarget.atjs
testandtarget.atjs-integration