使用AEM SPA編輯器內嵌REACT應用程式並與AEM Screens Analytics整合

本節說明如何使用AEM SPA編輯器(可由AEM的業務專業人員設定)內嵌使用REACT(或Angular)的互動式單頁應用程式，以及如何將您的互動式應用程式與離線Adobe Analytics整合。

使用AEM SPA編輯器

請依照下列步驟使用AEM SPA編輯器：

  1. 複製位於https://github.com/adobe/aem-spa-project-archetype的AEM SPA編輯器存放庫。

    注意

    此原型會建立簡單的Adobe Experience Manager專案，作為您專屬SPA專案的起點。 使用此原型時必須提供的屬性可讓您為此專案的所有部分命名。

  2. 請依照自述檔案指示，建立AEM SPA編輯器原型專案：

    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 \
    注意

    我們使用​GroupId​作為​com.adobe.aem.screens​和​ArtifactId​作為​我的範例SPA（預設值）。 您可以視需要選擇自己的。

  3. 建立項目後，使用您選擇的IDE或編輯器並導入生成的Maven項目。

  4. 使用命令​mvn clean install -PautoInstallPackage​部署到本地AEM實例。

編輯REACT應用程式中的內容

若要編輯REACT應用程式中的內容：

  1. 導覽至https://localhost:4502/editor.html/content/mysamplespa/en/home.html（如適用，取代主機名稱、連接埠和專案名稱）。
  2. 您應該可以編輯Hello World應用程式中顯示的文本。

將互動式REACT應用程式新增至AEM Screens

請依照下列步驟，將互動式REACT應用程式新增至AEM Screens:

  1. 建立新的AEM Screens專案。 如需詳細資訊，請參閱建立和管理專案。

  2. 在Screens專案的​Channels​資料夾中建立新的​應用程式通道（最好是1x1範本或多區域通道）。

    注意

    此使 用案例不鼓勵使用序列管道，因為這些管道原本會附帶投影片放映邏輯，而且會與體驗的互動性質衝突
    如需詳細資訊，請參閱建立和管理通道 。

  3. 編輯任何序列管道，並拖放內嵌的頁面元件。

    如需詳細資訊，請參閱將元件新增至通道 。

    注意

    將管道指派給顯示時，請務必新增使用者互動事件。

  4. 按一下動作列中的​編輯​以編輯通道的屬性。

    screen_shot_2019-02-15at100555am

  5. 拖放​內嵌頁面​元件，或重新使用應用程式頻道中的現有元件，並選取mysamplespa應用程式下的首頁，例如​/content/mysamplespa/en/home。

    screen_shot_2019-02-15at101104am

  6. 將通道指派給顯示器。

    注意

    將管道指派給顯示時，請務必新增使用者互動事件。

  7. 根據此專案註冊播放器，並將其指派給顯示器。 您現在應該可以看到您的互動式應用程式在AEM Screens上執行。

    請參考設備註冊了解有關註冊設備的詳細資訊。

透過AEM Screens將SPA與Adobe Analytics整合及離線功能

請依照下列步驟，透過AEM Screens將SPA與Adobe Analytics整合，並提供離線功能：

  1. 在AEM Screens中設定Adobe Analytics。

    請參閱使用AEM Screens設定Adobe Analytics ，了解如何使用AEM Screens在Adobe Analytics中執行排序，以及使用離線Adobe Analytics傳送自訂事件。

  2. 在您選擇的IDE/編輯器中編輯您的react應用程式（尤其是要開始發出事件的文本元件或其他元件）。

  3. 在您要為元件擷取的點擊事件或其他事件上，使用標準資料模型新增分析資訊。

    如需詳細資訊，請參閱使用AEM Screens設定Adobe Analyticss 。

  4. 呼叫AEM Screens Analytics API以離線儲存事件，並以猝發傳送至Adobe Analytics。

    例如，

    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);
    }
}
    注意

    播放器韌體會自動將播放器及其執行階段環境的詳細資訊新增至您傳送的自訂分析資料。 因此，除非絕對必要，否則您可能不需要擷取低層作業系統/裝置詳細資訊。 您只需要專注於業務分析資料。

本頁內容