为目标内容进行开发

本节介绍有关开发组件以用于内容定位的主题。

注意

当您在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?lang=zh-Hans"/>

此代码添加所需的分析javascript对象并加载与网站关联的云服务库。 对于目标服务,库通过/libs/cq/analytics/components/testandtarget/headlibs.jsp加载

加载的库集取决于目标配置上使用的目标客户端库(mbox.js或at.js)的类型:

对于默认mbox.js

<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/mbox.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js?lang=zh-Hans"></script>

对于自定义mbox.js

<script type="text/javascript" src="/etc/cloudservices/testandtarget/%3CCLIENT-CODE%3E/_jcr_content/public/mbox.js?lang=zh-Hans"></script>
        <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/personalization/integrations/commons.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/util.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/init.js?lang=zh-Hans"></script>

for at.js

<script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs.js?lang=zh-Hans"></script>
注意

仅支持随产品提供的at.js版本。 产品附带的at.js版本可通过查看位置的at.js文件获得:

/libs/cq/testandtarget/clientlibs/testandtarget/atjs/source/at.js

对于自定义at.js

<script type="text/javascript" src="/etc/cloudservices/testandtarget/%3CCLIENT-CODE%3E/_jcr_content/public/at.js?lang=zh-Hans"></script>
    <script type="text/javascript" src="/libs/cq/foundation/testandtarget/parameters.js?lang=zh-Hans"></script>
 <script type="text/javascript" src="/libs/cq/foundation/testandtarget/atjs-integration.js?lang=zh-Hans"></script>

客户端上的目标功能由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会添加所需的分析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?lang=zh-Hans" type="text/css">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/testandtarget.js?lang=zh-Hans"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js?lang=zh-Hans"></script>

正文部分(开始)

在<body>标记后面添加以下代码,将Client Context功能添加到页面:

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

正文部分(结尾)

在</body>结束标记前添加以下代码:

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

此组件的JSP脚本生成对目标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文件,请将该文件添加到目标云配置。 要添加文件,mbox.js文件必须在文件系统上可用。

例如,如果要使用Marketing CloudID服务,您需要下载mbox.js,以便它包含imsOrgID变量的正确值,该值基于您的租户。 此变量是与Marketing CloudID服务集成时必需的。 有关信息,请参阅Adobe Analytics作为Adobe Target实施前的报告源。

注意

如果在目标配置中定义了自定义mbox,则每个人都必须具有对发布服务器上的​**/etc/cloudservices**​的读取访问权限。 如果没有此访问权限,则在发布网站上加载mbox.js文件将导致404错误。

  1. 转到CQ 工具​页面并选择​Cloud Services。 (https://localhost:4502/libs/cq/core/content/tools/cloudservices.html)
  2. 在树中,选择Adobe Target,在配置列表中,多次单击您的目标配置。
  3. 在配置页面上,单击编辑。
  4. 对于“自定义mbox.js”属性,单击“浏览”并选择文件。
  5. 要应用更改,请输入您的Adobe Target帐户的口令,单击“重新连接到目标”,然后在连接成功时单击“确定”。 然后,在“编辑组件”对话框中单击“确定”。

您的目标配置包含一个自定义mbox.js文件,页面标题部分中所需的代码会将该文件添加到客户端库框架,而不是对testandtarget.js库的引用。

禁用组件的目标命令

大多数组件都可以使用上下文菜单上的目标命令转换为目标组件。

chlimage_1-21

要从上下文菜单中删除目标命令,请将以下属性添加到组件的cq:editConfig节点:

  • 名称:cq:disableTargeting
  • 类型:布尔型
  • 值:True

例如,要禁用Geometrixx演示站点页面的标题组件的定位,请将属性添加到/apps/geometrixx/components/title/cq:editConfig节点。

chlimage_1-22

向Adobe Target发送订单确认信息

注意

如果您没有使用DTM,请向Adobe Target发送订单确认。

要跟踪网站性能,请从订单确认页面向Adobe Target发送购买信息。 (请参阅Adobe Target文档中的创建orderConfirmPage Mbox。) Adobe Target将mbox数据识别为订单确认数据,当您的MBox名称为orderConfirmPage时,它使用以下特定参数名称:

  • productPurchasedId:标识所购买产品的列表ID。
  • orderId:订单的ID。
  • orderTotal:购买的总额。

呈现的HTML页面上用于创建mbox的代码与以下示例类似:

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

每个顺序的每个参数的值都不同。 因此,您需要一个组件,它根据购买的属性生成代码。 CQ 电子商务集成框架允许您与产品目录集成并实施购物车和结帐页面。

Geometrixx Outdoors示例在访客购买产品时显示以下确认页:

chlimage_1-23

组件的JSP脚本的以下代码访问购物车的属性,然后打印创建mbox的代码。

<%--

  confirmationmbox component.

--%><%
%><%@include file="/libs/foundation/global.jsp?lang=zh-Hans"%><%
%><%@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>

了解目标组件

目标组件使作者能够从CQ内容组件创建动态mbox。 (请参阅内容定位。) 目标组件位于/libs/cq/personalization/components/目标。

目标.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 TargetAPI的要求,添加类为mboxDefaultdiv元素。

  • div元素中添加mbox内容(目标体验的内容)。

mboxDefault div元素后,将插入创建mbox的javascript:

  • mbox名称、ID和位置基于组件的存储库路径。
  • 脚本获取Client Context参数名称和值。
  • 将调用mbox.js和其他客户端库定义的用于创建mbox的函数。

内容定位的客户端库

以下是可用的clientlib类别:

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now