ターゲットコンテンツの開発 developing-for-targeted-content

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
Developing

作成対象：

Developer

CAUTION

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。詳細は、技術サポート期間. サポートされているバージョンを見つけるここ.

この節では、コンテンツのターゲティングで使用するコンポーネントの開発に関するトピックについて説明します。

Adobe Targetとの接続について詳しくは、 Adobe Targetとの統合.
ターゲットコンテンツのオーサリングについて詳しくは、ターゲットモードを使用したターゲットコンテンツのオーサリング.

NOTE

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

ページ上でのAdobe Targetによるターゲティングの有効化 enabling-targeting-with-adobe-target-on-your-pages

Adobe Targetとやり取りするページ内でターゲットコンポーネントを使用するには、 <head> 要素。

ヘッドセクション the-head-section

次の両方のコードブロックを <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 オブジェクトを追加し、Web サイトに関連付けられたクラウドサービスライブラリを読み込みます。 Target のサービスでは、ライブラリは /libs/cq/analytics/components/testandtarget/headlibs.jsp によって読み込まれます。

読み込まれるライブラリのセットは、Target の設定で使用される 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>

NOTE

製品と共に出荷された at.js のバージョンのみがサポートされます。のバージョン。 at.js 製品と共に出荷された製品は、 at.js 場所にあるファイル /etc/clientlibs/foundation/testandtarget/atjs/source/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 は、必要な分析 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>

本文セクション（開始） the-body-section-start

次のコードを <body> タグを使用して、ClientContext 機能をページに追加します。

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

ボディセクション（終了） the-body-section-end

次のコードを </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 ライブラリファイルの使用 using-a-custom-target-library-file

NOTE

DTM や他のターゲットマーケティングシステムを使用していない場合は、カスタムターゲットライブラリファイルを使用できます。

NOTE

デフォルトでは、mbox は非表示になっています。mboxDefault クラスがこの動作を決定します。 mbox を非表示にすると、スワップする前に訪問者にデフォルトコンテンツが表示されなくなります。ただし、mbox の非表示は、知覚されるパフォーマンスに影響を与えます。

mbox の作成に使用されるデフォルトの mbox.js ファイルは、 /etc/clientlibs/foundation/testandtarget/mbox/source/mbox.js. 顧客の mbox.js ファイルを使用するには、そのファイルを Target のクラウド設定に追加します。ファイルを追加するには、 mbox.js ファイルは、ファイルシステム上で使用可能である必要があります。

例えば、Marketing Cloud ID サービスを使用する場合は、mbox.js をダウンロードし、使用するテナントに基づいて imsOrgID 変数に適切な値を格納する必要があります。この変数は、Marketing Cloud ID サービスとの統合に必須です。詳しくは、Adobe Target のレポートソースとしての Adobe Analytics および実装する前にを参照してください。

NOTE

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

CQ の ツール ページに移動して、クラウドサービス を選択してください。（http://localhost:4502/libs/cq/core/content/tools/cloudservices.html）
ツリーで「Adobe Target」を選択し、設定のリストで、Target 設定をダブルクリックします。
設定ページで、「編集」をクリックします。
カスタム mbox.js プロパティの場合、「参照」をクリックし、ファイルを選択します。
変更を適用するには、Adobe Targetアカウントのパスワードを入力し、「 Target に再接続」をクリックし、接続が成功したら「 OK 」をクリックします。次に、[ コンポーネントを編集 ] ダイアログボックスで [OK] をクリックします。

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

コンポーネントに対する Target コマンドの無効化 disabling-the-target-command-for-components

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

chlimage_1-173

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

名前：cq:disableTargeting
タイプ：Boolean
値：True

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

chlimage_1-174

Adobe Targetへの注文確認情報の送信 sending-order-confirmation-information-to-adobe-target

NOTE

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

Web サイトのパフォーマンスを追跡するには、注文確認ページからAdobe Targetに購入情報を送信します。 ( orderConfirmPage mbox の作成 (Adobe Targetのドキュメント )。 mbox が orderConfirmPage という名前を持ち、以下の特定のパラメーター名を使用している場合は、Adobe Target が mbox データを注文確認データとして認識します。

productPurchasedId:購入した製品を識別する ID のリスト。
orderId:注文の ID。
orderTotal:購入の合計金額。

mbox を作成するレンダリングされたHTMLページ上のコードは、次の例のようになります。

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

各パラメーターの値は、順序ごとに異なります。したがって、購入のプロパティに基づいてコードを生成するコンポーネントが必要です。 CQ の e コマース統合フレームワークを使用すると、商品カタログを統合し、買い物かごとチェックアウトページを実装できます。

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>

ターゲットコンポーネントについて understanding-the-target-component

ターゲットコンポーネントを使用すると、作成者は 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 の作成 the-creation-of-mboxes

NOTE

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

Adobe Target API の要求に応じて、mboxDefault クラスの div 要素を追加します。
div 要素の内側に mbox コンテンツ（ターゲット設定されたエクスペリエンスのコンテンツ）を追加します。

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

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

コンテンツのターゲティングのためのクライアントライブラリ client-libraries-for-content-targeting

次に、使用可能な clientlib カテゴリを示します。

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

recommendation-more-help

2315f3f5-cb4a-4530-9999-30c8319c520e