Web SDKへのカスタムコードの移行
作成対象：
- 中級
- 経験者
- 開発者
この演習では、Adobe Analytics拡張機能からExperience PlatformタグのAdobe Experience Platform Web SDK拡張機能にカスタムコードを移行する方法を説明します。
重大な免責事項
コードを操作する最適で最も簡単で最も効果的な方法を説明するドキュメントにこのような内容を追加するのであれば、ご安心ください。 コードの記述、編集、処理には、明らかに様々な方法があります。 この演習では、既存のルール内のコードを簡単に取得してコピーし、変更を追加して、移行したルールで機能させる方法を提供します。 より良い使い方を考えれば、素晴らしいことです。それを使ってもらえるだけでなく、Experience Leagueコミュニティ（特にこのチュートリアルに関するコミュニティの投稿）で、私たちや同業者と共有できることを歓迎します。 実装プラグインを操作するページの下半分についても同じことが言えます。 私がここに道を提案しましょう、そしてあなたはあなたに気分が良いことをします。 それでは、詳しく見ていきましょう。
IMPORTANTどのコードを移行しますか？
この節で最初に取り上げるコードは、「変数を設定 アクションを含むすべてのAdobe Analyticsアクションの「カスタムコード」ウィンドウに表示されるコード す。 つまり、ルールの 1 つを開き、「アクション」セクションを見下ろします。 「Adobe Analytics – 変数を設定」アクションがある場合は、クリックして開きます。
次に、右下にスクロールすると、カスタムコードウィンドウの「エディターを開く」ボタンが表示されます。 クリックして開きます。
コードが含まれている場合は、Web SDKでコードを実行してAdobe Analyticsに送信できるように、移行する必要があります。
ここでの主な考え方は、「s」オブジェクトを「コンテンツ」に変換するということです。__adobe.analytics」に、
Web SDKで理解および処理できるように、s オブジェクトに対する最初の呼び出しの前にコードを追加するだけです。 新しく変更したコードを追加する場所は、「Adobe Experience Platform Web SDK – 変数を更新」アクションの「カスタムコード」ウィンドウにあります。
例えば、カスタムコードウィンドウに次のコードブロックがあるとします。
const products = window.digitalData.products;
const productIndex = event.element.dataset.productIndex;
const product = products[productIndex];
s.products = [
product.cat3Tag,
product.id,
1,
product.price
].join(";");
含める必要があるコードは次のとおりです。
content.__adobe = content.__adobe || {};
content.__adobe.analytics = content.__adobe.analytics || {};
const s = content.__adobe.analytics;
そのため、次の手順に従ってカスタムコードを移行します。
-
「Adobe Analytics変数を設定」アクションのウィンドウからカスタムコードをコピーします。
-
そのコードウィンドウを閉じ、アクションを閉じる（キャンセルアウトする）ことができます。
-
「Web SDK – 変数を更新」アクションをクリックして開きます（まだ追加していない場合は追加します）。
-
右側のウィンドウの上部にある Analytics オブジェクトを選択します
-
一番下までスクロールし、カスタムコード ウィンドウを開きます
-
Analytics カスタムコードウィンドウから取り込んだコードを貼り付けます。
-
次に、以下の例のように、新しいコード行を既存のコードの中央に配置して、s オブジェクトの最初のメンションの上になるようにします。
これで、「カスタムコード」ウィンドウでコードを保存して、「変数を更新」アクションの変更を維持できます。 また、ルールを保存して、作業ライブラリで新しい変更を公開する必要もあります。
プラグインについてはどうですか？
Experience Platformタグ（旧称「Launch」）の Analytics 拡張機能を使用してAdobe Analyticsの「appMeasurement」を実装している場合、変数の設定やその他の作業に 1 つ以上のJavaScript「プラグイン」を使用している可能性があります。 これらのJavaScriptの関数と呼び出しがルール内のコードウィンドウにある場合は、前述の情報が web SDKへのコードの移行に役立ちます。
ただし、プラグインコードがAdobe Analytics拡張機能そのものの設定のコードウィンドウにある可能性も高くなります。 移行するプラグインおよびその他のコードがあるかどうかを確認するには、データ収集およびタグに移動して Analytics 拡張機能を開き、プロパティを開いて、左側のナビゲーションで 拡張機能 をクリックします。
-
ページ上部の「インストール済み」タブを選択し、Adobe Analytics拡張機能を選択します。
-
次に、ページの右側で「設定」をクリックします
-
「カスタムコードを使用したトラッカーの設定」セクションを展開します
-
クリックして エディターを開く
この時点で、そこに含まれているコードを確認できます。JavaScriptの「プラグイン」を使用する場合があります。つまり、必要なデータを取得し、カスタムディメンションに割り当てるのに役立つコードスニペットなどです。
このコードウィンドウのすべての機能がプラグインと見なされるとは限りません。Adobe Analyticsが提供する本来の意味です。 これは、コードの移行方法を決定する際に理解しておくことが重要です。
拡張機能のメインコードウィンドウからコードを移行するための推奨事項
ここでも、コードウィンドウ内のすべてがAdobe Consulting作成の公式プラグインとは限りません。 その一部は、プラグインを呼び出すかどうかにかかわらず、あなたが書いたコードかもしれません。 2 つの変更をお勧めします。 新しい拡張機能を使用するほか、コードの残りの部分をコピーして新しい場所に貼り付けることもできます。
最初に タグで使用できる拡張機能は Common Web SDK Plugins です。 この拡張機能は、Adobe Analyticsのドキュメントに記載されている実装プラグインの全リストのサブセットです。 この拡張機能をタグプロパティにインストールすると、含まれているプラグインのコードがインストールされます。 次に、これらのプラグインを使用するには、新しい データ要素 を作成する際にプラグインを見つけます。 詳しくは、こちらをご覧ください。
2 つ目 は、web SDK拡張機能の設定にコードウィンドウがあり、イベントがAdobe Analyticsに送信される直前にコードを実行する場合、すべての（または一部）のコードを配置できます。 コードウィンドウを見つける手順は次のとおりです。
-
プロパティに web SDK拡張機能が既に追加されている場合は、「拡張機能」に移動し、「インストール済み」タブを選択します
-
Adobe Experience Platform Web SDK拡張機能 を選択し、右側のパネルで 設定 をクリックして開きます。
-
データ収集 セクションまでスクロールし、クリックして onBeforeEventSend のコードウィンドウを開きます。
ここには、Web SDKから Analytics にイベントが送信される直前に実行する任意のコードを貼り付けます。 これは、基本的に、古い Analytics 実装で doPlugins 関数が行っていたことです。
良い知らせ は、送信イベントを いつでも 実行する必要があるということです。そのため、ページの読み込み時やカスタムリンク時のいずれであっても、このコードを実行したり、変数を設定したりします。
コードを変更する必要がありますか？
まあ、イエスとノー。 はい、いくつかの小さな変更は必要ですが、変更しない場合、これらの小さな変更を行う限り、コードの大部分を変更する必要はありません。
コード変更 1:
Web SDK拡張機能のコードウィンドウに「プラグイン」コードを貼り付けた後（または選択した前 、コードから「doPlugin 行を「削除」します。 これらは appMeasurement.js の一部であり、web SDK コードではないので、必要なく、エラーの原因になります。
コード変更 2:
もう 1 つの変更は、「s」オブジェクトが定義されるようにコードを追加することです。これは、ルールアクションのコードに関して上記で説明したものと非常に似ています。 この場合は、少し異なる方法でコードを定義し、ルールアクションで既に定義されている「data」ノードを追加する必要がありますが、ここでは追加しません。
この定義は、コードウィンドウの上部に配置してください。 （コードを Web SDK拡張機能に配置する際に）にコピーする必要があるコードは、次のとおりです。
content.data.__adobe = content.data.__adobe || {};
content.data.__adobe.analytics = content.data.__adobe.analytics || {};
const s = content.data.__adobe.analytics;
両方のコードを変更した場合：
以下は上記のコードですが、両方の変更について説明しました。
メイン拡張機能コードを Web SDKに移行する手順
前述のように、新しい Common Web SDK Plugins 拡張機能を使用する方法と、Analytics 拡張機能の設定から Web SDK拡張機能の設定にコードをコピーして貼り付ける方法の 2 つをお勧めします。 これを念頭に置き、コードをクリーンアップするためのページの上部にある重要な注意事項とともに、大まかには次の手順を推奨します。
- Analytics 拡張機能の設定コードウィンドウからすべてのコードをコピーし、web SDK拡張機能の設定の onBeforeEventSend ウィンドウに貼り付けます（削除または更新が必要なコードはコピーされる場合がありますが、新しいウィンドウのコードを少し見直します）。
- Web SDK拡張機能でコードを実行し、「Common Web SDK Plugins 拡張機能で定義されているプラグインの呼び出しや関数定義を探し す。 プラグインの一覧は、プラグイン拡張機能をインストールした後、Web SDKのデータ要素定義ウィンドウに表示されます。 また、 その拡張機能のドキュメントでも確認できます。
- 新しい Web SDK plugins 拡張機能で見つかった各プラグインについて、拡張機能とコードからの呼び出しを削除し、次に、データ要素を作成して適切なルールでそのデータ要素を呼び出し、変数を設定するなど、削除に対応してください。
- 次に、コードを参照して、appMeasurement.js ファイルで定義された関数への呼び出しがあるかどうかを確認します。 上記の コード変更 1 はその例であり、まだ削除していない場合は、この時点で doPlugins コードの削除を行うことができます。 他の例では、コード内のどこにも定義されていない関数を呼び出した場合に、これが最も顕著になります。 また、AdobeカスタマーサポートやExperience Leagueコミュニティの同業者に確認して、そのコードにこれが当てはまることを確認することもできます。
- 次に、コードをパススルーして、分析のニーズに適用されなくなった古いコードを更新または削除します（このページの上部で推奨されています）。
- 上記の コード変更 2 を実行し、s オブジェクトへの参照がコードでエラーを引き起こさないように行を追加します。
- 最後に、もう少し多くのことをテスト、テスト、テストします。 その後、もう一度テストします。 Experience PlatformデバッガーとAdobe Analyticsのレポートの両方で、コードが想定どおりの結果を提供していることを確認します。
NOTE最初に、プラグインコードを削除して新しい Common Web SDK Plugins 拡張機能を使用するのではなく、すべてのプラグインコードをそこに残すほうが簡単だと思うかもしれません。 これは正しく問題ありませんが、拡張機能を使用すると、UI を使用して、再利用可能なデータ要素を定義し、将来コードの更新を自動的に受け取るという利点を得ることができます。 切り替える価値があるでしょう。
このレッスンは、開始した方法で終わります。コードを記述する方法は多数あることを確認し、このドキュメントでは、この方法でコードを記述する場合の手順を説明します。 主なことは、コードが機能し、期待する結果が得られることです。自由に実行してください。テストすべきだと言いましたか？