汎用インタラクティブ USA データマップコンポーネント

概要

汎用インタラクティブ米国データマップ​は、主に​ 米国の州 ​によるAEM アダプティブフォームの送信を視覚化するために設計された、再利用可能なAdobe Experience Manager（AEM） Sites コンポーネントです。

このコンポーネントは、フォーム送信アクティビティのインタラクティブな地理的表現を提供し、ユーザーが米国全体の送信の分布を理解し、送信量が多い状態を特定し、状態レベルの送信数を表示できるようにします。

主な使用例はフォーム送信の表示ですが、コンポーネントは​ データソースに依存せず ​であり、販売、顧客配布、サービスリクエストなど、その他の状態ベースのビジネス指標を視覚化できます。

コンテンツオーサーは、コンポーネントのJavaScriptまたはバックエンドの実装を変更することなく、AEM コンポーネントダイアログを通じて互換性のあるREST API エンドポイントを設定できます。

コンポーネントは、D3.jsとTopoJSON​を使用して、インタラクティブなUSA マップをレンダリングし、設定されたREST APIによって返される値に従って状態を動的に色付けします。

主な機能

プライマリユースケース - AEM Formsの各州別提出物

このコンポーネントは、一般的に、AEM Forms ダッシュボード​の一部として使用され、アダプティブフォーム送信の地理的分布を視覚化します。

利用者がアダプティブフォームを送信すると、送信データはAzure SQL Databaseなどのバックエンドシステムに保存されます。

REST APIは、送信を状態ごとに取得および集計し、コンポーネントが期待するJSON形式で結果を返します。

USA MapはこのAPI応答を使用し、送信数を地理的に表示します。

例

組織がカリフォルニア州、テキサス州、ニューヨーク州から提出物を受け取った場合、マップは受け取った提出物の数に応じてそれらの州を強調表示します。

ユーザーはマップを操作して、各状態に関連付けられた送信数を表示できます。

これにより、フォームの送信アクティビティを監視し、地理的なトレンドを特定するための視覚的な方法を提供します。

REST API データコントラクト

このコンポーネントは、集計された状態レベルのデータをJSON形式で返すHTTP GET エンドポイントを想定しています。

応答の例：

{
  "states": [
    { "state": "CA", "count": 150 },
    { "state": "TX", "count": 95 },
    { "state": "NY", "count": 70 }
  ]
}

各レコードは、米国の州とそれに対応する送信数を表します。

ステートおよび値フィールドの名前は、AEM オーサリングダイアログで設定できます。

例えば、stateCodeとtotalSubmissionsを返すREST APIは、コンポーネント設定でこれらのフィールドをマッピングすることでサポートできます。

バックエンド REST APIは、フォーム送信データを取得、集計、および想定される状態レベル JSON構造にフォーマットする役割を担います。 コンポーネントは、データベースのクエリや個々の送信の集計を行いません。

AEM オーサリング設定

コンポーネントには、次の設定オプションを含むAEM タッチ UI ダイアログが用意されています。

セキュリティ設定フィールドでは、アクセス制御は個別に適用されません。 保護されたエンドポイントは、独自の認証と認証を実装する必要があります。

データソース統合

このコンポーネントは、2つのREST統合パターンをサポートしています。

Direct REST API統合

コンポーネントは、ブラウザーから互換性のあるREST APIを直接呼び出します。

エンドポイントは、HTTPS、適切なCORS設定、および該当するコンテンツセキュリティポリシー要件をサポートする必要があります。

保護されたREST API統合

API キーまたは認証を必要とするバックエンドサービスの場合、コンポーネントはAEM Sling サーブレットまたは別のセキュアバックエンドプロキシを呼び出すことができます。

これにより、機密性の高い資格情報がサーバーサイドで保持されます。

検証済みの実装

AEM Forms Submission Dashboard

このコンポーネントは、Azure SQL Databaseに保存されているアダプティブフォーム送信数を表示するために実装されました。

この統合では、AEM アダプティブForms、Azure Functions、Azure SQL、AEM Sling サーブレットを使用して、状態レベルの送信数を取得します。

外部REST API統合

このコンポーネントは、RenderでホストされているNode.js REST APIでもテストされており、米国の州でサンプル販売データを返します。

これは、コンポーネントが、レンダリングロジックを変更することなく、さまざまなバックエンドシステムからのデータを視覚化できることを示しています。

テクノロジースタック

再利用性

このコンポーネントは、主に​ AEM Formsの送信を状態 ​別に視覚化することを目的としていますが、営業、顧客配布、マーケティングコンバージョン、サービスリクエスト、および分岐アクティビティなど、その他の状態レベルの指標も表示できます。

コンポーネントを再利用するには、作成者は互換性のあるREST エンドポイントと適切なJSON フィールドマッピングを設定します。

概要

汎用インタラクティブ米国データマップ​は、AEM Sitesの再利用可能な地理的ビジュアライゼーション機能を提供し、AEM アダプティブフォーム送信モニタリングを主要な使用例​として使用します。

米国の各州をまたいでフォームの送信量を可視化し、地理的なトレンドを特定して、州レベルの送信数をインタラクティブに調査することができます。

データソースに依存しないアーキテクチャは、設定されたREST APIが互換性のある状態レベルのJSON データを返すため、他のビジネスレポートのシナリオにも適しています。