Show Menu
トピック×

AEM Mobile のコンテンツパーソナライゼーション

単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。 詳細情報 を参照してください。
This document is part of the Getting Started with AEM Mobile Guide, a recommended starting point for AEM Mobile reference.
AEM Mobile のコンテンツパーソナライゼーション機能を使用すると、 AEM 作成者 は、 Adobe Target を使用してモバイルアプリコンテンツをパーソナライズできます。これにより、ターゲットオファーをモバイルアプリケーションのユーザーに配信できます。Adobe Experience Manager Mobile には、個々の好みに合ったコンテンツをユーザーに提供する、コンテンツの作成、ターゲティングおよび配信機能が用意されています。
AEM ではよくあることですが、作成者がこれらのコンテンツの作成を開始するには、まず、管理者と開発者が環境を準備する必要があります。
AEM 管理者 は、AEM Mobile と Adobe Target クラウドサービス間の接続を確立する必要があります。
一方、AEM Mobile 開発者 は、ターゲットコンテンツのオーサリングを容易にするために、既存のスクリプトを変更する必要があります。

管理者向け

コンテンツ作成者がモバイルアプリ用のターゲットコンテンツの生成を開始するには、次の手順を実行する必要があります。ユーザーとグループに適した権限のセットを取得し、クラウドサービスを作成し、アクティビティのアプリケーションを設定し、最後にコンテンツを生成します。
This article will guide you through the process used to configure the AEM Mobile Hybrid Reference Application for targeting.
ここでは、AEM Mobile Hybrid Reference App が正常にデプロイされており、AEM Mobile ダッシュボードからアクセス可能であることを前提としています。
作成者がアプリケーション内でターゲットコンテンツを生成できるようにするには、AEM インスタンスに Adobe Target クラウドサービスを設定 する必要があります。

権限

Users that need access to the personalization console need to be part of the target-activity-authors group.
ユーザーおよびグループのセットアップの一環として、target-activity-authors グループを apps-admins グループに追加することをお勧めします。target-activity-authorsグループを追加すると、ユーザーはパーソナライゼーションナビゲーションメニューエントリを表示できます。
パーソナライゼーション管理コンソールへのアクセス権を付与するユーザーまたはグループを target-activity-authors グループに追加し忘れると、パーソナライゼーションコンソールがユーザーに表示されません。

クラウドサービス

モバイルアプリケーションでターゲットコンテンツを機能させるには、次の2つのサービスを設定する必要があります。Adobe targetサービスとAdobe Mobile Servicesサービス。 Adobe targetサービスは、クライアントの要求を処理し、パーソナライズされたコンテンツを返すためのエンジンを提供します。 Adobe Mobile Servicesサービスは、AMS Cordovaプラグインで使用されるADBMobileConfig.jsonファイルを介して、アドビのサービスとモバイルアプリケーションとの接続を提供します。 AEM mobileダッシュボードから、2つのサービスを追加することで、アプリを設定できます。
AEM Mobile ダッシュボードで、「クラウドサービスを管理」を探し、+ ボタンをクリックします。
クラウドサービスを追加ウィザードで、「Adobe Target」クラウドサービスカードを選択し、「次へ」をクリックします。
「設定を選択」ドロップダウンでは、新しい設定を作成することも、既存の設定を選択することもできます。新しい設定を作成するには、ドロップダウンから #を選択します。 Target設定のタイトルを入力します。 Targetアカウントに関連付けられているクライアントコード、電子メール、パスワードを入力します。 これらのフィールドの値が不明な場合は、Adobe targetサポートにお問い合わせください。 「検証」ボタンをクリックして、資格情報を検証します。検証が完了したら、「送信」ボタンをクリックして、クラウドサービスを作成します。
作成されたクラウドサービスは、ウィザードによって自動的にモバイルアプリケーションと関連付けられます。cq:cloudserviceconfigsプロパティの値は、appsグループノードのjcr:contentノードに設定されます。 ハイブリッドアプリのサンプルでは、/etc/cloudservices/testandtarget/adobe-target—aem-apps/frameworkに配置された自動生成フレームワークノードを指す値を使用して、/content/mobileapps/hybrid-reference-app/jcr:contentに設定されます。 フレームワークノードには、デフォルトで設定される 2 つのプロパティ(gender および age)があります。フレームワークは AEM のプレビューのみで使用され、デバイスには影響しません。
ウィザードを完了すると、クラウドサービスを管理タイルに Target クラウドサービスが表示されますが、Adobe Mobile Services アカウントがないという警告が示されています。

Adobe Mobile Services

Adobe Mobile Services(AMS)アカウントもアプリケーションにリンクする必要があります。AMS サービスは、Target クライアントコード情報を格納する必須の ADBMobileConfig.json ファイルを提供します。AMSアカウントとの関連付けを作成する前に、AMSアカウントに対する権限を持つユーザーがAMSアカウントを変更する必要があります。

クライアントコード

To login to the AMS services visit https://mobilemarketing.adobe.com , select the mobile application and click the settings. 「SDK targetオプション」フィールドを探し、フィールドにクライアントコードを配置して、「保存」をクリックします。
クライアントコードをモバイルアプリケーションと関連付けると、Adobe Mobile ダッシュボードで AMS クラウドサービスを設定する際に、サービスの設定が ADBMobileConfig.json ファイルから提供されます。

Adobe Mobile Services クラウドサービス

AMS を設定したら、次は Adobe Mobile ダッシュボードでモバイルアプリケーションを関連付けます。AEM Mobile ダッシュボードで、「クラウドサービスを管理」を探し、+ ボタンをクリックします。
「Adobe Mobile Services」カードを選択し、「次へ」をクリックします。
「作成または選択」ウィザードステップで、「Mobile Service」ドロップダウンを選択し、「設定を作成」項目を選択します。タイトル、会社名、ユーザー名、パスワードを入力し、適切なデータセンターを選択します。 これらの値が不明な場合は、Adobe Mobile Service管理者に問い合わせて取得してください。 すべてのフィールドに入力したら、「検証」ボタンをクリックします。 検証プロセスはAMSに進み、アカウントの資格情報を検証し、検証に成功すると、関連するモバイルアプリケーションのリストが入力され、ドロップダウンから関連するモバイルアプリケーションを選択します。 「送信」ボタンをクリックして、ウィザードを完了します。 設定データと、アプリケーションに関連付けられた解析を取得するには、このプロセスに少し時間がかかる場合があります。 プロセスが完了したら、モーダルから「完了」ボタンをクリックして、Adobe Mobile Dashboardに戻ります。
Mobile ダッシュボードに戻ると、クラウドサービスを管理タイルに AMS クラウドサービスが表示されます。また、 #タイルにはライフサイクルレポートが表示されます。

作成者向け

​前提条件:上述のとおり、管理者は、作成者が新しいターゲットコンテンツを生成する前に、Adobe targetサービスへの接続を設定する必要があります。
管理者が 2 つのクラウドサービスを設定し、開発者が mobileappoffers ハンドラーを設定したら、コンテンツ作成者はターゲットエクスペリエンスを生成できます。
AEM Mobile アプリ内でターゲットコンテンツをオーサリングする手順は、AEM Sites をオーサリングする手順に似ています。
See here for a complete overview on Authoring targeted content in AEM

開発者向け

モバイルアプリケーションをビルドする AEM 開発者は、コンポーネントの開発時に AEM 全体でよく使用されるパターンに常に従う必要があります。ここでは、コンテンツの作成者がターゲットコンテンツを作成できるようにするための手順について説明します。

Adobe Target コンテンツ同期ハンドラー

ユーザーのデバイスにコンテンツを配信するには、AEM コンテンツ作成者が作成したオファーをレンダリングすることにより、コンテンツを生成します。ターゲットオファーのレンダリングを処理するために、オファーを処理する新しいコンテンツ同期ハンドラーが用意されています。 Using the Hybrid Reference Application as our sample, the en (english) content package contains the ContentSyncConfig with a mobileappoffers handler. オファーをデバイスにレンダリングするには、次の手順が非常に重要です。mobileappofersハンドラーには、アプリケーションに使用するパーソナライゼーションアクティビティへのパスを識別するpathプロパティがあります。
For example if there is an activity that is located at /content/campaigns/hybridref copy this path and paste it as the value to the path property of the mobileappoffers handler.
Hybrid Reference App の場合、2 つの mobileappoffers ハンドラーがあり、1 つは開発用、もう 1 つは実稼動用です。
mobileappoffers ハンドラーの path プロパティでアクティビティのパスを設定したら、ハンドラーを保存します。ハンドラーは、モバイルデバイス用のオファーのレンダリングを開始する準備が整いました。

レンダリングモード

パブリッシュセットアップと開発セットアップでは、mobileappoffers ハンドラーの設定が異なります。For publish setups there is a property called renderMode with a value of publish set on the cq:ContentSyncConfig node. mobileappofersハンドラーはrenderModeを参照し、publishに設定した場合は、作成されるmbox IDを変更します。 デフォルトでは、AEMによって作成されるmboxには —author値がmbox IDに付加されます。 これは、アクティビティが公開されていないこと、およびオファーの解決に未公開のキャンペーンを使用する必要があることを示します。
Adobe Mobile ダッシュボードでコンテンツがステージングされると、ステージングされたコンテンツは、実稼動の準備ができたコンテンツとみなされ、開発用でないコンテンツ同期設定を使用してレンダリングされます。この方法でレンダリングすると、—authorがすべてのmbox IDから削除され、Targetサーバーで公開済みのアクティビティが使用可能になることが期待されます。 ステージングされたコンテンツをテストする前に、アクティビティが公開されていることを確認します。

パーソナライゼーションアプリの開発

コンポーネント

コンテンツの基盤となるのは通常、HTL と JSP のどちらを使用するかに応じて、wcm/foundation/components/page または foundation/components/page のいずれかの基本 AEM ページコンポーネントを拡張するページコンポーネントです。これらの手順の長さは、wcm/foundation/components/pageコンポーネントの使用に焦点を当てます。 ページコンポーネントの基本構造は複数のスクリプトに分類され、各スクリプトは開発者が必要に応じてコードを編成し、上書きできるようにするための特定の目的を提供します。 Personalizationに関心のある2つのスクリプトは、head.htmlとbody.htmlです。 これら2つのスクリプトは、Context Hub、クラウドサービスおよびモバイルオーサリングをサポートするコードを挿入できる領域を提供します。
次に、コンテンツターゲットを有効にするために使用される 2 つの主要なスクリプトの概要を示します。

head.html

作成者がコンテンツターゲット機能を使用するには、ターゲットメニューをページに追加して、作成者が編集モードからターゲティングモードにコンテキストを変更できるようにする必要があります。この機能を有効にするには、head.htmlスクリプトを変更して、head.htmlの上部付近または<title></title>要素の近くに次のコードスニペットを含めるようにする必要があります。
<meta data-sly-test="${!wcmmode.disabled}">
    <div data-sly-call="${clientLib.all @ categories='personalization.kernel'}" data-sly-unwrap></div>
    <div data-sly-resource="${'config' @ resourceType='cq/personalization/components/clientcontext_optimized/config'}" data-sly-unwrap></div>
    <div data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}" data-sly-unwrap></div>
</meta>

WCM モードが無効になっている場合は(詳しくは、「コンテンツ同期ハンドラー」の節を参照)、最終的なアプリケーションコードにこのスクリプトが含まれないように、WCM モードが無効になっていない場合にのみ、スクリプトを挿入する必要がある点に注意してください。
作成者がターゲットコンテンツをプレビューする機能を使用するには、エディターで Adobe Target クラウドサービスの設定を検索できるようにする必要があります。以下のコードブロックには、2つの重要なスクリプトが追加されています。 最初に、ページに関連するTargetクラウドサービスを検索する機能を追加し、Adobe targetに対して呼び出しを行います。 2つ目は、cq.apps.targetingカテゴリの追加です。
The cq.apps.targeting category overrides the default cq/personalization/component/target component and uses the mobileapps/components/target component that renders offers specifically for mobile application consumption. 詳しくは、「ターゲットコンポーネント」の節で説明します。
コードは、head.htmlに追加し、</head>要素の最後の直前に配置する必要があります。
<div data-sly-test="${!wcmmode.disabled}">
    <div data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap></div>
    <meta data-sly-call="${clientLib.all @ categories='cq.apps.targeting'}" data-sly-unwrap></meta>
</div>

このコードブロックは、無効になっていない WCM モード内にラップされ、コンテンツ作成者がコンテンツを作成している間のみ機能する点に注意してください。クラウドサービスのスクリプトは、生成されたモバイルランタイムコードに追加されません。

body.html

コンテンツ作成者がさまざまなペルソナをテストできるようにするには、次のコードブロックを body 要素の最初の子として body.html スクリプトに挿入する必要があります。
<div data-sly-test="${!wcmmode.disabled}">
    <div data-sly-resource="${'clientcontext' @ resourceType='cq/personalization/components/clientcontext_optimized'}" data-sly-unwrap></div>
</div>

必要な最後のコードは、body.html の一番下に配置します。このコードのビットは、関連するクラウドサービスを探し、適切なターゲット設定エンジンコードを挿入します。
<div data-sly-test="${!wcmmode.disabled}">
    <div data-sly-resource="${'cloudservices' @ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" data-sly-unwrap></div>
</div>

参照アプリケーション

Examples of head.html and body.html can be found in the AEM Mobile Hybrid Reference Application showing the developer where to place the script blocks within the two scripts.

コンテンツ同期ハンドラー

コンテンツ作成者がモバイルアプリケーション向けのコンテンツの作成を完了したら、次の手順では、ソースをダウンロードしてアプリケーションをビルドします。つまり、コンテンツを公開するためにステージングします。開発者は、このための多くの手順に関与しています。コンテンツをレンダリングできるように、AEM Mobile では、コンテンツ同期ハンドラーを使用して、コンテンツのレンダリングとパッケージ化が行われます。パーソナライゼーションの使用例でターゲットコンテンツをレンダリングするために、新しいコンテンツ同期ハンドラーが導入されています。「mobileappoffers」ハンドラーは、コンテンツ作成者が作成した関連するターゲットオファーをレンダリングする方法を知っています。 mobileappofersハンドラーは抽象ページの更新ハンドラーを拡張するので、多くのプロパティは似ています。 mobileappoffersハンドラーの詳細には、次のプロパティがあります。
プロパティ 説明
rewrite + relativeParentPath
- "/"
rewrite プロパティは、コンテンツ内のパスを書き換える方法を指定します。
includedPageTypes
「cq/personalization/components/teaserpage」、
「cq/personalization/components/offerproxy」
includePageTypes プロパティはオプションであり、デフォルトは、リソースタイプが cq/personalization/components/teaserpage および cq/personalization/components/offerproxy のページです。これらの2つのリソースタイプは、コンテンツをターゲットにする場合に使用されるデフォルトのリソースタイプです。 追加のリソースタイプをサポートする必要がある場合は、includePageTypesのリストに追加する必要があります。
locationRoot /content/mobileapps/<アプリ> アプリの場所です。
type mobileappoffers mobileappoffers であるハンドラーの名前です。
selector tandt tandt セレクターを使用して、ターゲットコンテンツがレンダリングされます。
targetRootDirectory www レンダリングされるコンテンツが格納されているルートディレクトリです。
includeImages true | false true の場合、オファーに含まれるすべての画像がレンダリングされます。falseの場合、画像はスキップされます。
includeVideos true | false true の場合、オファーに含まれるすべてのビデオがレンダリングされます。falseの場合、ビデオはスキップされます。
path /content/campaigns/<ブランド> オファーが属するキャンペーンのブランドを指します。現在、すべてのオファーは同じキャンペーンからのものである必要があります。
deep true | false trueの場合、すべての子ページを再帰的にレンダリングし、falseの場合は再帰的にレンダリングしません。
extension html レンダリングされるリソースの拡張子を設定します。ページの拡張子が.htmlになるようにhtmlに設定します。
The AEM Mobile Hybrid Reference App has the default mobileappoffer handler's configuration. サンプル内のパスプロパティは、キャンペーンの場所に依存するので空です。 キャンペーン作成者がキャンペーンを作成した後、アプリ管理者は、キャンペーンを指すパスプロパティを指定してキャンペーンをハンドラーに関連付ける必要があります。

ターゲットコンポーネント

モバイルアプリケーション専用のコンテンツをレンダリングするために、AEM Mobile では mobileapps/components/target コンポーネントが使用されます。モバイルターゲットコンポーネントは、cq/personalization/components/targetコンポーネントを拡張し、engine_tnt.jspスクリプトをオーバーライドします。 engine_tnt.jspを上書きすることで、AEM mobileでモバイルアプリの使用例用に生成されたHTMLを制御できます。 コンテンツ作成者がターゲットとするすべてのコンポーネントに対して、engine_tnt.jspによって関連するmboxが作成されます。
For each mbox an attribute of cq-targeting is added allowing application developers to write custom code to consume and use however they please. The AEM Mobile Hybrid Reference App has an example of a Angular directive that uses the cq-targeting attribute. コンテンツの置き換えが行われるタイミングと方法の概念は、モバイルアプリケーションの開発者次第です。 AEM /etc/clientlibs/mobileapps/js/mobileapps.js経由で配信されるMobile SDKが、Adobe Targetingサービスを呼び出すAPIを提供します。 アプリケーションのデザインに従って呼び出しを行うタイミングを指定するのは、アプリケーション開発者に任せます。