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

AEM Mobile のコンテンツパーソナライゼーション機能を使用すると、AEM 作成者は、Adobe Target を使用してモバイルアプリコンテンツをパーソナライズできます。これにより、ターゲットオファーをモバイルアプリケーションのユーザーに配信できます。Adobe Experience Manager Mobile には、個々の好みに合ったコンテンツをユーザーに提供する、コンテンツの作成、ターゲティングおよび配信機能が用意されています。

AEM ではよくあることですが、作成者がこれらのコンテンツの作成を開始するには、まず、管理者と開発者が環境を準備する必要があります。

AEM 管理者は、AEM Mobile と Adobe Target クラウドサービス間の接続を確立する必要があります。

一方、AEM Mobile 開発者は、ターゲットコンテンツのオーサリングを容易にするために、既存のスクリプトを変更する必要があります。

管理者向け

コンテンツ作成者がモバイルアプリ用のターゲットコンテンツを生成する際に開始を行うには、まとめておく必要がある手順がいくつかあります。ユーザーとグループに適した権限のセットを取得し、クラウドサービスを作成し、アクティビティのアプリケーションを設定して、最終的にコンテンツを生成することができます。

この記事では、ターゲティング用にAEM Mobileハイブリッド参照アプリケーションを設定する手順を説明します。

ここでは、AEM Mobile Hybrid Reference App が正常にデプロイされており、AEM Mobile ダッシュボードからアクセス可能であることを前提としています。

作成者がアプリケーション内でターゲットコンテンツを生成できるようにするには、AEM インスタンスに Adobe Target クラウドサービスを設定する必要があります。

権限

パーソナライゼーションコンソールへのアクセスを必要とするユーザーは、target-activity-authorsグループに属している必要があります。

ユーザーおよびグループのセットアップの一環として、target-activity-authors グループを apps-admins グループに追加することをお勧めします。ターゲットアクティビティ作成者グループを追加すると、[個人設定]ナビゲーションメニューエントリを表示できます。

Cloud Services

モバイルアプリケーションでターゲットコンテンツを機能させるには、2つのサービスを設定する必要があります。Adobe TargetサービスとAdobeMobile Servicesサービス。 Adobe Targetサービスは、クライアントの要求を処理し、パーソナライズされたコンテンツを返送するためのエンジンを提供します。 AdobeMobile Servicesサービスは、AMS Cordovaプラグインで使用されるADBMobileConfig.jsonファイルを介して、Adobeサービスとモバイルアプリケーションの間の接続を提供します。 AEM Mobileダッシュボードから、2つのサービスを追加して、アプリを設定できます。

AEM Mobile ダッシュボードで、「クラウドサービスを管理」を探し、+ ボタンをクリックします。

クラウドサービスを追加ウィザードで、「Adobe Target」クラウドサービスカードを選択し、「次へ」をクリックします。

「設定を選択」ドロップダウンでは、新しい設定を作成することも、既存の設定を選択することもできます。新しい設定を作成するには、ドロップダウンから「設定を作成」を選択します。 ターゲット設定のタイトルを入力します。 ターゲットアカウントに関連付けられているクライアントコード、電子メール、パスワードを入力します。 これらのフィールドの値がわからない場合は、Adobe Targetサポートにお問い合わせください。 「検証」ボタンをクリックして、資格情報を検証します。検証が完了したら、「送信」ボタンをクリックして、クラウドサービスを作成します。

ウィザードを完了すると、クラウドサービスを管理タイルに Target クラウドサービスが表示されますが、Adobe Mobile Services アカウントがないという警告が示されています。

Adobe Mobile Services

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

クライアントコード

AMSサービスにログインするには、https://mobilemarketing.adobe.comにアクセスし、モバイルアプリケーションを選択して設定をクリックします。 「SDKターゲットオプション」フィールドを見つけ、クライアントコードをフィールドに配置して、「保存」をクリックします。

クライアントコードをモバイルアプリケーションと関連付けると、Adobe Mobile ダッシュボードで AMS クラウドサービスを設定する際に、サービスの設定が ADBMobileConfig.json ファイルから提供されます。

Adobe Mobile Services クラウドサービス

AMS を設定したら、次は Adobe Mobile ダッシュボードでモバイルアプリケーションを関連付けます。AEM Mobile ダッシュボードで、「クラウドサービスを管理」を探し、+ ボタンをクリックします。

「Adobe Mobile Services」カードを選択し、「次へ」をクリックします。

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

Mobile ダッシュボードに戻ると、クラウドサービスを管理タイルに AMS クラウドサービスが表示されます。また、[指標の分析]タイルには、ライフサイクルレポートが表示されます。

作成者向け

前提条件： 上述のとおり、管理者は、作成者がターゲットコンテンツを新たに生成する前に、Adobe Targetサービスへの接続を設定する必要があります。

管理者が 2 つのクラウドサービスを設定し、開発者が mobileappoffers ハンドラーを設定したら、コンテンツ作成者はターゲットエクスペリエンスを生成できます。

AEM Mobile アプリ内でターゲットコンテンツをオーサリングする手順は、AEM Sites をオーサリングする手順に似ています。

AEMでのターゲットコンテンツのオーサリングの概要については、こちらを参照してください

開発者向け

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

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

ユーザーのデバイスにコンテンツを配信するには、AEM コンテンツ作成者が作成したオファーをレンダリングすることにより、コンテンツを生成します。ターゲットオファーのレンダリングを処理するために、オファーを処理する新しいコンテンツ同期ハンドラーが追加されました。 ハイブリッド参照アプリケーションをサンプルとして使用する場合、en（英語）コンテンツパッケージには、mobileappoffersハンドラーを含むContentSyncConfigが含まれています。 オファーをデバイスにレンダリングするには、次の手順が非常に重要です。mobileappofersハンドラーには、アプリケーションに使用するパーソナライゼーションアクティビティへのパスを識別するpathプロパティがあります。

例えば、/content/キャンペーン/hybridref​にあるアクティビティーがこのパスをコピーし、値としてmobileappofersハンドラーの​path​プロパティに貼り付けます。

mobileappoffers ハンドラーの path プロパティでアクティビティのパスを設定したら、ハンドラーを保存します。ハンドラーは、モバイルデバイス用のレンダリングオファーを開始する準備ができました。

レンダリングモード

パブリッシュセットアップと開発セットアップでは、mobileappoffers ハンドラーの設定が異なります。パブリッシュ設定には、cq:ContentSyncConfigノードに​publish​という値が設定された​renderMode​というプロパティがあります。 mobileappofersハンドラーはrenderModeを参照し、publishに設定した場合は、作成されるmbox IDを変更します。 デフォルトでは、AEMで作成されるmboxには —author値が追加され、mbox IDにも追加されます。 これは、アクティビティが公開されていないことを示し、オファーの解像度に未公開のキャンペーンを使用する必要があることを示します。

Adobe Mobile ダッシュボードでコンテンツがステージングされると、ステージングされたコンテンツは、実稼動の準備ができたコンテンツとみなされ、開発用でないコンテンツ同期設定を使用してレンダリングされます。この方法でレンダリングすると、—authorがすべてのmbox IDから削除され、公開済みアクティビティがターゲットサーバーで使用可能になることが予期されます。 ステージコンテンツをテストする前に、アクティビティが公開されていることを確認してください。

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

コンポーネント

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

次に、コンテンツターゲットを有効にするために使用される 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>

作成者がターゲットコンテンツをプレビューする機能を使用するには、エディターで Adobe Target クラウドサービスの設定を検索できるようにする必要があります。下のコードブロックは、2つの重要なスクリプトを追加します。 最初に、ページに関連付けられたターゲットクラウドサービスの検索機能を追加し、Adobe Targetへの呼び出しを行います。 2つ目は、cq.apps.targetingカテゴリの追加です。

cq.apps.targeting​カテゴリは、デフォルトのcq/personalization/component/apperationコンポーネントを上書きし、mobileapps/components/ターゲットコンポーネントを使用して、モバイルアプリケーションの使用に特化したオファーをレンダリングします。 詳しくは、「ターゲットコンポーネント」の節で説明します。

コードは、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>

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>

参照アプリケーション

head.htmlとbody.htmlの例は、AEM Mobileハイブリッドリファレンスアプリケーションにあり、2つのスクリプト内のスクリプトブロックを配置する開発者向けの場所を示しています。

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

コンテンツ作成者がモバイルアプリケーション向けのコンテンツの作成を完了したら、次の手順では、ソースをダウンロードしてアプリケーションをビルドします。つまり、コンテンツを公開するためにステージングします。開発者は、このための多くの手順に関与しています。コンテンツをレンダリングできるように、AEM Mobile では、コンテンツ同期ハンドラーを使用して、コンテンツのレンダリングとパッケージ化が行われます。パーソナライゼーションの使用例でターゲットコンテンツをレンダリングするために、新しいコンテンツ同期ハンドラーが導入されています。「mobileappofers」ハンドラーは、コンテンツ作成者が作成した関連するターゲットオファーをレンダリングする方法を知っています。 mobileappofersハンドラは抽象ページ更新ハンドラを拡張するので、多くのプロパティは似ています。 mobileappofersハンドラーの詳細には、次のプロパティがあります。

プロパティ	値	説明
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 の場合、オファーに含まれるすべてのビデオがレンダリングされます。偽のビデオはスキップされます。
path	/content/campaigns/<ブランド>	オファーが属するキャンペーンのブランドを指します。現在のところ、すべてのオファーは同じキャンペーンーに属している必要があります。
deep	true | false	trueの場合、すべての子ページを再帰的にレンダリングします。falseの場合、再帰しません。
extension	html	レンダリングされるリソースの拡張子を設定します。ページの拡張子が.htmlになるようにhtmlに設定します。

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

モバイルアプリケーション専用のコンテンツをレンダリングするために、AEM Mobile では mobileapps/components/target コンポーネントが使用されます。モバイルターゲットコンポーネントは、cq/personalization/components/engineコンポーネントを拡張し、engine_tnt.jspスクリプトをオーバーライドします。 engine_tnt.jspを上書きすることで、AEM Mobileはモバイルアプリの使用例で生成されたHTMLを制御できます。 コンテンツ作成者がターゲットにするすべてのコンポーネントに対して、engine_tnt.jspが関連するmboxを作成します。

mboxごとに​cq-targeting​の属性が追加され、アプリケーション開発者はカスタムコードを記述して、使い方を自由に指定できます。 AEM Mobileハイブリッド参照アプリには、cqターゲティング属性を使用するAngularディレクティブの例があります。 コンテンツ置換の時期と方法に関する概念は、モバイルアプリケーションの開発者に大きく左右されます。 AEM /etc/clientlibs/mobileapps/js/mobileapps.jsを介して提供されるモバイルSDKが、Adobeターゲットサービスを呼び出すためのAPIを提供します。 アプリケーションのデザインに従っていつ呼び出しを行うかは、アプリケーション開発者が指定します。

次の作業

1. AEM Mobile アプリを使ってみる
2. アプリのコンテンツを管理する
3. アプリケーションをビルドする
4. Adobe Mobile Analytics でアプリケーションのパフォーマンスをトラッキングする
5. Adobe Target でパーソナライズされたアプリケーションエクスペリエンスを提供する
6. 重要なメッセージをユーザーに送信する