Adobe Target の追加

コアライブラリ設定を管理する拡張機能の設定

次の操作を実行するルールアクション：

1. Target の読み込み（at.js 2.x）
2. パラメーターのページ読み込み要求への追加
3. パラメーターのすべての要求への追加
4. ページ読み込み要求の実行

拡張機能/カタログ に移動します。

Adobe Target の拡張機能をすばやく見つけるには、フィルターに target を入力します。Adobe Target と Adobe Target v2 の 2 つの拡張機能があります。このチュートリアルでは、従来の Web サイトとシングルページアプリケーション（SPA）の両方に最適な最新バージョンの at.js（現在は 2.x）を使用する拡張機能の v2 バージョンを使用します。

「インストール」をクリックします。

拡張機能を追加すると、多くの at.js 設定が読み込まれますが、以下の図に示すように、すべての at.js 設定が Target インターフェイスから読み込まれる訳ではありません。読み込まれない設定の 1 つとして、タイムアウトがあります。これは常に、拡張機能を追加してから 3000 ミリ秒後となります。このチュートリアルでは、デフォルト設定をそのままにしておきます。左側には、現在のバージョンの拡張機能に付属している at.js バージョンが表示されます。

「ライブラリに保存」をクリックします

左側のナビゲーションで ルール に移動し、「All Pages - Library Loaded」をクリックしてルールエディターを開きます

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能/Adobe Target v2 を選択します。

アクションタイプ/ターゲットを読み込み を選択します。

「変更を保持」をクリックします

をクリックします。

「アクション」で、プラスアイコン をもう一度クリックし、別のアクションを追加します。

拡張機能/Adobe Target v2 を選択します。

アクションタイプ/ページ読み込みリクエストを実行 を選択します。

ページを非表示にするかどうかに関するページ読み込み要求で利用できる設定や、事前非表示に使用する CSS セレクターがあります。これらの設定は、ページ上でハードコードされた事前非表示スニペットと組み合わせて使用します。デフォルト設定はそのままにしておきます。

「変更を保持」をクリックします

Load Targetアクションの後に新しいアクションが順に追加され、アクションがこの順序で実行されます。アクションをドラッグ&ドロップして順序を並べ替えることができますが、このシナリオでは Load Target は Fire Page Load Request より前に配置する必要があります。

「ライブラリおよびビルドに保存」をクリックします

サンプルページを再度読み込みます。ページが表示されるまでにかかっていた 3 秒の遅延がなくなりました。file:// プロトコルを使用してサンプルページを読み込む場合、Firefox または Safari ブラウザーでこの手順を実行する必要があります。これは、file:// プロトコルを使用している場合、Chrome は Target 要求を実行しないためです。

Luma サイトを開きます。

前のレッスンの説明に従って、Debugger がタグプロパティを 自分の 開発環境にマッピングしていることを確認します。

デバッガーの「概要」タブに移動します。

「Launch」セクションで、Extensions 見出しの下に Target が表示されることを確認します。

「Target」セクションで、at.js ライブラリのバージョンが表示されることを確認します。

最後に、Targetタブに移動し、クライアントコードを展開して、ページ読み込みリクエストが表示されることを確認します。

Add Params to Page Load Request は、ページ読み込みリクエストにパラメーターを追加します（targetPageParams()メソッドと同じ）。

Add Params to All Requests を呼び出すと、ページ読み込み要求に加えてカスタムコードアクションからおこなわれた追加の要求や、サイトにハードコードされたなど、すべての Target 要求にパラメーターが追加されます（targetPageParamsAll()メソッドと同じ）。

左側のナビゲーションで ルール に移動し、「All Pages - Library Loaded」をクリックしてルールエディターを開きます。

「アクション」の下の をクリックして、新しいアクションを追加します。

拡張機能/Adobe Target v2 を選択します。

アクションタイプ/ページ読み込みリクエストにパラメーターを追加 を選択します。

名前 として pageName と入力します

をクリックして、データ要素モーダルを開きます。

Page Name データ要素をクリックします。

「選択 ボタンをクリックします

「変更を保持」をクリックします

をクリックします。

Add Params to Page Load Request アクションの左端をクリック&ドラッグして、Fire Page Load Request アクションの前に並べ替えます（Load Target アクションの前でも後でも可能）。

「ライブラリおよびビルドに保存」をクリックします

Luma サイトを開きます。

前のレッスンの説明に従って、Debugger がタグプロパティを 自分の 開発環境にマッピングしていることを確認します。

資格情報（test@adobe.com／test）を使用して Luma サイトにログインします。

Luma のホームページに戻ります。

ブラウザーの開発者ツールを開きます。

「ネットワーク」タブをクリックします。

要求を tt.omtrdc にフィルターします（または Target 要求の場合は CNAME ドメイン）

「Headers／Request Payload／id.customerIds.0」セクションを展開して、顧客 ID の設定と値を検証します。

別のタブで、Target ユーザーインターフェイスを開きます。

管理/ プロパティ に移動します。

使用するプロパティを特定して、「</> をクリックします（または新しいプロパティを作成します）

<script></script> 内のコードスニペットをクリップボードにコピーします

「タグ」タブで、左側のナビゲーションの ルール に移動し、「All Pages - Library Loaded」をクリックしてルールエディターを開きます。

「アクション」で、Core - Custom Code アクションをクリックして、 Action Configuration を開きます。

コードエディターを開き、targetPageParams() 関数を含む Target インターフェイスからコードをペーストします

「保存 ボタンをクリックします

「グローバルに実行」ボックスをオンにして、targetPageParams() がグローバルスコープで宣言されるようにします

「変更を保持」をクリックします

をクリックします。

「ライブラリおよびビルドに保存」をクリックします

Luma サイトを開きます。

前のレッスンの説明に従って、Debugger がタグプロパティを 自分の 開発環境にマッピングしていることを確認します。

ブラウザーの開発者ツールを開きます。

「ネットワーク」タブをクリックします。

要求を tt.omtrdc にフィルターします（または Target 要求の場合は CNAME ドメイン）

「Headers／Request Payload／property.token」セクションを展開して、値を検証します。

「データ要素を追加」をクリックします。

データ要素に「Cart SKUs (Target)」と名前を付けます。

データ要素タイプ/カスタムコード を選択します

Target の場合、skus はコンマ区切りリストである必要があります。このカスタムコードでは、データレイヤー配列を適切な形式に変更します。カスタムコードエディターで、以下を貼り付けます。

var targetProdSkus="";
for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
  if(i>0) {
    targetProdSkus = targetProdSkus + ",";
  }
  targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
}
return targetProdSkus;

Force lowercase value オプションをオンにします。

Clean text オプションをオンにします。

「ライブラリに保存」をクリックします

左側のナビゲーションで「ルール」をクリックします

「ルールを追加」をクリックします

ルール名を設定します。Order Confirmation Page - Library Loaded - 60

イベント/追加 をクリックします。

1. イベントタイプ/ライブラリの読み込み（ページのトップ）
2. 詳細オプション で、Load Target アクションの後に実行されるように、Order を 60 に変更します（これは、Order が 50 に設定されている All Pages - Library Loaded ルール内にあります）
3. 「変更を保持」をクリックします

条件/追加 をクリックします

1. 条件タイプ/クエリ文字列を含まないパス を選択します。

2. Path equals には thank-you.html を入力します。

3. 「正規表現」オプションをオンにして、ロジックを equals から contains に変更します（Test 機能を使用して、URL のテストが合格することを確認できます）。https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html

   

4. 「変更を保持」をクリックします

アクション/追加 をクリックします。

1. アクションタイプ/カスタムコード を選択します。

2. 編集画面を開く をクリックします

3. 次のコードを、Edit Code モーダルに貼り付けます。

   code language-javascript

   adobe.target.getOffer({ "mbox": "orderConfirmPage", "params":{ "orderId": _satellite.getVar('Order Id'), "orderTotal": _satellite.getVar('Cart Amount'), "productPurchasedId": _satellite.getVar('Cart SKUs (Target)') }, "success": function(offer) { adobe.target.applyOffer({ "mbox": "orderConfirmPage", "offer": offer }); }, "error": function(status, error) { console.log('Error', status, error); } });

4. 「保存」をクリックして、カスタムコードを保存します

5. 「変更を保持」をクリックして、アクションを保持します

「ライブラリおよびビルドに保存」をクリックします

Luma サイトを開きます。

前のレッスンの説明に従って、Debugger がタグプロパティを 自分の 開発環境にマッピングしていることを確認します。

サイトを参照し、買い物かごに複数の製品を追加します。

チェックアウトを続行します。

チェックアウトプロセスでは、必須のフィールドは First Name と Last Name です。

注文確認ページで、必ず「Place Order」ボタンをクリックしてください。

ブラウザーの開発者ツールを開きます。

「ネットワーク」タブをクリックします。

要求を tt.omtrdc にフィルターします（または Target 要求の場合は CNAME ドメイン）。

2 つ目の要求をクリックします。

「Headers／Request Payload／execute.mboxes.0」セクションを展開して、要求名と注文パラメーターを検証します。