ターゲットコンテンツの作成

ここでは、コンテンツターゲティングで使用するコンポーネントの作成に関するトピックを取り上げます。

メモ

AEM オーサーインスタンスでコンポーネントをターゲット設定すると、そのコンポーネントが、キャンペーンの登録、オファーの設定、Adobe Target セグメントの取得(設定されている場合)をおこなうために、Adobe Target に対して一連のサーバー側呼び出しを実行します。AEM パブリッシュインスタンスから Adobe Target へのサーバー側呼び出しはおこなわれません。

ページ上での Adobe Target によるターゲット設定の有効化

Adobe Targetとやり取りするページでターゲットコンポーネントを使用するには、<head>要素に特定のクライアントサイドコードを含めます。

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

このコードによって、必要な分析用 Javascript オブジェクトが追加され、Web サイトに関連付けられているクラウドサービスライブラリが読み込まれます。ターゲットサービスの場合、ライブラリは/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?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/mbox.js?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/personalization/integrations/commons.js?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/util.js?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js?lang=ja"></script>

カスタムの mbox.js の場合

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

at.js の場合

<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs-integration.js?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs.js?lang=ja"></script>
メモ

製品に付属のat.jsのバージョンのみがサポートされます。 at.jsは、/etc/clientlibs/foundation/testandtarget/atjs/source/at.jsにあるat.jsファイルを見て、製品と共に出荷されています。

カスタムの at.js の場合

<script type="text/javascript" src="/etc/cloudservices/testandtarget/%3CCLIENT-CODE%3E/_jcr_content/public/at.js?lang=ja"></script>
    <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/parameters.js?lang=ja"></script>
 <script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/atjs-integration.js?lang=ja"></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=ja" type="text/css">
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/testandtarget.js?lang=ja"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/testandtarget/init.js?lang=ja"></script>

body セクション(開始)

<a0/追加>タグの直後の次のコードを使用して、クライアントコンテキスト機能をページに追加します。<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.jsファイルは、/etc/clientlibs/foundation/testandtarget/mbox/source/mbox.jsにあります。 カスタムの mbox.js ファイルを使用するには、このファイルを Target クラウド設定に追加します。ファイルを追加するには、mbox.jsファイルがファイルシステムで使用可能である必要があります。

例えば、Marketing CloudIDサービスを使用する場合は、テナントに基づくimsOrgID変数の正しい値が含まれるように、mbox.jsをダウンロードする必要があります。 この変数は、Marketing Cloud ID サービスとの統合に必須です。詳しくは、Adobe Targetのレポート源としてのAdobe Analytics導入前のを参照してください。

メモ

Target 設定でカスタム mbox が定義されている場合は、すべてのユーザーにパブリッシュサーバー上の /etc/cloudservices への読み取りアクセス権限が必要です。このアクセス権限がないと、発行 Web サイト上の mbox.js ファイルの読み込みが 404 エラーになります。

  1. CQ ツール​ページに移動し、Cloud Services​を選択します。 (http://localhost:4502/libs/cq/core/content/tools/cloudservices.html)。
  2. ツリーで「Adobe Target」を選択し、設定リストの中から目的の Target 設定をダブルクリックします。
  3. 設定ページで「編集」をクリックします。
  4. カスタム mbox.js プロパティの場合は、「参照」をクリックし、ファイルを選択します。
  5. 変更を適用するには、Adobe Target アカウントのパスワードを入力し、「Adobe Target に再接続」をクリックして、接続が成功したら「OK」をクリックします。次に、コンポーネントを編集ダイアログボックスで「OK」をクリックします。

Target 設定にカスタム mbox.js ファイルが含まれます。これはページの head セクション内に必要なコードで、testandtarget.js ライブラリへの参照の代わりに、クライアントライブラリフレームワークにファイルを追加するものです。

コンポーネントに対する「ターゲット」コマンドの無効化

大部分のコンポーネントは、コンテキストメニューで「ターゲット」コマンドを使用して、ターゲットコンポーネントに変換することができます。

chlimage_1-173

コンテキストメニューから「ターゲット」コマンドを削除するには、コンポーネントの cq:editConfig ノードに次のプロパティを追加します。

  • 名前:cq:disableTargeting
  • 型:Boolean
  • 値:True

例えば、Geometrixxデモサイトページのタイトルコンポーネントのターゲット設定を無効にするには、/apps/geometrixx/components/title/cq:editConfigノードにプロパティを追加します。

chlimage_1-174

Adobe Target への注文確認情報の送信

メモ

DTM を使用していない場合は、注文確認を Adobe Target に送信します。

Web サイトのパフォーマンスを追跡するには、注文確認ページから 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

以下に示すコードは、買い物かごのプロパティにアクセスして、mbox を作成するためのコードを出力するコンポーネントの JSP スクリプトです。

<%--

  confirmationmbox component.

--%><%
%><%@include file="/libs/foundation/global.jsp?lang=ja"%><%
%><%@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 コンポーネントについて

Target コンポーネントを使用すると、CQ コンテンツコンポーネントから動的 mbox を作成できます(コンテンツのターゲティングを参照)。ターゲットコンポーネントは、/libs/cq/personalization/components/ターゲットにあります。

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 が非表示の場合は、入れ替えられる前にデフォルトコンテンツが訪問者に表示されません。ただし、体感パフォーマンスに影響が生じます。

Adobe Target がコンテンツターゲティングをおこなうときには、engine_tnt.jsp スクリプトが、ターゲット設定されたエクスペリエンスのコンテンツを格納する mbox を作成します。

  • Adobe TargetAPIの要求に従って、div要素をmboxDefaultのクラスと共に追加します。

  • div 要素の内側に mbox コンテンツ(ターゲット設定されたエクスペリエンスのコンテンツ)を追加します。

mboxDefault div 要素の後に、mbox を作成する JavaScript が挿入されます。

  • mbox 名、ID および場所は、コンポーネントのリポジトリパスに基づきます。
  • スクリプトが ClientContext のパラメーター名と値を取得します。
  • mbox を作成するために、mbox.js および他のクライアントライブラリが定義する関数への呼び出しがおこなわれます。

コンテンツターゲティングのためのクライアントライブラリ

利用できる clientlib カテゴリは次のとおりです。

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

このページ

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