エンドツーエンドテストのアップロードと実装

Adobe Experience Platform でタグ拡張機能をテストするには、タグ API やコマンドラインツールを使用して拡張機能パッケージをアップロードします。次に、Platform UI またはデータ収集 UI を使用して、拡張機能パッケージをプロパティにインストールし、タグライブラリ内でその機能を実行してビルドします。

このドキュメントでは、拡張機能のエンドツーエンドテストの実装方法について説明します。

拡張機能の検証 validate

チームが拡張機能のパフォーマンスとサンドボックスツールに表示される結果に満足したら、拡張機能パッケージをタグにアップロードする準備が整います。

アップロードする前に、必須フィールドまたは設定が存在することを確認してください。例えば、（少なくとも）拡張機能マニフェスト、拡張機能の設定、ビュー、ライブラリモジュールを確認することをお勧めします。

具体的な例としては、ロゴファイルが挙げられます。extension.json ファイルに "iconPath": "example.svg", 行を追加して、そのロゴ画像ファイルをプロジェクトに含めます。これは、拡張機能に表示されるアイコンの相対パスです。先頭にスラッシュを配置することはできません。拡張子が .svg の SVG ファイルを参照する必要があります。SVG は、正方形にレンダリングされると通常どおりに表示され、ユーザーインターフェイスで拡大縮小できます。詳しくは、 SVG の拡大・縮小方法 を参照してください。

Adobe I/O 統合環境の作成 integration

API またはコマンドラインツールを使用するには、Adobe I/O に関するテクニカルアカウントが必要です。I/O コンソールでテクニカルアカウントを作成し、アップローダツールを使用して拡張機能パッケージをアップロードする必要があります。

Adobe Experience Platformでタグで使用するテクニカルアカウントの作成について詳しくは、 Reactor API の概要 ガイド。

統合を作成できない場合は、適切な権限を持っていない可能性があります。この場合は、組織管理者が手順を完了するか、開発者として割り当てる必要があります。

拡張機能パッケージのアップロード upload

これで資格情報が用意でき、エンドツーエンドで拡張機能パッケージをテストする準備が整いました。

拡張機能パッケージを初めてアップロードすると、development の状態になります。つまり、自身の組織に対してのみ、および拡張機能の開発用にマークされたプロパティでのみ表示されます。

コマンドラインを使用して、.zip パッケージを含むディレクトリ内で次のコマンドを実行します。

npx @adobe/reactor-uploader

npx：npm パッケージをダウンロードして実行できます。実際にはこのパッケージをコンピューターにインストールする必要はありません。これは、アップローダを実行する最も簡単な方法です。

アップローダでは、複数の情報を入力する必要があります。テクニカルアカウント ID、API キー、およびその他の情報は、Adobe I/O コンソールから取得できます。I/O コンソールの統合ページに移動します。ドロップダウンから正しい組織を選択し、適切な統合を見つけて「表示」を選択します。

拡張機能パッケージがアップロードされ、アップローダによって拡張パッケージの ID が提供されます。

開発プロパティの作成 property

UI にログインし、「 」を選択した後、 タグ 左のナビゲーションで、 プロパティ 画面が表示されます。 プロパティは、デプロイするタグのコンテナであり、1 つまたは複数のサイトで使用できます。

初めてログインしたときに、画面にプロパティは表示されません。新しいプロパティを作成するには、「新規プロパティ」をクリックします。名前と URL を入力します。テストサイトの URL、または拡張機能をテストするページを使用します。このドメインフィールドは、一部の拡張機能や、コア拡張機能を使用した条件で使用できます。

このプロパティを拡張機能の開発テストに使用するには、ADVANCEDOPTIONS を展開し、「拡張機能の開発用に設定」のチェックボックスをオンにする必要があります。

下部の「保存」を選択して、新しいプロパティを保存します。

「プロパティ」画面が表示されます。作成したプロパティの名前を選択します。「プロパティの概要」画面が表示されます。左側の列にグローバルナビゲーションリンクが含まれ、システムの各領域へのリンクが表示されます。

拡張機能のインストール install-extension

このプロパティに拡張機能をインストールするには、上部のメインナビゲーションリンクにある「拡張機能」リンクを選択します。コア ​拡張機能は、インストール済み ​画面に表示されます。コア拡張機能には、データ収集内のすべてのタグ管理機能が含まれています。

拡張機能を追加するには、「カタログ」を選択します。

カタログには、使用可能な各拡張機能に対応するカードアイコンが表示されます。拡張機能がカタログに表示されない場合は、前述の Adobe 管理コンソールの設定の節と、拡張機能パッケージの作成の節の手順を完了していることを確認してください。また、Platform が初期処理を完了していない場合は、拡張機能パッケージが「保留」と表示される場合があります。

前の手順に従っていて、カタログに保留中または失敗の拡張機能パッケージが表示されない場合は、API を使用して直接拡張機能パッケージのステータスを確認する必要があります。 適切な API 呼び出しの実行方法について詳しくは、API ドキュメントのExtensionPackage の取得を参照してください。

拡張機能パッケージの処理が完了したら、カードの下部にある「インストール」を選択します。

設定画面が開きます（拡張機能に設定画面がある場合）。拡張機能の設定に必要な情報を追加し、下部にある「保存」を選択します。ここに示す設定画面の例では、ピクセル ID が必要な Facebook 拡張機能を使用しています。

これで、コア拡張機能と拡張機能が設定された「インストール済み」拡張機能の画面が表示されます。

拡張機能をテストするためのリソースを作成する resources

拡張機能は、Adobe Experience Platform のユーザーに新しい機能を提供します。これらは通常、データ要素またはルールビルダーに表示されます。

データ要素

タグデータ要素の目的は、ユーザーが値を保持できるようにすることです。各データ要素は、ソースデータへのマッピングまたはポインターです。 単一のデータ要素は、クエリ文字列、URL、Cookie 値、JavaScript 変数などにマッピングできる変数です。左側のナビゲーションバーから「データ要素」を選択し、「新しいデータ要素を作成」を選択します。

拡張機能では、必要に応じてデータ要素タイプを定義し、拡張機能を動作させることも、ユーザーにとっての利便性を考慮して定義することもできます。 拡張機能でデータ要素タイプを指定すると、データ要素を作成 ​画面のユーザー用のドロップダウンリストに表示されます。

ユーザーが「拡張機能」ドロップダウンから拡張機能を選択すると、「データ要素タイプ」ドロップダウンに、拡張機能から提供されたデータ要素タイプが入力されます。次に、ユーザーは各データ要素をソース値にマップできます。その後、データ要素の変更イベントまたはカスタムコードイベントでルールを作成する際にデータ要素を使用して、ルールの実行をトリガーできます。 データ要素は、データ要素の条件や、ルール内の他の条件、例外、アクションでも使用できます。

データ要素を作成したら（マッピングを設定します）、ユーザーは、データ要素を参照するだけでソースデータを参照できます。 値のソースが変更された場合（サイトの再設計など）、ユーザーは UI で 1 回だけマッピングを更新する必要があり、すべてのデータ要素が新しいソース値を自動的に受け取ります。

ルール

左側のナビゲーションで「ルール」リンクを選択し、「新しいルールを作成」を選択します。

まず、ルールにわかりやすい名前を入力します。ルールを作成 ​画面を、if-then ステートメントのように設定します。

イベントが発生し、条件が満たされて例外がない場合は、アクションがトリガーされます。このようなフローは、イベント、条件、例外、データ要素、またはアクションを作成または活用できる拡張機能にも存在します。

Facebook 拡張機能の例を使用して、テストサイトでページが読み込まれるたびにイベントを追加します。

Window Loaded イベントタイプ ​は、テストサイトでページが読み込まれるたびに、このルールがトリガーされるようにします。「変更を保持」を選択します。この例では、テストサイトの任意のページに対してルールをトリガーする必要があるので、条件 ​を無視します。

「アクション」で、「追加」を選択します。アクションの設定 ​画面が表示されます。次に、ルールの適用対象となる拡張機能と、ルールがトリガーされたときに実行されるアクションを選択する必要があります。「拡張機能」ドロップダウンリストから「Facebook ピクセル」を選択し、「アクションタイプ」ドロップダウンリストから「ページビューを送信」を選択します。「変更を保持」を選択し、次の​ ルールを編集 ​画面で「保存」を選択します。

拡張機能をテストする際に、 関連するイベントや条件など、任意の数のルールで選択できます。

変更を公開する publish

メインナビゲーションで「公開」を選択し、「新しいライブラリを追加」リンクを選択します。

ライブラリは、拡張機能、データ要素、ルールの相互のやり取り、およびWeb サイトとやり取りする方法を示す命令のセットです。ライブラリはビルドにコンパイルされます。ライブラリには、必要に応じて、一度に作成またはテストできる数の変更を含めることができます。

ライブラリを作成 ​画面で、「名前」テキストフィールドに名前を追加します。タグは、「開発」という名前のデフォルトの開発環境を提供します。「環境」ドロップダウンリストから「開発」を選択します。簡単にするために、使用可能なすべてのリソースを追加します。「変更されたすべてのリソースを追加」を選択し、「保存」を選択します。

すべての変更が新しく作成されたライブラリ（この例では​ dev という名前）に含まれたので、「保存して開発にビルド」を選択します。

ビルドプロセスが完了すると、ライブラリ名の横に緑色の​ 成功 ​インジケーターが表示されます。

これで、タグライブラリが公開され、使用できるようになりました。 ブラウザーでエンドユーザーのページ動作をテストするには、テストページで新しく作成したライブラリを使用する必要があります。

テストサイトでタグをインストールする install-data-collection-tags

インストール手順は、「環境」タブで確認できます。このページには使用可能なすべての環境が表示され、追加で環境を作成することもできます。ライブラリが開発環境に公開されたら、「開発」行の「インストール」列にあるボックスのアイコンを選択します。

開発環境の Web インストール手順 ダイアログが表示されます。コピーアイコンを選択して、<script> タグ全体をコピーします。

この 1 つの <script> タグをドキュメントまたはサイトテンプレートの <head> セクション内に配置して、インストールを完了します。次に、テストサイトにアクセスして、公開済みのタグライブラリの動作を確認します。

テスト test

次のリストは、テストページまたはサイト上で拡張機能を検証する際に役立つコンソールコマンドを示しています。

このテストの目的は、デプロイ済みのライブラリの機能を確認し、ライブラリにコンパイルされた後、拡張機能パッケージが期待どおりに動作することを確認することです。

拡張機能パッケージに加える必要のある変更を見つけた場合、その繰り返し処理は開発プロセスと似ています。