AEM SPA Editor を使用した React アプリケーションの埋め込みと AEM Screens Analytics との統合 embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

React (またはAngular)を使用して、インタラクティブな単一ページアプリケーションを埋め込むことができます。 これを行うには、AEMでビジネスプロフェッショナルが設定したAEM SPAエディターを使用します。 また、インタラクティブアプリケーションをオフライン Adobe Analyticsと統合する方法についても説明します。

AEM SPA Editor の使用 using-the-aem-spa-editor

AEM SPA Editor を使用するには、以下の手順に従います。

  1. AEM SPA Editor リポジトリー(https://github.com/adobe/aem-spa-project-archetype)のクローンを作成します。

    note note
    NOTE
    このアーキタイプでは、独自の SPA プロジェクトの出発点として、最小限の Adobe Experience Manager プロジェクトが作成されます。このアーキタイプを使用する際に指定する必要があるプロパティを使用すると、このプロジェクトのすべての部分に必要に応じて名前を付けることができます。
  2. AEM SPAエディターアーキタイププロジェクトを作成するには、の README の手順に従います。

    code language-none
    mvn clean install archetype:update-local-catalog
    mvn archetype:crawl
    
    mvn archetype:generate \
    -DarchetypeCatalog=internal \
    -DarchetypeGroupId=com.adobe.cq.spa.archetypes \
    -DarchetypeArtifactId=aem-spa-project-archetype \
    -DarchetypeVersion=1.0.3-SNAPSHOT \
    
    note note
    NOTE
    このドキュメントでは、を使用します GroupId as com.adobe.aem.screens および ArtifactId as My サンプル SPA (デフォルト)。 必要に応じて独自に選択できます。
  3. プロジェクトが作成されたら、任意の IDE またはエディターを使用し、生成された Maven プロジェクトを読み込みます。

  4. mvn clean install -PautoInstallPackage コマンドを使用して、ローカルの AEM インスタンスにデプロイします。

React アプリのコンテンツの編集 editing-content-in-the-react-app

React アプリのコンテンツを編集するには、以下の手順に従います。

  1. に移動します。 https://localhost:4502/editor.html/content/mysamplespa/en/home.html (必要に応じて、ホスト名、ポート、プロジェクト名を置き換えます)。
  2. Hello world アプリケーションに表示されるテキストを編集できます。

AEM Screens へのインタラクティブ React アプリの追加 adding-the-interactive-react-app-to-aem-screens

AEM Screens にインタラクティブ React アプリを追加するには、以下の手順に従います。

  1. AEM Screens プロジェクトを作成します。参照: プロジェクトの作成と管理 を参照してください。

  2. を作成 アプリケーションチャネル (できれば)(または 1x1 テンプレートまたはマルチゾーンチャネル)を チャネル AEM Screens プロジェクトのフォルダー。

    note note
    NOTE
    シーケンスチャネル は、エクスペリエンスのインタラクティブな性質と競合するスライドショーロジックがもともと備わっているため、このユースケースでは推奨されません。
    参照: チャネルの作成と管理 を参照してください。
  3. シーケンスチャネルを編集し、埋め込みページコンポーネントをドラッグ&ドロップします。

    参照: チャネルへのコンポーネントの追加 を参照してください。

    note note
    NOTE
    チャネルをディスプレイに割り当てる際には、必ずユーザーインタラクションイベントを追加してください。
  4. クリック 編集 アクションバーのを使用して、チャネルのプロパティを編集できます。

    screen_shot_2019-02-15at100555am

  5. をドラッグ&ドロップ 埋め込みページ コンポーネントを選択するか、アプリケーションチャネルで既存のコンポーネントを再利用し、mysamplespa アプリケーションの下のホームページ(例:)をクリックします。 /content/mysamplespa/en/home.

    screen_shot_2019-02-15at101104am

  6. チャネルをディスプレイに割り当てます。

    note note
    NOTE
    チャネルをディスプレイに割り当てる際には、必ずユーザーインタラクションイベントを追加してください。
  7. このプロジェクトに対してプレーヤーを登録し、ディスプレイに割り当てます。これで、AEM Screens 上で実行中のインタラクティブアプリケーションが表示されるようになりました。

    参照: デバイスの登録 デバイスの登録に関する詳細情報。

AEM Screens を使用した SPA とオフライン機能付き Adobe Analytics の統合 integrating-the-spa-with-adobe-analytics-with-offline-capability-through-aem-screens

AEM Screens を通じて SPA をオフライン機能付きの Adobe Analytics と統合するには、以下の手順に従います。

  1. AEM Screens で Adobe Analytics を設定します。

    参照: Adobe AnalyticsとAEM Screensの設定 AEM Screensを使用してAdobe Analyticsでシーケンスを実行する方法や、オフライン Adobe Analyticsを使用してカスタムイベントを送信する方法について詳しくは、こちらを参照してください。

  2. 任意の IDE またはエディターを使用して、React アプリ(特に、イベントの発行を開始するテキストコンポーネントなどのコンポーネント)を編集します。

  3. コンポーネントに対してキャプチャするクリックイベントなどのイベントで、標準データモデルを使用して分析情報を追加します。

    参照: Adobe AnalyticsとAEM Screensの設定 を参照してください。

  4. AEM Screens Analytics API を呼び出して、イベントをオフラインで保存し、バーストでAdobe Analyticsに送信できるようにします。

    例:

    code language-none
    handleClick() {
        if ((window.parent) && (window.parent.CQ) && (window.parent.CQ.screens) && (window.parent.CQ.screens.analytics))
        {
            var analyticsEvent = {};
            analyticsEvent['event.type'] = 'play'; // Type of event
     analyticsEvent['event.coll_dts'] = new Date().toISOString(); // Start of collecting the event
     analyticsEvent['event.dts_start'] = new Date().toISOString(); // Event start
     analyticsEvent['content.type'] = 'Washing machine'; // Mime Type or product category
     analyticsEvent['content.action'] = 'Path to the washing machine asset in AEM'; // Path in AEM to relevant asset
     analyticsEvent['trn.product'] = 'Washing machine Model number'; // Product being explored
     analyticsEvent['trn.amount'] = 1000; // Product pricing or other numeric value or weight
     analyticsEvent['event.dts_end'] = new Date().toISOString(); // Event end
     analyticsEvent['event.count'] = 100; // Numeric value that may count a number of clicks or keystrokes or wait time in seconds for example
     analyticsEvent['event.value'] = 'My favorite analytics event';
            analyticsEvent['trn.quantity'] = 10; // Quantity of product selection
     analyticsEvent['event.subtype'] = 'end'; // Event subtype if applicable
     window.parent.CQ.screens.analytics.sendTrackingEvent(analyticsEvent);
        }
    }
    
    note note
    NOTE
    プレーヤーのファームウェアによって、送信するカスタム分析データにプレーヤーとそのランタイム環境に関する詳細が自動的に追加されます。したがって、必要でない限り、低レベルの OS/デバイスの詳細を取得する必要がある場合があります。 ビジネス分析データに焦点を当てます。
recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053