Adobe Target の追加
このレッスンでは、ページ読み込みリクエストとカスタムパラメーターを使用して Adobe Target 拡張機能を実装します。
Adobe Target は、顧客のエクスペリエンスのカスタマイズやパーソナライズに必要なすべてのツールを提供する Adobe Experience Cloud ソリューションです。Web サイト、モバイルサイト、アプリケーション、ソーシャルメディアおよびその他のデジタルチャネルでの収益性を最大化することができます。
- Platform launch(クライアント側)が tags
- Platform launchサーバー側が event forwarding
- エッジ設定が datastreams
学習内容
このレッスンを最後まで学習すると、以下の内容を習得できます。
- 非同期タグ埋め込みコードにより、Target の使用時にちらつきの管理に使用する、事前に非表示になるスニペットを追加する。
- Target v2 拡張機能を追加する
- ページ読み込み要求(旧称「グローバル mbox」)を実行する
- ページ読み込み要求にパラメーターを追加する
- プロファイルおよびエンティティパラメーターをページ読み込み要求に追加する方法について説明する
- 必須のパラメーターで注文確認要求を実行する
- ライブラリヘッダーやライブラリのフッターコードなどの高度な設定を追加する方法について説明する
- Target 実装の検証
前提条件
この節のレッスンを完了するには、まず タグの設定 および ID サービスを追加する.
Target 非表示スニペットを追加します。
開始する前に、タグ埋め込みコードを少し更新する必要があります。 タグ埋め込みコードが非同期で読み込まれる場合、Target ライブラリを完全に読み込んでコンテンツの入れ替えを実行する前に、ページのレンダリングが完了する可能性があります。 これにより、Target で指定し、パーソナライズされたコンテンツに置き換えられる前に、デフォルトのコンテンツが短時間表示される、「ちらつき」と呼ばれる現象が発生することがあります。このちらつきを回避する場合は、タグの非同期埋め込みコードの直前に、特別な事前非表示スニペットをハードコーディングすることを強くお勧めします。
これは既に Luma サイトでおこなわれていますが、実装を理解するために、サンプルページでおこないます。次のコード行をコピーします。
<script>
//prehiding snippet for Adobe Target with asynchronous tags deployment
;(function(win, doc, style, timeout) {
var STYLE_ID = 'at-body-style';
function getParent() {
return doc.getElementsByTagName('head')[0];
}
function addStyle(parent, id, def) {
if (!parent) {
return;
}
var style = doc.createElement('style');
style.id = id;
style.innerHTML = def;
parent.appendChild(style);
}
function removeStyle(parent, id) {
if (!parent) {
return;
}
var style = doc.getElementById(id);
if (!style) {
return;
}
parent.removeChild(style);
}
addStyle(getParent(), STYLE_ID, style);
setTimeout(function() {
removeStyle(getParent(), STYLE_ID);
}, timeout);
}(window, document, "body {opacity: 0 !important}", 3000));
</script>
サンプルページを開き、以下の図のように、タグ埋め込みコードの直前に貼り付けます(行番号は異なっても大丈夫です)。 このスクリーンショットでは、事前非表示のスニペットが縮小されています。
サンプルページを再度読み込みます。ページは、表示されるまでの 3 秒間、非表示になっています。この動作は一時的なもので、Target をデプロイすると消滅します。この事前非表示の動作は、スニペットの最後にある 2 つの設定で制御します。この設定は、カスタマイズすることもできますが、通常はデフォルト設定のまま残しておくのが最適です。
body {opacity: 0 !important}
で、 Target が読み込まれるまでの間に事前非表示に使用する CSS 定義を指定します。デフォルトでは、本文全体が非表示になっています。ナビゲーション配下のすべてのコンテンツをラップする、識別しやすいコンテナ要素を使用した一貫性のある DOM 構造があり、ナビゲーションのテストやパーソナライズを実行したくない場合は、この設定を使用して、そのコンテナ要素の事前非表示を制限できます。3000
これは、事前非表示のタイムアウト設定を指定します。デフォルトでは、Target が 3 秒間で読み込まれない場合、ページが表示されます。これは極めてまれです。
詳細について、および非圧縮の事前非表示スニペットを入手するには、非同期デプロイメントを使用した Adobe Target 拡張機能を参照してください。
Target 拡張機能の追加
Adobe Target 拡張機能は、Target の最新の Web 用 JavaScript SDK、at.js を使用してクライアントサイド実装をサポートします。Target の古いライブラリである mbox.js、 at.js 2.x にアップグレードする必要がある タグを使用するために使用します。
Target v2 拡張機能は、次の 2 つの主要部分で構成されます。
-
コアライブラリ設定を管理する拡張機能の設定
-
次の操作を実行するルールアクション:
- Target の読み込み(at.js 2.x)
- パラメーターのページ読み込み要求への追加
- パラメーターのすべての要求への追加
- ページ読み込み要求の実行
この最初の演習では、拡張機能を追加し、設定を確認します。後の演習では、このアクションを使用します。
拡張機能を追加するには、以下を実行します。
-
拡張機能/カタログ に移動します。
-
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 バージョンが表示されます。
-
ライブラリに保存 をクリックします。
この時点で Target はまだ何も実行していないので、検証するものは何もありません。
Target の読み込みとページ読み込み要求の実行
コンテンツのテストとターゲティングをおこなう際、マーケターは Target を使用して、ページ上の訪問者エクスペリエンスを制御します。Target はページの最終的な表示において重要な役割を果たすので、ページの表示への影響を最小限に抑えるために、できるだけ早く読み込む必要があります。この節では、Target JavaScript ライブラリ(at.js)を読み込み、ページ読み込み要求(以前のバージョンの at.js では「グローバルmbox」と呼ばれます)を実行します。
データ要素、ルールおよびライブラリの追加のレッスンで作成した All Pages - Library Loaded
ルールは、ページの読み込み時に可能な限り早くトリガーされているので、Target の実装に使用できます。
ターゲットを読み込むには、以下を実行します。
-
次に移動: ルール 左側のナビゲーションで、
All Pages - Library Loaded
ルールエディターを開くには、以下を実行します。 -
「アクション」の下の をクリックして、新しいアクションを追加します。
-
拡張機能/Adobe Target v2 を選択します。
-
アクションタイプ/ターゲットの読み込み を選択します。
-
変更を保存 をクリックします。
をクリックします。
Load Target
アクションが追加されると、at.js がページに読み込まれます。ただし、Fire Page Load Request
アクションを追加するまで、Target 要求は実行されません。
ページ読み込み要求の実行
-
「アクション」で、プラスアイコン をもう一度クリックし、別のアクションを追加します。
-
拡張機能/Adobe Target v2 を選択します。
-
アクションタイプ/ページ読み込みリクエストを実行 を選択します。
-
ページを非表示にするかどうかに関するページ読み込み要求で利用できる設定や、事前非表示に使用する CSS セレクターがあります。これらの設定は、ページ上でハードコードされた事前非表示スニペットと組み合わせて使用します。デフォルト設定はそのままにしておきます。
-
変更を保存 をクリックします。
-
Load Target
アクションの後に新しいアクションが順に追加され、アクションがこの順序で実行されます。アクションをドラッグ&ドロップして順序を並べ替えることができますが、このシナリオではLoad Target
はFire Page Load Request
より前に配置する必要があります。 -
「ライブラリに保存してビルド」をクリックします。
ページ読み込み要求の検証
これで、Target v2 拡張機能を追加し、 Load Target
および Fire Page Load Request
アクションを使用する場合、タグプロパティが使用されるすべてのページに対してページ読み込み要求が実行される必要があります。
「ターゲットを読み込み」および「ページ読み込み要求を実行」アクションを検証するには、以下を実行します。
-
サンプルページを再度読み込みます。ページが表示されるまでにかかっていた 3 秒の遅延がなくなりました。
file://
プロトコルを使用してサンプルページを読み込む場合、Firefox または Safari ブラウザーでこの手順を実行する必要があります。これは、file://
プロトコルを使用している場合、Chrome は Target 要求を実行しないためです。 -
Luma サイトを開きます。
-
Debugger がタグプロパティをにマッピングしていることを確認します。 あなたの 開発環境 (「 前のレッスン
-
デバッガーの「概要」タブに移動します。
-
「
Launch
」セクションで、Extensions
見出しの下にTarget
が表示されることを確認します。 -
「
Target
」セクションで、at.js ライブラリのバージョンが表示されることを確認します。 -
最後に、
Target
タブに移動し、クライアントコードを展開して、ページ読み込みリクエストが表示されることを確認します。
おめでとうございます。Target を実装しました。
パラメーターの追加
Target リクエストにパラメーターを渡すと、ターゲティング、テスト、パーソナライゼーションアクティビティに強力な機能が追加されます。タグ拡張機能には、パラメーターを渡すための 2 つのアクションが用意されています。
-
Add Params to Page Load Request
は、ページ読み込みリクエストにパラメーターを追加します(targetPageParams()メソッドと同じ)。 -
Add Params to All Requests
を呼び出すと、ページ読み込み要求に加えてカスタムコードアクションからおこなわれた追加の要求や、サイトにハードコードされたなど、すべての Target 要求にパラメーターが追加されます(targetPageParamsAll()メソッドと同じ)。
これらのアクションは、Load Target
アクションの 前に 使用して、ルール設定に基づいて異なるページに異なるパラメーターを設定できます。ID サービスで顧客 ID を設定するときに使用したルール順序付け機能を使用して、ルールがページ読み込み要求を実行する前に Library Loaded
イベントに追加のパラメーターを設定します。
Add Params to Page Load Requests
アクションを使用するだけで十分です。要求(mbox)パラメーター
パラメーターは、カスタムデータを Target に渡し、パーソナライゼーション機能を強化するために使用されます。ページ名やテンプレートなど、閲覧セッション中に頻繁に変更され、永続化されない属性に最適です。
データ要素、ルール、ライブラリの追加で先ほど作成した Page Name
データ要素を要求パラメーターとして追加します。
要求パラメーターを追加するには、以下を実行します。
-
次に移動: ルール 左側のナビゲーションで、
All Pages - Library Loaded
をクリックして、ルールエディターを開きます。 -
「アクション」の下の をクリックして、新しいアクションを追加します。
-
拡張機能/Adobe Target v2 を選択します。
-
アクションタイプ/ページ読み込み要求にパラメーターを追加 を選択します。
-
pageName
名前 として と入力します。 -
をクリックして、データ要素モーダルを開きます。
-
Page Name
データ要素をクリックします。 -
「選択」ボタンをクリックします。
-
変更を保存 をクリックします。
をクリックします。
-
Add Params to Page Load Request
アクションの左端をクリック&ドラッグして、Fire Page Load Request
アクションの前に並べ替えます(Load Target
アクションの前でも後でも可能)。 -
「ライブラリに保存してビルド」をクリックします。
要求パラメーターの検証
at.js 2.x 要求で渡されたカスタムパラメーターをデバッガーで表示するのは容易でないので、ブラウザーの開発者ツールを利用します。
pageName 要求パラメーターを検証するには、以下を実行します。
- Luma サイトを再読み込みし、独自のタグプロパティにマッピングされていることを確認します。
- ブラウザーの開発者ツールを開きます。
- 「ネットワーク」タブをクリックします。
- 要求を
tt.omtrdc
にフィルターします(または Target 要求の場合は CNAME ドメイン) - 「
Headers
/Request Payload
/execute.pageLoad.parameters
」セクションを展開して、pageName
パラメーターと値を検証します。
プロファイルパラメーター
要求パラメーターと同様、プロファイルパラメーターは Target 要求経由で渡されます。ただし、プロファイルパラメーターは Target の訪問者プロファイルデータベースに保存され、訪問者のプロファイルの期間中保持されます。これらの設定はサイトのいずれかのページで指定し、他のページの Target アクティビティで使用できます。以下に、自動車の Web サイトの例を示します。訪問者が車両のページに移動したら、プロファイルパラメーター「profile.lastViewed=sportscar」を渡して、特定の車両への関心を記録することができます。訪問者が他のページ(車両以外のページ)を閲覧すると最後に閲覧した車に基づいてコンテンツをターゲット設定できます。プロファイルパラメーターは、ほとんど変更されない、または特定のページでのみ利用可能な属性に最適です。
このチュートリアルではプロファイルパラメーターは渡されませんが、ワークフローは pageName
パラメーターを渡す際の操作とほぼ同じです。違いの 1 つは、プロファイルパラメーターに profile.
プレフィックスを付ける必要があるという点です。この点で、「userType」と呼ばれるパラメーターは Add Params to Page Load Request
アクションで以下のようになります。
エンティティパラメーター
エンティティパラメーターは、主に次の 3 つの理由により、Recommendations の実装で使用される特別なパラメーターです。
- 製品のレコメンデーションをトリガーするためのキー。例えば、「製品 Xを閲覧し、Y も閲覧した人」などのレコメンデーションアルゴリズムを使用する場合、「X」はレコメンデーションの「キー」になります。訪問者が現在閲覧している製品の sku(
entity.id
)またはカテゴリー(entity.categoryId
)です。 - 「最近閲覧した製品」や「最も多く閲覧された製品」など、レコメンデーションアルゴリズムを強化する訪問者行動を収集する場合。
- Recommendations カタログを生成する場合。Recommendations には、Web サイト上のすべての製品または記事のデータベースが含まれおり、それらを Recommendations オファーで使用することができます。例えば、製品をレコメンデーションする場合は一般的に、製品名(
entity.name
)や画像(entity.thumbnailUrl
)などの属性を表示する必要があります。バックエンドフィードを使用してカタログに入力する顧客もいますが、Target リクエストのエンティティパラメーターを使用して入力することもできます。
このチュートリアルではエンティティパラメーターを渡す必要はありませんが、ワークフローは、 pageName
リクエストパラメーター — パラメーターに「entity」プレフィックスが付いた名前を付けます。 関連するデータ要素にマップします。メモ一部の一般的なエンティティには、使用する必要のある予約名(製品 sku のエンティティ ID など)があります。Add Params to Page Load Request
アクションでエンティティパラメーターを設定すると、次のようになります。
顧客 ID パラメーターの追加
Adobe Experience Platform ID サービスを使用して顧客 ID を収集すると、Adobe Experience Cloud の顧客属性機能を使用して CRM データを Target に簡単にインポートできます。また、デバイスをまたいだ訪問者のステッチも可能で、顧客がデバイス(ノート PC とモバイルデバイスなど)を切り替えても、一貫したユーザーエクスペリエンスを維持できます。
ページ読み込み要求を実行する前に、ID サービスの Set Customer IDs
アクションに顧客 ID を設定する必要があります。そのためには、サイトに次の機能があることを確認します。
- 顧客 ID は、タグ埋め込みコードの前に、ページ上で使用できる必要があります
- Adobe Experience Platform ID サービス拡張機能がインストールされている必要があります。
- 「Library Loaded (Page Top)」イベントで実行するルールで、
Set Customer IDs
アクションを使用する必要があります。 - 「Set Customer IDs」アクションの 後で 実行する「
Fire Page Load Request
」アクションを使用します。
前のレッスン「Adobe Experience Platform ID サービスの追加」では、「Set Customer IDs」アクションを実行するAll Pages - Library Loaded - Authenticated - 10
ルールを作成しました。このルールでは Order
の設定は 10
となっているので、顧客 ID は、All Pages - Library Loaded
ルール(Order
は 50
に設定)でページ読み込み要求が実行される前に設定されます。これで、Target の顧客 ID のコレクションを実装しました。
顧客 ID の検証
at.js 2.x 要求で渡されたカスタムパラメーターをデバッガーで表示するのは容易でないので、ブラウザーの開発者ツールを利用します。
顧客 ID を検証するには、以下を実行します。
-
Luma サイトを開きます。
-
Debugger がタグプロパティをにマッピングしていることを確認します。 あなたの 開発環境 (「 前のレッスン
-
資格情報(
test@adobe.com
/test
)を使用して Luma サイトにログインします。 -
Luma のホームページに戻ります。
-
ブラウザーの開発者ツールを開きます。
-
「ネットワーク」タブをクリックします。
-
要求を
tt.omtrdc
にフィルターします(または Target 要求の場合は CNAME ドメイン) -
「
Headers
/Request Payload
/id.customerIds.0
」セクションを展開して、顧客 ID の設定と値を検証します。
プロパティトークンパラメーターの追加
プロパティトークンは、Target Premium のエンタープライズユーザー権限で使用される予約済みパラメーターです。異なるデジタルプロパティを定義するために使用され、Experience Cloud 組織のメンバーは、プロパティごとに異なる権限を割り当てることができます。例えば、1 つのユーザーグループが Web サイト上で Target アクティビティを設定でき、モバイルアプリケーション内では設定できないようにするとします。
Target プロパティは、タグプロパティおよび Analytics レポートスイートに似ています。 複数のブランド、Web サイト、マーケティングチームの企業は、Web サイトやモバイルアプリごとに異なる Target プロパティ、タグプロパティ、Analytics レポートスイートを使用できます。 タグのプロパティは埋め込みコードで区別され、Analytics レポートスイートはレポートスイート ID で区別され、Target プロパティはプロパティトークンパラメーターで区別されます。
プロパティトークンは、 targetPageParams()
関数に置き換えます。 単一のタグプロパティで異なる at_property 値を使用して、異なるを持つ複数のサイトを実装する場合、データ要素を介して at_property 値を管理できます。
Target Premium のお客様がチュートリアルプロパティにプロパティトークンを実装する場合の、オプションの演習は次のとおりです。
-
別のタブで、Target ユーザーインターフェイスを開きます。
-
に移動します。 管理/プロパティ
-
使用するプロパティを特定し、 </> (または新しいプロパティを作成)
-
内でコードスニペットをコピーします。
<script></script>
をクリップボードに追加します。 -
「タグ」タブで、 ルール 左側のナビゲーションで、
All Pages - Library Loaded
をクリックして、ルールエディターを開きます。 -
「アクション」で、
Core - Custom Code
アクションをクリックして、Action Configuration
を開きます。 -
コードエディターを開き、
targetPageParams()
関数 -
次をクリックします。 保存 ボタン
-
次を確認します。 グローバルに実行 そのように
targetPageParams()
はグローバルスコープで宣言されます。 -
変更を保存 をクリックします。
をクリックします。
-
「ライブラリに保存してビルド」をクリックします。
at_property
パラメーターを パラメーターをページ読み込み要求に追加 アクションの実行時に、パラメーターがネットワークリクエストに入力されますが、Target の Visual Experience Composer(VEC) はページの読み込み時に自動検出できません。 常に at_property
の使用 targetPageParams()
関数を追加します。プロパティトークンの検証
at.js 2.x 要求で渡されたカスタムパラメーターをデバッガーで表示するのは容易でないので、ブラウザーの開発者ツールを利用します。
プロパティトークンパラメーターを検証するには、いかを実行します。
カスタム要求の追加
注文確認要求の追加
注文確認要求は、注文の詳細を Target に送信するために使用される特別なタイプの要求です。3 つの特定の要求パラメーター(orderId、orderTotal、productPurchasedId)を含めると、通常の Target 要求が 1 つの注文要求に変わります。売上高のレポートに加えて、注文要求でも次の処理をおこないます。
- 誤って再送信された注文を除外する
- 極端な注文をフィルタリングする(合計が平均の標準偏差から 3 以上離れている注文)
- バックグラウンドで異なるアルゴリズムを使用して、統計的信頼性を計算する
- 個々の注文詳細に対し、ダウンロード可能な特別監査レポートを作成する
ベストプラクティスは、小売り以外のサイトでも注文確認リクエストを注文確認リクエストで使用することです。 例えば、リードジェネレーションサイトには通常、生成された一意の「リード ID」を持つリードファネルが最後にあります。これらのサイトでは、orderTotal に静的な値(「1」など)を使用して注文要求を実装する必要があります。
Analytics for Target(A4T) 統合をレポートのほとんどに使用しているお客様は、A4T をサポートしていないAutomated Personalizationアクティビティを使用する場合、注文要求を実装することも推奨されます。 さらに、注文要求は、購入行動に基づくアルゴリズムを支える、Recommendations 実装の重要な要素です。A4T のサポートに関する最新情報については、 ドキュメント.
注文確認要求は、注文確認ページまたはイベントでのみトリガーされるルールから実行する必要があります。多くの場合、注文確認要求は Adobe Analytics 購入イベントを設定するルールと組み合わせることができます。これは、コア拡張機能の「Custom Code」アクションで、適切なデータ要素を使用して orderId、orderTotal、productPurchasedId パラメーターを設定する適切なデータ要素を使用して設定する必要があります。
Luma サイトで注文確認リクエストを実行する必要があるデータ要素とルールを追加します。複数のデータ要素を作成済みであるため、これらの手順は省略されます。
注文 ID のデータ要素を作成するには、以下を実行します。
- クリック データ要素 左のナビゲーションで
- データ要素を追加 をクリックします。
- データ要素に「
Order Id
」と名前を付けます。 - データ要素の種類/JavaScript 変数 を選択します。
digitalData.cart.orderId
をJavaScript variable name
として使用します。Clean text
オプションをオンにします。- ライブラリに保存 をクリックします(注文確認要求のすべての変更をおこなうまで、ライブラリはビルドされません)。
買い物かごの金額のデータ要素を作成するには、以下を実行します。
- データ要素を追加 をクリックします。
- データ要素に「
Cart Amount
」と名前を付けます。 - データ要素の種類/JavaScript 変数 を選択します。
digitalData.cart.cartAmount
をJavaScript variable name
として使用します。Clean text
オプションをオンにします。- ライブラリに保存 をクリックします。
買い物かご SKU(Target)用データ要素を作成するには、以下を実行します。
-
データ要素を追加 をクリックします。
-
データ要素に「
Cart SKUs (Target)
」と名前を付けます。 -
データ要素の種類/カスタムコード を選択します。
-
Target の場合、skus はコンマ区切りリストである必要があります。このカスタムコードでは、データレイヤー配列を適切な形式に変更します。カスタムコードエディターで、以下を貼り付けます。
code language-javascript 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
-
イベント/追加 をクリックします。
- イベントの種類/Library Loaded (Page Top) を選択します。
- の下 詳細オプション、
Order
から60
だから後で火がつくLoad Target
行動 ( 私たちのAll Pages - Library Loaded
規則を次に示します。Order
が50
) - 変更を保存 をクリックします。
-
条件/追加 をクリックします。
-
条件の種類/クエリ文字列なしのパス を選択します。
-
Path equals
にはthank-you.html
を入力します。 -
「正規表現」オプションをオンにして、ロジックを
equals
からcontains
に変更します(Test
機能を使用して、URL のテストが合格することを確認できます)。https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html
-
変更を保存 をクリックします。
-
-
アクション/追加 をクリックします。
-
アクションの種類/カスタムコード を選択します。
-
エディターを開く をクリックします。
-
次のコードを、
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); } });
-
保存 をクリックしてカスタムコードを保存します。
-
変更を保存 をクリックして、アクションを保存します。
-
-
「ライブラリに保存してビルド」をクリックします。
注文確認要求の検証
at.js 2.x 要求で渡されたカスタムパラメーターをデバッガーで表示するのは容易でないので、ブラウザーの開発者ツールを利用します。
-
Luma サイトを開きます。
-
Debugger がタグプロパティをにマッピングしていることを確認します。 あなたの 開発環境 (「 前のレッスン
-
サイトを参照し、買い物かごに複数の製品を追加します。
-
チェックアウトを続行します。
-
チェックアウトプロセスでは、必須のフィールドは
First Name
とLast Name
です。 -
注文確認ページで、必ず「
Place Order
」ボタンをクリックしてください。 -
ブラウザーの開発者ツールを開きます。
-
「ネットワーク」タブをクリックします。
-
要求を
tt.omtrdc
にフィルターします(または Target 要求の場合は CNAME ドメイン)。 -
2 つ目の要求をクリックします。
-
「
Headers
/Request Payload
/execute.mboxes.0
」セクションを展開して、要求名と注文パラメーターを検証します。
カスタムリクエスト
まれに、ページ読み込みおよび注文確認要求以外の Target 要求を作成する必要があります。 例えば、パーソナライゼーションに使用する重要なデータは、ページの下部にハードコードされたり、非同期 API リクエストから返されたりするので、タグ埋め込みコードの前にページで定義されていない場合があります。 このデータは、追加のリクエストを使用して Target に送信できますが、ページが既に表示されているので、コンテンツ配信にこのリクエストを使用するのは最適ではありません。 このデータは、後で使用するための訪問者プロファイルの強化(プロファイルパラメーターを使用)、またはRecommendationsカタログへの入力に使用できます。
このような状況では、コア拡張機能のカスタムコードアクションで、getOffer()/applyOffer() および trackEvent() メソッドを使用して要求を実行します。この操作は、注文確認要求の演習のときとよく似ていますが、異なる要求名を使用し、特別な注文パラメーターは使用しません。カスタムコードから Target 要求を実行する前に、必ず Load Target アクションを使用してください。
ライブラリのヘッダーとライブラリのフッター
Target ユーザーインターフェイスの at.js 画面の編集画面には、at.js ファイルの直前または直後に実行するカスタム JavaScript を貼り付けることができます。ライブラリヘッダーは、targetGlobalSettings() 関数経由で at.js 設定を上書きしたり、データプロバイダー機能を使用してサードパーティからデータを渡したりする場合に使用されます。ライブラリフッターは、at.js カスタムイベントリスナーの追加に使用される場合があります。
この機能をタグで複製するには、Core 拡張機能の「Custom Code」アクションを使用して、「Load Target」アクションの前(ライブラリヘッダー)または後(ライブラリフッター)にアクションのシーケンスを設定するだけです。 これは、以下の図のように、 Load Target
アクションと同じルールで実行することも、Load Target
の前後に確実に実行するイベントや順序の設定を使用して別のルールで実行することもできます。
カスタムヘッダーやフッターの使用例について詳しくは、以下のリソースを参照してください。