作成対象：
Intermediate
Experienced
Developer
at.jsからPlatform Web SDKに移行するために、ページ上のAdobe Targetの実装を置き換える方法について説明します。 基本的な置き換えは、次の手順で構成されます。
Targetの管理設定を確認し、IMS組織IDをメモします
at.js ライブラリをPlatform Web SDKに置き換える
同期ライブラリ実装の事前非表示スニペットを更新する
Platform Web SDKの設定
Targetの管理設定の確認
TargetをPlatform Web SDKに移行する最初の手順は、Target インターフェイスの管理 セクションで設定を確認することです。
実装
アカウントの詳細
IMS Organization Id - Platform Web SDKを設定するために必要な値なので、この値をメモします。On-Device Decisioning – この機能は、Platform Web SDKではサポートされていません。 この設定は、移行後に無効にすることができ、web サイトでat.jsを使用しなくなった場合、またはオンデバイス決定のサーバーサイドのユースケースがある場合は無効にできます。
実装方法
実装方法 セクションのすべての編集可能な設定は、at.jsにのみ適用されます。 これらの設定は、実装用にカスタマイズされたat.js ライブラリを生成するために使用されます。 これらの設定を確認して、カスタムコードがあるか、クロスドメインのユースケースに対して1st パーティと3rd パーティのCookieを設定しているかどうかを確認します。
Profile Lifetime 設定は、Adobe カスタマーケアのみが変更できます。 ターゲット訪問者プロファイルの有効期間は、実装アプローチの影響を受けません。 at.jsとPlatform Web SDKの両方で、同じ訪問者プロファイルの有効期間が使用されます。
プライバシー
訪問者のIP アドレスを難読化 – この設定は、地域ターゲティング機能に影響します。 at.jsとPlatform Web SDKの両方で、ジオターゲティングの目的で同じバックエンド IP難読化設定を使用します。
環境
Platform Web SDKでは、個別の開発、ステージング、実稼動データストリーム用にEnvironment IDを明示的に定義できるデータストリーム設定を使用します。 この設定の主なユースケースは、URLが存在しないモバイルアプリ実装で環境を簡単に区別するためのものです。 設定はオプションですが、すべてのリクエストが指定された環境に正しく関連付けられていることを確認するために使用できます。 これは、ドメインとホストグループルールに基づいてTarget環境を割り当てる必要があるat.js実装とは異なります。
環境IDがデータストリーム設定で指定されていない場合、Targetは、ホスト セクションで指定されているように、ドメインと環境のマッピングを使用します。
詳しくは、 データストリーム設定 ガイドおよびTarget ホスト のドキュメントを参照してください。
Target機能は、at.jsとPlatform Web SDKの両方で提供されます。 両方のライブラリを同時に使用すると、レンダリングとトラッキングの問題が発生する可能性があります。 Platform Web SDKへの移行を成功させるには、最初の手順としてat.jsを削除し、Platform Web SDK（alloy.js）に置き換えます。
at.jsを使用したシンプルなTarget実装を想定します。
ページ上部のデータ層は、Targetやその他のアプリケーションに情報を提供します
Target アクティビティ（jQueryなど）で機能を使用できる1つ以上のサードパーティヘルパーライブラリ
フリッカーを軽減するための事前非表示スニペット
Target at.js ライブラリは、アクティビティのリクエストとレンダリングを自動的に行うためのデフォルト設定と非同期で読み込まれます。
code language-html
<!doctype html>
<html>
<head>
<title>Example page</title>
<!--Data Layer to enable rich data collection and targeting-->
<script>
var digitalData = {
// Data layer information goes here
};
</script>
<!--Third party libraries that may be used by Target offers and modifications-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--prehiding snippet for Target with asynchronous deployment-->
<script>
;(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>
<!--Target at.js library loaded asynchonously-->
<script src="/libraries/at.js" async></script>
</head>
<body>
<h1 id="title">Home Page</h1><br><br>
<p id="bodyText">Navigation</p><br><br>
<a id="home" class="navigationLink" href="#">Home</a><br>
<a id="pageA" class="navigationLink" href="#">Page A</a><br>
<a id="pageB" class="navigationLink" href="#">Page B</a><br>
<a id="pageC" class="navigationLink" href="#">Page C</a><br>
<div>Homepage Hero Banner Content</div>
</body>
</html>
Platform Web SDKを使用するようにTargetをアップグレードするには、まずat.jsを削除します。
<!--Target at.js library loaded asynchonously-->
<script src="/libraries/at.js" async></script>
Ali JavsScript ライブラリまたはタグ埋め込みコードとAdobe Experience Platform Web SDK拡張機能に置き換えます。
JavaScript
code language-html
<!--Platform Web SDK base code-->
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<!--Platform Web SDK loaded asynchonously. Change the src to use the latest supported version.-->
<script src="https://cdn1.adoberesources.net/alloy/2.13.1/alloy.min.js" async></script>
タグ
code language-html
<!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
<script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
タグプロパティで、Adobe Experience Platform Web SDK拡張機能を追加します。
{modal="regular"}
事前構築済みのスタンドアロンバージョンでは、ページに直接追加された「ベースコード」が必要であり、これはalloyという名前のグローバル関数を作成します。 この関数を使用して SDK を操作します。 グローバル関数に別の名前を付ける場合は、alloyの名前を変更します。
詳細とデプロイメントオプションについては、Platform Web SDKのインストール のドキュメントを参照してください。
コンテンツの事前非表示アプローチを更新
Platform Web SDKの実装では、ライブラリが非同期的に読み込まれるか同期的に読み込まれるかに応じて、事前非表示のスニペットが必要になる場合があります。
非同期実装
at.jsと同様に、Platform Web SDK ライブラリが非同期で読み込まれる場合、Targetがコンテンツスワップを実行する前にページのレンダリングが終了することがあります。 この動作により、デフォルトのコンテンツがTargetで指定されたパーソナライズされたコンテンツに置き換えられる前に簡単に表示される「ちらつき」と呼ばれることがあります。 このちらつきを避けたい場合は、非同期Platform Web SDK スクリプト参照またはタグ埋め込みコードの直前に、特別な事前非表示スニペットを追加することをお勧めします。
上記の例のように実装が非同期である場合は、at.jsの事前非表示スニペットを、Platform Web SDKと互換性のある以下のバージョンに置き換えます。
<!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
<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("mboxEdit") !== -1, "body { opacity: 0 !important }", 3000);
</script>
事前非表示スニペットは、選択したCSS定義を使用して、ページの先頭にスタイルタグを作成します。 このスタイルタグは、Targetからの応答を受信したとき、またはタイムアウトに達したときに削除されます。
事前非表示の動作は、スニペットの最後にある2つの設定によって制御されます。
body { opacity: 0 !important }は、Targetが読み込まれるまで事前非表示に使用するCSS定義を指定します。 デフォルトでは、ページ全体が非表示になっています。 この定義は、事前非表示にするセレクターと、非表示にする方法に更新できます。 この値はプレヒディングスタイルタグに挿入される値であるため、複数の定義を含めることができます。 ナビゲーションの下のコンテンツをラップする簡単に識別できるコンテナ要素がある場合は、この設定を使用して、そのコンテナ要素への事前非表示を制限できます。
3000は、事前非表示のタイムアウトをミリ秒単位で指定します。 タイムアウトの前にTargetからの応答が受信されない場合、事前非表示のスタイルタグは削除されます。 このようなタイムアウトに達することはまれです。
Platform Web SDKでは異なるスタイル ID alloy-prehidingが使用されるので、必ず正しいスニペットを使用してください。 at.jsの事前非表示スニペットが使用されている場合は、正しく機能しない可能性があります。
同期実装
Adobeでは、ページ全体のパフォーマンスを最大化するために、Platform Web SDKを非同期で実装することをお勧めします。 ただし、alloy.js ライブラリまたはタグ埋め込みコードが同期して読み込まれる場合、事前非表示スニペットは必要ありません。 代わりに、事前非表示スタイルはPlatform Web SDK設定で指定されます。
同期実装の事前非表示スタイルは、prehidingStyle
Platform Web SDKでのフリッカーの管理方法について詳しくは、ガイドの節「 パーソナライズされたエクスペリエンス用フリッカーの管理 」を参照してください。
Platform Web SDKは、ページを読み込むたびに設定する必要があります。 次の例では、サイト全体が1つのデプロイメントでPlatform Web SDKにアップグレードされていることを前提としています。
JavaScript
configure コマンドは、常に呼び出される最初のSDK コマンドである必要があります。 edgeConfigIdは データストリーム IDです
code language-javascript
alloy("configure", {
"edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
"orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
});
タグ
タグ実装では、多くのフィールドが自動入力されるか、ドロップダウンメニューから選択できます。 環境ごとに異なるPlatform サンドボックス と データストリーム を選択できます。 データストリームは、公開プロセスでのタグライブラリの状態に基づいて変更されます。
{modal="regular"}
at.jsからPlatform Web SDKにページごとに移行する場合は、次の設定オプションが必要です。
JavaScript
code language-javascript
alloy("configure", {
"edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
"orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg",
"targetMigrationEnabled":true,
"idMigrationEnabled":true
});
タグ
{modal="regular"}
Targetに関連する注目すべき設定オプションを以下に示します。
edgeConfigId
データストリーム ID
ebebf826-a01f-4458-8cec-ef61de241c93
orgId
Adobe Experience Cloud組織ID
ADB3LETTERSANDNUMBERS@AdobeOrg
targetMigrationEnabled
このオプションを使用すると、web SDKでat.jsで使用される従来のmboxおよびmboxEdgeCluster Cookieの読み取りと書き込みが可能になります。 これにより、Web SDKを使用するページから、at.js ライブラリを使用するページへ、またはその逆の方法で移動する際に、訪問者プロファイルを維持できます。
true
idMigrationEnabled
trueの場合、SDKは古いAMCV Cookieを読み取り、設定します。 このオプションは、サイトの一部でVisitor.jsを使用する場合がある場合でも、Platform Web SDKを使用する場合に役立ちます。
true
thirdPartyCookiesEnabled
アドビのサードパーティ Cookie の設定を有効にします。 SDKでは、サードパーティのコンテキストで訪問者IDを保持して、同じ訪問者IDをサイト全体で使用できるようにすることができます。 複数のサイトがある場合は、このオプションを使用します。ただし、プライバシー上の理由から、このオプションが望ましくない場合があります。
true
prehidingStyle
パーソナライズされたコンテンツをサーバーから読み込む際に、Web ページのコンテンツ領域を非表示にする CSS スタイル定義を作成するために使用します。 これは、SDKの同期デプロイメントでのみ使用されます。
body { opacity: 0 !important }
オプションの詳細については、Platform Web SDKの設定 ガイドを参照してください。
実装例
Platform Web SDKが適切に配置されると、サンプルページは次のようになります。
JavaScript
code language-html
<!doctype html>
<html>
<head>
<title>Example page</title>
<!--Data Layer to enable rich data collection and targeting-->
<script>
var digitalData = {
// Data layer information goes here
};
</script>
<!--Third party libraries that may be used by Target offers and modifications-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
<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("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
</script>
<!--Platform Web SDK base code-->
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<!--Platform Web SDK loaded asynchonously. Change the src to use the latest supported version.-->
<script src="https://cdn1.adoberesources.net/alloy/2.13.1/alloy.min.js" async></script>
<!--Configure Platform Web SDK-->
<script>
alloy("configure", {
"edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
"orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
});
</script>
</head>
<body>
<h1 id="title">Home Page</h1><br><br>
<p id="bodyText">Navigation</p><br><br>
<a id="home" class="navigationLink" href="#">Home</a><br>
<a id="pageA" class="navigationLink" href="#">Page A</a><br>
<a id="pageB" class="navigationLink" href="#">Page B</a><br>
<a id="pageC" class="navigationLink" href="#">Page C</a><br>
<div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>
タグ
ページコード：
code language-html
<!doctype html>
<html>
<head>
<title>Example page</title>
<!--Data Layer to enable rich data collection and targeting-->
<script>
var digitalData = {
// Data layer information goes here
};
</script>
<!--Third party libraries that may be used by Target offers and modifications-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
<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("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
</script>
<!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
<script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
</head>
<body>
<h1 id="title">Home Page</h1><br><br>
<p id="bodyText">Navigation</p><br><br>
<a id="home" class="navigationLink" href="#">Home</a><br>
<a id="pageA" class="navigationLink" href="#">Page A</a><br>
<a id="pageB" class="navigationLink" href="#">Page B</a><br>
<a id="pageC" class="navigationLink" href="#">Page C</a><br>
<div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>
タグで、Adobe Experience Platform Web SDK拡張機能を追加します。
{modal="regular"}
必要な設定を追加します。
{modal="regular"}
上記のようにPlatform Web SDK ライブラリを含めて設定するだけでは、Adobe Edge Networkへのネットワーク呼び出しは実行されないことに注意することが重要です。
次に、 リクエストしてVEC ベースのアクティビティ をページに適用する方法について説明します。
at.jsからWeb SDKへのTargetの移行を成功させるためのサポートを提供します。 移行で障害が発生した場合、またはこのガイドに重要な情報が欠けていると感じた場合は、
このコミュニティのディスカッション に投稿してお知らせください。
platform-learn-help-tutorial-migrate-target-websdk
