[통합]{class="badge positive"}

AEM Headless 및 Target 통합

[AEM as a Cloud Service Headless]{class="badge informative"}

AEM 콘텐츠 조각을 Adobe Target으로 내보내고 Adobe Experience Platform Web SDK의 alloy.js를 사용하여 Headless 경험을 개인화하는 데 사용하여 AEM Headless를 Adobe Target과 통합하는 방법을 알아봅니다. React WKND 앱을 사용하여 콘텐츠 조각 오퍼를 사용하는 개인화된 Target 활동을 경험에 추가하여 WKND 모험을 홍보하는 방법을 탐색합니다.

이 자습서에서는 AEM 및 Adobe Target 설정과 관련된 단계를 다룹니다.

Adobe IMS 구성 adobe-ims-configuration

AEM과 Adobe Target 간의 인증을 용이하게 하는 Adobe IMS 구성입니다.

Adobe IMS 구성을 만드는 방법에 대한 단계별 지침은 설명서를 검토하십시오.

Adobe Target Cloud Service adobe-target-cloud-service

Adobe Target Cloud Service은 컨텐츠 조각을 Adobe Target으로 쉽게 내보낼 수 있도록 AEM에 만들어집니다.

Adobe Target Cloud Service을 만드는 방법에 대한 단계별 지침은 설명서를 검토하십시오.

에셋 폴더 구성 configure-asset-folders

컨텍스트 인식 구성으로 구성된 Adobe Target Cloud Service을 Adobe Target으로 내보내려면 콘텐츠 조각이 포함된 AEM Assets 폴더 계층 구조에 적용해야 합니다.

확장 을 통한 단계별 지침
  1. DAM 관리자로 AEM 작성자 서비스 ​에 로그인합니다.
  2. Assets > 파일(으)로 이동하여 /conf이(가) 적용된 자산 폴더를 찾습니다.
  3. 자산 폴더를 선택하고 맨 위의 작업 표시줄에서 속성 ​을 선택합니다.
  4. Cloud Service 탭 선택
  5. 클라우드 구성이 Adobe Target Cloud Service 구성을 포함하는 컨텍스트 인식 구성(/conf)으로 설정되어 있는지 확인하십시오.
  6. Cloud Service 구성 드롭다운에서 Adobe Target ​을(를) 선택합니다.
  7. 오른쪽 상단에서 저장 및 닫기 선택

AEM Target 통합 권한 permission

콘텐츠 조각을 Adobe Target으로 내보내려면 developer.adobe.com 프로젝트로 표시되는 Adobe Target 통합에 Adobe Admin Console의 Editor 제품 역할이 부여되어야 합니다.

확장 을 통한 단계별 지침
  1. Adobe Admin Console에서 Adobe Target 제품을 관리할 수 있는 사용자로 Experience Cloud에 로그인합니다
  2. Adobe Admin Console 열기
  3. 제품 ​을 선택한 다음 Adobe Target ​을 엽니다.
  4. 제품 프로필 탭에서 DefaultWorkspace ​을(를) 선택합니다
  5. API 자격 증명 탭을 선택합니다.
  6. 이 목록에서 developer.adobe.com 앱을 찾아 제품 역할 ​을(를) 편집기(으)로 설정합니다.

Target으로 콘텐츠 조각 내보내기 export-content-fragments

구성된 AEM Assets 폴더 계층 구조에 있는 콘텐츠 조각은 콘텐츠 조각 오퍼로 Adobe Target에 내보낼 수 있습니다. Target의 특별한 JSON 오퍼 양식인 이러한 콘텐츠 조각 오퍼는 Target 활동에서 사용하여 Headless 앱에서 개인화된 경험을 제공할 수 있습니다.

확장 을 통한 단계별 지침
  1. AEM 작성자 ​에 DAM 사용자로 로그인

  2. Assets > 파일(으)로 이동한 다음 "Adobe Target 활성화" 폴더 아래에서 JSON으로 Target으로 내보낼 콘텐츠 조각을 찾습니다

  3. Adobe Target으로 내보낼 콘텐츠 조각 선택

  4. 상단 작업 표시줄에서 Adobe Target 오퍼로 내보내기 ​를 선택합니다.

    • 이 작업은 콘텐츠 조각의 전체 하이드레이션된 JSON 표현을 Adobe Target에 "콘텐츠 조각 오퍼"로 내보냅니다.

    • 완전히 하이드레이션된 JSON 표현은 AEM에서 검토할 수 있습니다

      • 콘텐츠 조각 선택
      • 사이드 패널 펼치기
      • 왼쪽 패널에서 미리 보기 아이콘 선택
      • Adobe Target으로 내보내는 JSON 표현은 기본 보기에 표시됩니다
  5. Adobe Target용 편집기 역할의 사용자로 Adobe Experience Cloud에 로그인합니다.

  6. Experience Cloud에서 오른쪽 상단의 제품 전환기에서 Target ​을 선택하여 Adobe Target을 엽니다.

  7. 오른쪽 상단의 Workspace 전환기 ​에서 기본 Workspace이 선택되어 있는지 확인하십시오.

  8. 위쪽 탐색에서 오퍼 탭을 선택합니다.

  9. 유형 드롭다운을 선택하고 콘텐츠 조각 ​을 선택합니다.

  10. AEM에서 내보낸 콘텐츠 조각이 목록에 표시되는지 확인

    • 오퍼 위로 마우스를 가져간 후 보기 단추를 선택하세요.
    • 오퍼 정보 ​를 검토하고 AEM Author 서비스에서 바로 콘텐츠 조각을 여는 AEM 딥링크 ​를 확인하세요.

콘텐츠 조각 오퍼를 사용한 Target 활동 activity

Adobe Target에서는 컨텐츠 조각 오퍼 JSON을 컨텐츠로 사용하는 활동을 만들 수 있으므로, AEM에서 만들고 관리하는 컨텐츠를 사용하여 headless 앱에서 개인화된 경험을 할 수 있습니다.

이 예제에서는 간단한 A/B 활동을 사용하지만 모든 Target 활동을 사용할 수 있습니다.

확장 을 통한 단계별 지침
  1. 위쪽 탐색에서 활동 탭을 선택합니다.

  2. + 활동 만들기 ​를 선택한 다음 만들 활동 유형을 선택하십시오.

    • 이 예제는 간단한 A/B 테스트 ​를 만들지만 콘텐츠 조각 오퍼는 모든 활동 유형을 지원할 수 있습니다.
  3. 활동 만들기 마법사에서

    • 선택
    • 경험 작성기 선택 ​에서 양식 ​을 선택합니다.
    • Workspace 선택 ​에서 기본 Workspace ​을 선택합니다.
    • 속성 선택 ​에서 활동을 사용할 수 있는 속성을 선택하거나 속성 제한 없음 ​을 선택하여 모든 속성에서 사용할 수 있도록 합니다.
    • 다음 ​을(를) 선택하여 활동 만들기
  4. 왼쪽 상단에서 이름 바꾸기 ​를 선택하여 활동 이름을 변경합니다

    • 활동에 의미 있는 이름을 지정하십시오.
  5. 초기 경험에서 활동에 대한 위치 1 ​을(를) 타깃팅으로 설정합니다.

    • 이 예제에서는 사용자 지정 위치 wknd-adventure-promo을(를) 타깃팅합니다
  6. 콘텐츠 ​에서 기본 콘텐츠를 선택하고 콘텐츠 조각 변경 ​을 선택합니다.

  7. 이 경험에 제공할 내보낸 콘텐츠 조각을 선택하고 완료 ​를 선택합니다.

  8. 컨텐츠 텍스트 영역에서 컨텐츠 조각 오퍼 JSON을 검토하십시오. 이는 컨텐츠 조각의 미리보기 작업을 통해 AEM Author 서비스에서 사용할 수 있는 것과 동일한 JSON입니다.

  9. 왼쪽 레일에서 경험을 추가하고 제공할 다른 콘텐츠 조각 오퍼를 선택합니다

  10. 다음 ​을(를) 선택하고 활동에 필요한 타깃팅 규칙을 구성합니다.

    • 이 예에서는 A/B 테스트를 수동 50/50 분할로 둡니다.
  11. 다음 ​을(를) 선택하고 활동 설정을 완료합니다.

  12. 저장 및 닫기 ​를 선택하고 의미 있는 이름을 지정하십시오.

  13. Adobe Target의 활동에서 오른쪽 상단의 비활성/활성화/보관 드롭다운에서 활성화 ​를 선택합니다.

wknd-adventure-promo 위치를 타깃팅하는 Adobe Target 활동을 이제 AEM Headless 앱에 통합하여 노출할 수 있습니다.

Experience Platform 데이터 스트림 ID datastream-id

AEM Headless 앱이 Adobe Experience Platform Web SDK를 사용하여 Adobe Target과 상호 작용하려면 Adobe 데이터스트림 ID가 필요합니다.

확장 을 통한 단계별 지침
  1. Adobe Experience Cloud(으)로 이동

  2. Experience Platform 열기

  3. 데이터 수집 > 데이터스트림 ​을 선택하고 새 데이터스트림 ​을 선택합니다.

  4. 새 데이터 스트림 마법사에서 다음을 입력합니다.

    • 이름: AEM Target integration
    • 설명: Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • 이벤트 스키마: Leave blank
  5. 저장 선택

  6. 서비스 추가 선택

  7. 서비스 ​에서 Adobe Target 선택

    • 활성화됨:
    • 속성 토큰: 비워 둠
    • 대상 환경 ID: 비워 둠
      • Target 환경은 관리 > 호스트 ​의 Adobe Target에서 설정할 수 있습니다.
    • 대상 타사 ID 네임스페이스: 비워 둠
  8. 저장 선택

  9. 오른쪽에서 Web SDK Adobe 구성 호출에 사용할 데이터 스트림 ID ​을(를) 복사합니다.

AEM Headless 앱에 개인화 추가 code

이 튜토리얼에서는 Adobe Experience Platform Web SDK를 통해 Adobe Target에서 콘텐츠 조각 오퍼를 사용하여 간단한 React 앱을 개인화하는 방법을 살펴봅니다. 이 접근 방식을 사용하여 모든 JavaScript 기반 웹 경험을 개인화할 수 있습니다.

Android™ 및 iOS 모바일 경험은 Adobe의 Mobile SDK를 사용하여 유사한 패턴에 따라 개인화할 수 있습니다.

사전 요구 사항

  • Node.js 14
  • Git
  • AEM as a Cloud Author 및 Publish 서비스에 설치된 WKND 공유 2.1.4+

설정

  1. Github.com에서 샘플 React 앱의 소스 코드를 다운로드합니다.

    code language-shell
    $ mkdir -p ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. 즐겨찾는 IDE의 ~/Code/aem-guides-wknd-graphql/personalization-tutorial에서 코드 베이스를 엽니다.

  3. 앱이 ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development에 연결할 AEM 서비스의 호스트를 업데이트합니다.

    code language-none
    ...
    REACT_APP_HOST_URI=https://publish-p1234-e5678.adobeaemcloud.com/
    ...
    
  4. 앱을 실행하고 구성된 AEM 서비스에 연결되는지 확인합니다. 명령줄에서 다음을 실행합니다.

    code language-shell
    $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial
    $ npm install
    $ npm run start
    
  5. Adobe Web SDK를 NPM 패키지로 설치합니다.

    code language-shell
    $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial
    $ npm install @adobe/alloy
    

    코드에서 Web SDK를 사용하여 활동 위치별로 콘텐츠 조각 오퍼 JSON을 가져올 수 있습니다.

    웹 SDK를 구성할 때 두 개의 ID가 필요합니다.

    • 데이터 스트림 IDedgeConfigId
    • orgId Experience Cloud > 프로필 > 계정 정보 > 현재 조직 ID에서 찾을 수 있는 AEM as a Cloud Service/Target Adobe 조직 ID

    Web SDK를 호출할 때 Adobe Target 활동 위치(예: wknd-adventure-promo)를 decisionScopes 배열의 값으로 설정해야 합니다.

    code language-javascript
    import { createInstance } from "@adobe/alloy";
    const alloy = createInstance({ name: "alloy" });
    ...
    alloy("config", { ... });
    alloy("sendEvent", { ... });
    

구현

  1. React 구성 요소 AdobeTargetActivity.js을(를) 만들어 Adobe Target 활동을 표시합니다.

    src/components/AdobeTargetActivity.js

    code language-javascript
    import React, { useEffect } from 'react';
    import { createInstance } from '@adobe/alloy';
    
    const alloy = createInstance({ name: 'alloy' });
    
    alloy('configure', {
      'edgeConfigId': 'e3db252d-44d0-4a0b-8901-aac22dbc88dc', // AEP Datastream ID
      'orgId':'7ABB3E6A5A7491460A495D61@AdobeOrg',
      'debugEnabled': true,
    });
    
    export default function AdobeTargetActivity({ activityLocation, OfferComponent }) {
      const [offer, setOffer] = React.useState();
    
      useEffect(() => {
        async function sendAlloyEvent() {
          // Get the activity offer from Adobe Target
          const result = await alloy('sendEvent', {
            // decisionScopes is set to an array containing the Adobe Target activity location
            'decisionScopes': [activityLocation],
          });
    
          if (result.propositions?.length > 0) {
            // Find the first proposition for the active activity location
            var proposition = result.propositions?.filter((proposition) => { return proposition.scope === activityLocation; })[0];
    
            // Get the Content Fragment Offer JSON from the Adobe Target response
            const contentFragmentOffer = proposition?.items[0]?.data?.content || { status: 'error', message: 'Personalized content unavailable'};
    
            if (contentFragmentOffer?.data) {
              // Content Fragment Offers represent a single Content Fragment, hydrated by
              // the byPath GraphQL query, we must traverse the JSON object to retrieve the
              // Content Fragment JSON representation
              const byPath = Object.keys(contentFragmentOffer.data)[0];
              const item = contentFragmentOffer.data[byPath]?.item;
    
              if (item) {
                // Set the offer to the React state so it can be rendered
                setOffer(item);
    
                // Record the Content Fragment Offer as displayed for Adobe Target Activity reporting
                // If this request is omitted, the Target Activity's Reports will be blank
                alloy("sendEvent", {
                    xdm: {
                        eventType: "decisioning.propositionDisplay",
                        _experience: {
                            decisioning: {
                                propositions: [proposition]
                            }
                        }
                    }
                });
              }
            }
          }
        };
    
        sendAlloyEvent();
    
      }, [activityLocation, OfferComponent]);
    
      if (!offer) {
        // Adobe Target offer initializing; we render a blank component (which has a fixed height) to prevent a layout shift
        return (<OfferComponent></OfferComponent>);
      } else if (offer.status === 'error') {
        // If Personalized content could not be retrieved either show nothing, or optionally default content.
        console.error(offer.message);
        return (<></>);
      }
    
      console.log('Activity Location', activityLocation);
      console.log('Content Fragment Offer', offer);
    
      // Render the React component with the offer's JSON
      return (<OfferComponent content={offer} />);
    };
    

    AdobeTargetActivity React 구성 요소는 다음과 같이 을 사용하여 호출됩니다.

    code language-jsx
    <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>
    
  2. React 구성 요소 AdventurePromo.js을(를) 만들어 JSON Adobe Target에서 제공하는 모험을 렌더링합니다.

    이 React 구성 요소는 어드벤처 콘텐츠 조각을 나타내는 전체 하이드레이션된 JSON을 가져와서 프로모션 방식으로 표시합니다. Adobe Target 콘텐츠 조각 오퍼에서 서비스되는 JSON을 표시하는 React 구성 요소는 Adobe Target으로 내보내는 콘텐츠 조각을 기반으로 필요에 따라 다양하고 복잡할 수 있습니다.

    src/components/AdventurePromo.js

    code language-javascript
    import React from 'react';
    
    import './AdventurePromo.scss';
    
    /**
    * @param {*} content is the fully hydrated JSON data for a WKND Adventure Content Fragment
    * @returns the Adventure Promo component
    */
    export default function AdventurePromo({ content }) {
        if (!content) {
            // If content is still loading, then display an empty promote to prevent layout shift when Target loads the data
            return (<div className="adventure-promo"></div>)
        }
    
        const title = content.title;
        const description = content?.description?.plaintext;
        const image = content.primaryImage?._publishUrl;
    
        return (
            <div className="adventure-promo">
                <div className="adventure-promo-text-wrapper">
                    <h3 className="adventure-promo-eyebrow">Promoted adventure</h3>
                    <h2 className="adventure-promo-title">{title}</h2>
                    <p className="adventure-promo-description">{description}</p>
                </div>
                <div className="adventure-promo-image-wrapper">
                    <img className="adventure-promo-image" src={image} alt={title} />
                </div>
            </div>
        )
    }
    

    src/components/AdventurePromo.scss

    code language-css
    .adventure-promo {
        display: flex;
        margin: 3rem 0;
        height: 400px;
    }
    
    .adventure-promo-text-wrapper {
        background-color: #ffea00;
        color: black;
        flex-grow: 1;
        padding: 3rem 2rem;
        width: 55%;
    }
    
    .adventure-promo-eyebrow {
        font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-weight: 700;
        font-size: 1rem;
        margin: 0;
        text-transform: uppercase;
    }
    
    .adventure-promo-description {
        line-height: 1.75rem;
    }
    
    .adventure-promo-image-wrapper {
        height: 400px;
        width: 45%;
    }
    
    .adventure-promo-image {
        height: 100%;
        object-fit: cover;
        object-position: center center;
        width: 100%;
    }
    

    이 React 구성 요소는 다음과 같이 호출됩니다.

    code language-jsx
    <AdventurePromo adventure={adventureJSON}/>
    
  3. 모험 목록 위에 React 앱의 Home.js에 AdobeTargetActivity 구성 요소를 추가합니다.

    src/components/Home.js

    code language-javascript
    import AdventurePromo from './AdventurePromo';
    import AdobeTargetActivity from './AdobeTargetActivity';
    ...
    export default function Home() {
        ...
        return(
            <div className="Home">
    
              <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>
    
              <h2>Current Adventures</h2>
              ...
        )
    }
    
  4. React 앱이 실행되고 있지 않으면 npm run start을(를) 사용하여 다시 시작하십시오.

    서로 다른 두 브라우저에서 React 앱을 열어 A/B 테스트가 각 브라우저에 서로 다른 경험을 제공할 수 있도록 합니다. 두 브라우저 모두 동일한 어드벤처 오퍼를 표시하는 경우 다른 경험이 표시될 때까지 브라우저 중 하나를 닫거나 다시 열어 보십시오.

    아래 이미지는 Adobe Target의 논리를 기반으로 wknd-adventure-promo 활동에 대해 표시되는 두 개의 다른 콘텐츠 조각 오퍼를 보여 줍니다.

    경험 오퍼

축하합니다!

콘텐츠 조각을 Adobe Target으로 내보내도록 AEM as a Cloud Service을 구성하고, Adobe Target 활동에서 콘텐츠 조각 오퍼를 사용하고, AEM Headless 앱의 활동을 표면화하여 경험을 개인화했습니다.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69