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 SPA 편집기를 사용하면 AEM의 비즈니스 전문가가 구성할 수 있습니다. 또한 대화형 애플리케이션을 오프라인 Adobe Analytics과 통합하는 방법을 배울 수도 있습니다.
AEM SPA 편집기 사용 using-the-aem-spa-editor
AEM SPA 편집기를 사용하려면 아래 단계를 따르십시오.
-
https://github.com/adobe/aem-spa-project-archetype.에서 AEM SPA 편집기 리포지토리 복제
note note NOTE 이 Archetype은 고유한 SPA 프로젝트의 시작점으로 최소 Adobe Experience Manager 프로젝트를 만듭니다. 이 Archetype을 사용할 때 제공해야 하는 속성을 사용하면 이 프로젝트의 모든 부분을 원하는 대로 지정할 수 있습니다. -
AEM SPA editor archetype 프로젝트를 만들려면 추가 정보 지침을 따르십시오.
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 을(를) com.adobe.aem.screens(으)로 사용하고 ArtifactId 을(를) 내 샘플 SPA(기본값)로 사용합니다. 필요에 따라 원하는 대로 선택할 수 있습니다. -
프로젝트가 생성되면 원하는 IDE 또는 편집기를 사용하여 생성된 Maven 프로젝트를 가져옵니다.
-
mvn clean install -PautoInstallPackage 명령을 사용하여 로컬 AEM 인스턴스에 배포합니다.
REACT 앱에서 콘텐츠 편집 editing-content-in-the-react-app
REACT 앱에서 콘텐츠를 편집하려면:
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(호스트 이름, 포트 및 프로젝트 이름 대체)로 이동합니다.- Hello World 애플리케이션에 표시되는 텍스트를 편집할 수 있습니다.
AEM Screens에 대화형 REACT 앱 추가 adding-the-interactive-react-app-to-aem-screens
AEM Screens에 대화형 REACT 앱을 추가하려면 아래 단계를 따르십시오.
-
AEM Screens 프로젝트를 만듭니다. 자세한 내용은 프로젝트 만들기 및 관리를 참조하십시오.
-
AEM Screens 프로젝트의 채널 폴더에 응용 프로그램 채널(권장)(또는 1x1 템플릿 또는 다중 영역 채널)을 만듭니다.
note note NOTE 시퀀스 채널 은(는) 기본적으로 경험의 대화형 특성과 충돌하는 슬라이드쇼 논리를 제공하므로 이 사용 사례에서는 권장되지 않습니다.
자세한 내용은 채널 만들기 및 관리를 참조하십시오. -
시퀀스 채널을 편집하고 포함된 페이지 구성 요소를 드래그 앤 드롭합니다.
자세한 내용은 채널에 구성 요소 추가를 참조하십시오.
note note NOTE 채널을 디스플레이에 할당할 때 사용자 상호 작용 이벤트를 추가해야 합니다. -
채널의 속성을 편집할 수 있도록 작업 표시줄에서 편집 을 클릭합니다.
-
포함된 페이지 구성 요소를 끌어다 놓거나 응용 프로그램 채널에서 기존 구성 요소를 다시 사용하고 mysamplespa 응용 프로그램 아래의 홈 페이지(예: /content/mysamplespa/en/home)를 클릭합니다.
-
채널을 디스플레이에 할당합니다.
note note NOTE 채널을 디스플레이에 할당할 때 사용자 상호 작용 이벤트를 추가해야 합니다. -
이 프로젝트에 대해 플레이어를 등록하고 디스플레이에 할당합니다. 이제 AEM Screens에서 실행 중인 대화형 애플리케이션을 볼 수 있습니다.
장치 등록에 대한 자세한 내용은 장치 등록을 참조하세요.
AEM Screens을 통해 SPA과 Adobe Analytics 통합 및 오프라인 기능 integrating-the-spa-with-adobe-analytics-with-offline-capability-through-aem-screens
AEM Screens을 통해 SPA을 Adobe Analytics과 오프라인 기능을 통합하려면 아래 단계를 따르십시오.
-
AEM Screens에서 Adobe Analytics을 구성합니다.
AEM Screens을 사용하여 Adobe Analytics에서 시퀀스 지정을 수행하고 오프라인 Adobe Analytics을 사용하여 사용자 지정 이벤트를 보내는 방법에 대한 자세한 내용은 AEM Screens을 사용하여 Adobe Analytics 구성을 참조하십시오.
-
선택한 IDE/편집기(특히 텍스트 구성 요소 또는 이벤트 방출을 시작하려는 기타 구성 요소)에서 React 앱을 편집합니다.
-
클릭 이벤트나 구성 요소에 대해 캡처할 다른 이벤트에서 표준 데이터 모델을 사용하여 분석 정보를 추가합니다.
자세한 내용은 AEM Screens을 사용하여 Adobe Analytics 구성을 참조하십시오.
-
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/디바이스 세부 정보를 캡처해야 할 수 있습니다. 비즈니스 분석 데이터에 집중합니다.