Platform Web SDK を使用したAdobe Targetの設定

Adobe Experience Platform Web SDK を使用してAdobe Target を実装する方法について説明します。エクスペリエンスを配信する方法と、追加パラメーターを Target に渡す方法について説明します。

Adobe Target は、顧客のエクスペリエンスのカスタマイズやパーソナライズに必要なすべてのツールを提供するAdobe Experience Cloud アプリケーションです。Web サイト、モバイル サイト、アプリ、その他のデジタル チャネルでの収益性を最大化することができます。

学習目標

このレッスンの最後では、Target の Web SDK 実装を使用して、次の操作を実行できます。

前提条件

このセクションのレッスンを完了するには、まず次の操作を行う必要があります。

ちらつき処理の追加

開始する前に、タグライブラリの読み込み方法に応じて、追加のちらつき処理ソリューションが必要かどうかを確認します。

非同期実装

タグライブラリが非同期で読み込まれると、Target がデフォルトのコンテンツをパーソナライズされたコンテンツに置き換える前に、ページのレンダリングが終了する場合があります。 この動作により、「ちらつき」と呼ばれる現象が発生する可能性があり、パーソナライズされたコンテンツに置き換えられる前に、デフォルトのコンテンツが短時間表示されます。 このちらつきを回避するには、Adobeでは、非同期タグ埋め込みコードの直前に、事前に非表示になる特別なスニペットを追加することをお勧めします。

このスニペットは既に Luma サイトに存在しますが、このコードの機能を詳しく見ていきます。

<script>
  !function(e,a,n,t){var i=e.head;if(i){
  if (a) return;
  var o=e.createElement("style");
  o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
  (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, ".personalization-container { opacity: 0 !important }", 3000);
</script>

事前に非表示になるスニペットは、選択した CSS 定義を使用してページの先頭にスタイルタグを作成します。 Target からの応答を受け取ったり、タイムアウトに達したりすると、このスタイルタグは削除されます。

事前に非表示にする動作は、スニペットの最後にある 2 つの設定によって制御されます。

事前に非表示になるスニペットは、タグ内でも使用できます。

同期実装

Adobeでは、Luma サイトで示されているように、タグを非同期で実装することをお勧めします。 ただし、タグライブラリが同期的に読み込まれる場合、事前に非表示になるスニペットは必要ありません。 代わりに、Platform Web SDK 拡張機能の設定で事前非表示のスタイルが指定されます。

同期実装の事前非表示スタイルは、次のように設定できます。

Platform Web SDK によるちらつきの管理方法について詳しくは、ガイドの節 パーソナライズされたエクスペリエンスのためのちらつきの管理を参照してください。

データストリームの設定

Platform Web SDK で Target アクティビティを配信するには、事前にデータストリーム設定で Target を有効にする必要があります。

データストリームで Target を設定するには：

プロパティトークン

Target Premium のお客様は、プロパティを使用してユーザー権限を管理できます。 Target プロパティを使用すると、ユーザーが Target アクティビティを実行できる場所の境界を確立できます。 詳しくは、Target ドキュメントの エンタープライズ権限の節を参照してください。

プロパティトークンを設定または検索するには、Adobe Target/管理/プロパティ に移動します。 「</>」アイコンに実装コードが表示されます。 at_property の値は、データストリームで使用するプロパティトークンです。

データストリームごとに 1 つのプロパティトークンのみを指定できますが、プロパティトークンのオーバーライドを使用すると、データストリームで定義されたプライマリプロパティトークンを置き換える代替プロパティトークンを指定できます。 データストリームを上書きするには、sendEvent アクションの更新も必要です。

ターゲット環境 ID

Target の 環境を使用すると、開発のすべてのステージを通じて実装を管理できます。 このオプション設定は、各データストリームで使用しようとしている Target 環境を指定します。

Adobeでは、物事をシンプルに保つために、開発環境、ステージング環境、実稼動のデータストリームごとにターゲット環境 ID を異なる方法で設定することをお勧めします。 または、hosts 機能を使用して、Target インターフェイスで環境を整理することもできます。

環境 ID を設定または検索するには、Adobe Target/管理/環境 に移動します。

Target サードパーティ ID 名前空間

このオプション設定を使用すると、ターゲットサードパーティ ID に使用する ID 記号を指定できます。 Target は、単一の ID 記号または名前空間でのプロファイル同期のみをサポートします。 詳しくは、Target ガイドの mbox3rdPartyId のリアルタイムプロファイル同期の節を参照してください。

ID 記号は、データ収集/顧客/ID の下の ID リストにあります。

Luma サイトを使用するこのチュートリアルでは、ID に関す lumaCrmId レッスンで設定した ID 記号を使用します。

ビジュアルパーソナライゼーションの決定のレンダリング

Visual Personalization の決定は、Adobe Targetの visual experience composer で作成されたエクスペリエンスを参照します。 まず、Target インターフェイスとタグインターフェイスで使用される用語を理解する必要があります。

​ イベントを送信 ​ アクションを更新

Target からのビジュアルパーソナライゼーションの決定は、データストリームで Target が有効になっている場合、Platform Web SDK によって配信されます。 ただし、自動的にはレンダリングされません。 自動レンダリングを有効にするには、​ イベントを送信 ​ アクションを更新する必要があります。

Visual Personalization 決定のレンダリング設定では、Target Visual Experience Composer または「グローバル mbox」を使用して指定された変更が Platform Web SDK によって自動的に適用されます。

カスタムコードを使用して、これらの決定に対するレンダリングやアクションを自分で行う場合は、「​ ビジュアルパーソナライゼーション決定をレンダリング ​ 設定を無効のままにできます。 Platform Web SDK は柔軟性が高く、完全に制御するためにこの機能を提供します。 パーソナライズされたコンテンツの手動によるレンダリング について詳しくは、ガイドを参照しください。

Visual Experience Composer を使用した Target アクティビティの設定

これで基本実装部分が完了したので、Target でエクスペリエンスのターゲット設定（XT）アクティビティを作成して、すべてが正しく動作していることを検証します。 サポートが必要な場合は、Target のチュートリアルで エクスペリエンスのターゲット設定アクティビティの作成を参照してください。

デバッガーでの検証

アクティビティを設定すると、ページにコンテンツがレンダリングされます。 ただし、ライブのアクティビティがない場合でも、イベントを送信ネットワーク呼び出しを調べて、Target が正しく設定されていることを確認できます。

カスタム決定範囲の設定とレンダリング

カスタム決定範囲（以前の「mbox」）は、Target フォームベースの Experience Composer を使用して構造化された方法でHTMLまたは JSON コンテンツを配信するために使用できます。 これらのカスタム範囲のいずれかに配信されるコンテンツは、Platform Web SDK によって自動的にはレンダリングされません。 タグのアクションを使用してレンダリングできます。

​ イベントを送信アクション ​ に範囲を追加する

ページ読み込みルールを変更して、カスタムの決定範囲を追加します。

Target からの応答を処理

homepage-hero スコープのコンテンツをリクエストするように Platform Web SDK を設定したので、応答で何らかの処理を行う必要があります。 Platform Web SDK タグ拡張機能には、Send Event Complete イベントが用意されています。このイベントは、Send Event アクションからのレスポンスを受信したときに新しいルールを直ちにトリガーするために使用できます。

フォームベースの Experience Composer を使用した Target アクティビティの設定

これで、カスタム決定範囲を手動でレンダリングするルールができたので、Target に別のエクスペリエンスのターゲット設定（XT）アクティビティを作成できます。 ここでは、フォームベースの Experience Composer を使用します。

デバッガーでの検証

アクティビティをアクティブ化すると、ページにコンテンツがレンダリングされるのが確認できます。 ただし、ライブのアクティビティがない場合でも、​ イベントの送信 ​ ネットワーク呼び出しを確認して、Target がカスタム範囲に対してコンテンツをリクエストしていることを確認できます。

Target へのパラメーターの送信

この節では、Target 固有のデータを渡し、XDM データが Target パラメーターにどのようにマッピングされるかを詳しく見ていきます。

ページ（mbox）パラメーターと XDM

すべての XDM フィールドは、 ページパラメーターまたは mbox パラメーターとして自動的に Target に渡されます。

これらの XDM フィールドの一部は、Target のバックエンドの特別なオブジェクトにマッピングされます。 例えば、web.webPageDetails.URL は、URL ベースのターゲティング条件を作成したり、プロファイルスクリプトを作成するときに page.url オブジェクトとして自動的に使用できるようになります。

また、データオブジェクトを使用してページパラメーターを追加することもできます。

特殊パラメーターおよびデータオブジェクト

XDM オブジェクトからマッピングされていない Target に役立つデータポイントがいくつかあります。 これらの特別な Target パラメーターには、以下が含まれます。

これらのパラメーターは、xdm オブジェクトではなく data オブジェクトで送信する必要があります。 また、data オブジェクトに page （または mbox）パラメーターを含めることもできます。

データオブジェクトにデータを入力するには、次のデータ要素を作成します。その際、 データ要素の作成レッスンで作成したデータ要素を再利用します。

ページ読み込みルールの更新

XDM オブジェクトの外部で Target に追加データを渡すには、適用可能なルールを更新する必要があります。 この例では、必要な変更は、新しい data.content データ要素を汎用のページ読み込みルールと製品ページ表示ルールに含めることだけです。

Personalizationおよび Analytics リクエストの分割

Luma サイトのデータレイヤーは、タグ埋め込みコードの前に完全に定義されます。 これにより、1 回の呼び出しを使用して、パーソナライズされたコンテンツの取得（Adobe Targetからなど）と、分析データの送信（Adobe Analyticsへなど）の両方を行うことができます。

ただし、多くの web サイトでは、データレイヤーを十分に早く読み込んだり、両方のアプリケーションで 1 回の呼び出しを使用するのに十分な速度で読み込んだりすることはできません。 このような状況では、1 回のページ読み込みで 2 つの ​ イベントを送信 ​ アクションを使用し、1 つ目をパーソナライゼーションに、2 つ目を分析に使用できます。 この方法でイベントを分割すると、Analytics イベントを送信する前にデータレイヤーが完全に読み込まれるのを待ちながら、パーソナライゼーションイベントをできるだけ早く実行できます。 これは、Adobe Targetがページの上部で target-global-mbox を実行し、Adobe Analyticsがページの下部で s.t() 呼び出しを実行する、多くの Web 以前の SDK 実装に似ています

パーソナライゼーションオントップリクエストを作成するには：

Analytics-on-bottom リクエストを作成するには：

デバッガーでの検証

ルールが更新されたので、Adobe Debuggerを使用してデータが正しく渡されているかどうかを検証できます。

Target インターフェイスでの検証

次に、Target インターフェイスで、データを受信し、オーディエンスやアクティビティで使用できることを確認します。 XDM データは、カスタムターゲットパラメーターに自動的にマッピングされます。 XDM データが Target によって受信され、オーディエンスを作成することで利用可能であることを検証できます。

次に、ログイン状態プロファイル属性が正常に渡されたことを検証します。

Target Premium を使用している場合は、エンティティデータが正しく渡され、商品データがRecommendations商品カタログに書き込まれたことを検証することもできます。

Assurance での検証

さらに、必要に応じて Assurance を使用して、Target 判定リクエストが正しいデータを取得し、サーバー側の変換が正しく行われていることを確認できます。 Target Decisioning とAdobe Analyticsの呼び出しが別々に送信された場合でも、キャンペーンとエクスペリエンスの情報がAdobe Analyticsの呼び出しに含まれていることを確認することもできます。

これは、Target Decisioning 呼び出しを行ったときに後で送信するためにキューに入れられた A4T 情報が、Analytics トラッキングコールが後でページで実行されたときに正しく送信されたことを確認します。

このレッスンを完了したので、Platform Web SDK を使用したAdobe Targetの実用的な実装が得られます。

次へ：