U bekijkt help-inhoud voor de versie::

This section describes topics about developing components for use with content targeting.


When you target a component in AEM author, the component makes a series of server-side calls to Adobe Target to register the campaign, set up offers, and retrieve Adobe Target segments (if configured). No server-side calls are made from AEM publish to Adobe Target.

Enabling Targeting with Adobe Target On Your Pages

To use targeted components in your pages that interact with Adobe Target, include specific client-side code in the <head> and <body> elements.

The head Section

Add the following code to the <head> section of your page:


<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>


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

The JSP adds the required analytics javascript objects and references to client-side javascript libraries. The testandtarget.js file contains the mbox.js functions. The HTML that the script generates is similar to the following example:

<script type="text/javascript">
        if ( !window.CQ_Analytics ) {
            window.CQ_Analytics = {};
        if ( !CQ_Analytics.TestTarget ) {
            CQ_Analytics.TestTarget = {};
        CQ_Analytics.TestTarget.clientCode = 'MyClientCode';
<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)

Add the following code immediately following the <body> tag to add the client context features to the page:

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

The body Section (end)

Add the following code immediately before the </body> end tag:

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

The JSP script of this component generates calls to the Target javascript API and implements other required configurations. The HTML that the script generates is similar to the following example:

<div class="servicecomponents cloudservices">
  <div class="cloudservice testandtarget">
    <script type="text/javascript">
      CQ_Analytics.TestTarget.maxProfileParams = 11;
      CQ_Analytics.CCM.addListener("storesinitialize", function(e) {
    <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>
    <script type="text/javascript">
      if( CQ_Analytics &&
          CQ_Analytics.ClientContextMgr &&
          !CQ_Analytics.ClientContextMgr.isConfigLoaded ) 

Using a Custom Target library file


If you are not using DTM or another target marketing system, you can use custom target library files.

The default mbox.js file that is used to create mboxes is located at /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js. To use a customer mbox.js file, add the file to the Target cloud configuration. To add the file, the mbox.js file must be available on the file system.

For example, if you want to use the Marketing Cloud ID service you need to download mbox.js so that it contains the correct value for the imsOrgID variable, which is based on your tenant. This variable is required for integrating with the Marketing Cloud ID service. For information, see Adobe Analytics as the Reporting Source for Adobe Target and Before You Implement.


If a custom mbox is defined in a Target configuration, everyone must have read access to /etc/cloudservices on publish servers. Without this access, loading mbox.js files on publish website results in a 404 error. 

  1. Go to the CQ Tools page and select Cloud Services. (http://localhost:4502/libs/cq/core/content/tools/cloudservices.html)

  2. In the tree, select Adobe Target, and in the list of configurations, double-click your Target configuration.

  3. On the configuration page, click Edit.

  4. For the Custom mbox.js property, click Browse and select the file.

  5. To apply the changes, enter the password for your Adobe Target account, click Re-connect To Target, and click OK when the connection is successful. Then, click OK on the Edit Component dialog box. 

Your Target configuration includes a custom mbox.js file, the required code in the head section of your page adds the file to the client library framework instead of a reference to the testandtarget.js library:

<script type="text/javascript">
        if ( !window.CQ_Analytics ) {
            window.CQ_Analytics = {};
        if ( !CQ_Analytics.TestTarget ) {
            CQ_Analytics.TestTarget = {};
        CQ_Analytics.TestTarget.clientCode = 'MyClientCode';
<script type="text/javascript">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/util.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js"></script>

Disabling the Target Command for Components

Most components can be converted to targeted components using the Target command on the context menu.


To remove the Target command from the context menu, add the following property to the cq:editConfig node of the component:

  • Name: cq:disableTargeting
  • Type: Boolean
  • Value: True

For example, to disable targeting for the title components of the Geometrixx Demo Site pages, add the property to the /apps/geometrixx/components/title/cq:editConfig node.


Sending Order Confirmation Information to Adobe Target

For tracking the performance of your website, send purchase information from your order confirmation page to Adobe Target. (See Create an orderConfirmPage Mbox in the Adobe Target documentation.) Adobe Target recognizes mbox data as order confirmation data when your MBox name is orderConfirmPage and uses the following specific parameter names:

  • productPurchasedId: A list of IDs that identify the purchased products.
  • orderId: The ID of the order.
  • orderTotal: The total amount of the purchase.

The code on the rendered HTML page that creates the mbox is similar to the following example:

<script type="text/javascript">
     'productPurchasedId=product1 product2 product3',

The values of each parameter are different for each order. Therefore, you require a component that generates the code based on the properties of the purchase. The CQ eCommerce Integration Framework enables you to integrate with your product catalogue and implement a shopping cart and checkout page. 

The Geometrixx Outdoors sample displays the following confirmation page when a visitor purchases products:


The following code for the JSP script of a component accesses the properties of the shopping cart and then prints the code for creating the mbox.


  confirmationmbox component.

%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false"
                  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();
	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">
     'productPurchasedId=<%= productIDs %>',
     'orderId=<%= orderID %>',
     'orderTotal=<%= total %>');

When the component is included in the checkout page in the previous example, the page source includes the following script that creates the mbox:

<div class="mboxDefault"></div>
<script type="text/javascript">
     'productPurchasedId=47638-S, 46587',


Understanding the Target Component

The Target component enables authors to create dynamic mboxes from CQ content components. (See Content Targeting.) The Target component is located at /libs/cq/personalization/components/target.

The target.jsp script accesses the page properties to determine the targeting engine to use for the component, and then executes the appropriate script:

  • Client-side Rules: /libs/cq/personalization/components/target/engine_cq.jsp
  • Adobe Target: /libs/cq/personalization/components/target/engine_tnt.jsp

The Creation of Mboxes

When Adobe Target drives content targeting, the engine_tnt.jsp script creates mboxes that contain the content of the targeted experience:

  • Adds a div element with the class of mboxDefault, as required by the Adobe Target API. 
  • Adds the mbox content (the content of the targeted experience) inside the div element.

Following the mboxDefault div element, the javascript that creates the mbox is inserted:

  • The mbox name, ID, and location are based on the repository path of the component.
  • The script obtains Client Context parameter names and values.
  • Calls are made to the functions that mbox.js and other client libraries define to create mboxes. 

Client Libraries for Content Targeting

The client library in the testandtarget category defines the javascript libraries that the Target component uses. The path of the client library folder is /etc/clientlibs/foundation/testandtarget/testandtarget. The testandtarget client library folder embeds the following client library folders to create the testandtarget.js library:

  • testandtarget.util:  (/etc/clientlibs/foundation/testandtarget/util) Defines the CQ_Analytics.TestTarget function. Calls CQ_Analytics.TestTarget.init().
  • testandtarget.mbox: (/etc/clientlibs/foundation/testandtarget/mbox) Includes the default mbox.js library.

The following code in the target.jsp script of the Target component includes the client libraries:

<cq:includeClientLib categories="testandtarget" />