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 サイトを開きます。

デバッガーが​ 前のレッスン ​で説明したように、your開発環境にタグプロパティをマッピングしていることを確認してください

に表示されているタグ開発環境

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

「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 サイトを開きます。

デバッガーが​ 前のレッスン ​で説明したように、your開発環境にタグプロパティをマッピングしていることを確認してください

に表示されているタグ開発環境

資格情報（test@test.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 サイトを開きます。

デバッガーが​ 前のレッスン ​で説明したように、your開発環境にタグプロパティをマッピングしていることを確認してください

に表示されているタグ開発環境

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

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

要求を 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. 詳細オプション​で、Orderを60に変更して、Load Target アクション（All Pages - Library LoadedがOrderに設定された50 ルール内）の後に実行されるようにします
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 サイトを開きます。

デバッガーが​ 前のレッスン ​で説明したように、your開発環境にタグプロパティをマッピングしていることを確認してください

に表示されているタグ開発環境

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

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

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

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

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

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

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

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

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