現在表示中:

注意:

アドビは、シングルページアプリケーションフレームワークをベースにしたクライアント側のレンダリング(React など)を必要とするプロジェクトには SPA エディターを使用することをお勧めします。詳細情報

注意:

このドキュメントは、AEM Mobile 使用の手引きの一部で、AEM Mobile のリファレンスの出発点として最適です。

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

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

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

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

管理者向け

コンテンツ作成者がモバイルアプリ向けのターゲットコンテンツの生成を開始する前に、いくつかの手順を実行する必要があります。ユーザーおよびグループの適切な権限セットの取得、クラウドサービスの作成、アクティビティ用のアプリケーションの設定を行った後、最後にコンテンツを生成します。

この記事では、AEM Mobile Hybrid Reference App を設定してターゲティングをおこなう場合に使用するプロセスについて説明します。

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

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

権限

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

ユーザーおよびグループのセットアップの一環として、target-activity-authors グループを apps-admins グループに追加することをお勧めします。target-activity-authors グループを追加すると、「パーソナライズ機能」ナビゲーションメニュー項目がユーザーに表示されます。

 

注意:

パーソナライゼーション管理コンソールへのアクセス権を付与するユーザーまたはグループを target-activity-authors グループに追加し忘れると、パーソナライゼーションコンソールがユーザーに表示されません。

クラウドサービス

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

 

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

Mobile クラウドサービス

 

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

chlimage_1

 

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

注意:

作成されたクラウドサービスは、ウィザードによって自動的にモバイルアプリケーションと関連付けられます。アプリグループノードの jcr:content ノードで cq:cloudserviceconfigs プロパティ値が設定されます。ハイブリッドアプリサンプルの場合、/content/mobileapps/hybrid-reference-app/jcr:content で、/etc/cloudservices/testandtarget/adobe-target---aem-apps/framework にある自動生成のフレームワークノードを指す値に設定されます。フレームワークノードには、デフォルトで設定される 2 つのプロパティ(gender および age)があります。フレームワークは AEM のプレビューのみで使用され、デバイスには影響しません。

 

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

chlimage_1

Adobe Mobile Services

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

クライアントコード

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

chlimage_1

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

Adobe Mobile Services クラウドサービス

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

chlimage_1

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

chlimage_1

 

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

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

chlimage_1

作成者向け

前提条件:前述のように、作成者が新しいターゲットコンテンツを生成できるようにするには、管理者が Adobe Target サービスへの接続を設定する必要があります。

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

 

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

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

開発者向け

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

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

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

例えば、/content/campaigns/hybridref に配置されているアクティビティがある場合、このパスをコピーし、mobileappoffers ハンドラーの path プロパティに値として貼り付けます。

注意:

Hybrid Reference App の場合、2 つの mobileappoffers ハンドラーがあり、1 つは開発用、もう 1 つは実稼動用です。

 

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

レンダリングモード

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

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

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

コンポーネント

コンテンツの基盤となるのは通常、HTL と JSP のどちらを使用するかに応じて、wcm/foundation/components/page または foundation/components/page のいずれかの基本 AEM ページコンポーネントを拡張するページコンポーネントです。これらの手順を実行する間は、主に wcm/foundation/components/page コンポーネントを使用します。ページコンポーネントの基本構造は、複数のスクリプトに細分化されています。それぞれのスクリプトに固有の目的があり、開発者は必要に応じてコードを編成およびオーバーライドできます。パーソナライゼーションに関連するスクリプトは head.html と body.html の 2 つです。この 2 つのスクリプトには、Context Hub、クラウドサービスおよび Mobile オーサリングをサポートするためにコードを挿入できる領域があります。 

次に、コンテンツターゲットを有効にするために使用される 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 カテゴリを追加するものです。 

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

次のコードを 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>

参照アプリケーション

AEM Mobile Hybrid Reference App にある head.html と body.html の例では、開発者は、2 つのスクリプト内のどこにスクリプトブロックを配置すればよいかを確認できます。

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

コンテンツ作成者がモバイルアプリケーション向けのコンテンツの作成を完了したら、次の手順では、ソースをダウンロードしてアプリケーションをビルドします。つまり、コンテンツを公開するためにステージングします。開発者は、このための多くの手順に関与しています。コンテンツをレンダリングできるように、AEM Mobile では、コンテンツ同期ハンドラーを使用して、コンテンツのレンダリングとパッケージ化が行われます。パーソナライゼーションの使用例でターゲットコンテンツをレンダリングするために、新しいコンテンツ同期ハンドラーが導入されています。「mobileappoffers」ハンドラーは、コンテンツ作成者によって作成された、関連するターゲットオファーをレンダリングする方法を認識しています。mobileappoffers ハンドラーは抽象ページ更新ハンドラーを拡張するので、プロパティの多くは同じです。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/<app> アプリの場所。
type mobileappoffers ハンドラーの名前は mobileappoffers です。
selector tandt tandt セレクターがターゲットコンテンツのレンダリングに使用されます。
targetRootDirectory www レンダリングされたコンテンツを永続化するルートディレクトリ。
includeImages true | false true の場合、オファーに含まれるすべての画像をレンダリングします。false の場合、画像はスキップされます。
includeVideos true | false true の場合、オファーに含まれるすべてのビデオをレンダリングします。false の場合、ビデオはスキップされます。
path /content/campaigns/<brand> オファーが参加するキャンペーンのブランドを指します。現時点では、すべてのオファーが同じキャンペーンに属している必要があります。
deep true | false true の場合、すべての子ページを再帰的にレンダリングします。false の場合は、再帰的にレンダリングしません。
extension html レンダリングされるリソースの拡張子を設定します。ページの拡張子が .html になるように html に設定します。

注意:

AEM Mobile Hybrid Reference App には、mobileappoffer ハンドラーのデフォルト設定があります。path プロパティはキャンペーンの場所によって異なるので、サンプルでは空です。キャンペーン作成者がキャンペーンを作成した後、アプリ管理者は、そのキャンペーンを指すように path プロパティを指定して、キャンペーンをハンドラーと関連付ける必要があります。

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

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

それぞれの mbox について、cq-targeting の属性が追加され、アプリケーション開発者は、使用するカスタムコードを自由に記述できます。AEM Mobile Hybrid Reference App には、cq-tar eting 属性を使用する Angular ディレクティブの例があります。いつ、どのようにしてコンテンツ置換が行われるかは、モバイルアプリケーション開発者次第です。AEM の /etc/clientlibs/mobileapps/js/mobileapps.js を通じて提供されるモバイル SDK には、Adobe Targeting サービスを呼び出す API が用意されています。アプリケーション開発者は、アプリケーションの設計に従って、その呼び出しを行うタイミングを指定する必要があります。

次の手順

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー