[整合]{class="badge positive"}

整合AEM Headless和Target

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

瞭解如何將AEM內容片段匯出至Adobe Target,以將AEM Headless與Adobe Target整合,並使用Adobe Experience Platform Web SDK的alloy.js來使用它們個人化Headless體驗。 此 React WKND應用程式 用於探索如何使用內容片段選件來將個人化Target活動新增到體驗中,以促進WKND冒險。

本教學課程涵蓋設定AEM和Adobe Target的相關步驟:

Adobe IMS設定 adobe-ims-configuration

Adobe IMS設定可促進AEM與Adobe Target之間的驗證。

檢閱 說明檔案 以取得如何建立Adobe IMS設定的逐步指示。

Adobe TargetCloud Service adobe-target-cloud-service

在AEM中建立Adobe TargetCloud Service,以方便將內容片段匯出至Adobe Target。

檢閱 說明檔案 以取得如何建立Adobe TargetCloud Service的逐步指示。

設定資產資料夾 configure-asset-folders

在內容感知設定中設定的Adobe TargetCloud Service,必須套用至包含要匯出至Adobe Target的內容片段的AEM Assets資料夾階層。

展開以取得逐步指示
  1. 登入 AEM作者服務 作為DAM管理員
  2. 瀏覽至 「資產」>「檔案」,找出具有 /conf 套用至
  3. 選取資產資料夾,然後選取 屬性 從頂端動作列
  4. 選取 Cloud Service 標籤
  5. 確保雲端設定已設為內容感知設定(/conf)包含Adobe Target Cloud Service設定。
  6. 選取 Adobe TargetCloud Service設定 下拉式清單。
  7. 選取 儲存並關閉 在右上方

許可AEM Target整合 permission

Adobe Target整合(顯示為developer.adobe.com專案)必須授予 編輯者 Adobe Admin Console中的產品角色,以將內容片段匯出至Adobe Target。

展開以取得逐步指示
  1. 以可在Adobe Admin Console中管理Adobe Target產品的使用者身分登入Experience Cloud
  2. 開啟 Adobe Admin Console
  3. 選取 產品 然後開啟 Adobe Target
  4. 產品設定檔 索引標籤,選取 預設工作區
  5. 選取 API認證 標籤
  6. 在此清單中找出您的developer.adobe.com應用程式,並設定其 產品角色編輯者

將內容片段匯出至目標 export-content-fragments

存在於下的內容片段 已設定的AEM Assets資料夾階層 可匯出至Adobe Target作為內容片段選件。 這些內容片段選件(Target中的特殊形式JSON選件)可用於Target活動,在Headless應用程式中提供個人化體驗。

展開以取得逐步指示
  1. 登入 AEM作者 作為DAM使用者

  2. 瀏覽至 「資產」>「檔案」,並在「已啟用Adobe Target」資料夾下找到要匯出為JSON至Target的內容片段

  3. 選取要匯出至Adobe Target的內容片段

  4. 選取 匯出至Adobe Target選件 從頂端動作列

    • 此動作會將內容片段的完全水合JSON表示法匯出至Adobe Target,做為「內容片段選件」

    • 可以在AEM中檢閱完全水合的JSON表示法

      • 選取內容片段
      • 展開側面板
      • 選取 預覽 圖示加以搜尋
      • 匯出至Adobe Target的JSON表示會顯示在主檢視中
  5. 登入 Adobe Experience Cloud 具有Adobe Target的編輯者角色的使用者

  6. Experience Cloud,選取 Target 從右上方的產品切換器開啟Adobe Target。

  7. 請確定已選取「 」中的「預設工作區」 工作區切換器 右上角。

  8. 選取 選件 索引標籤在頂端導覽

  9. 選取 型別 下拉式清單,然後選取 內容片段

  10. 驗證從AEM匯出的內容片段是否出現在清單中

    • 將滑鼠停留在選件上,並選取 檢視 按鈕
    • 檢閱 選件資訊 並檢視 AEM深層連結 直接在AEM Author服務中開啟內容片段的方式

使用內容片段選件的Target活動 activity

在Adobe Target中,可建立使用內容片段選件JSON作為內容的活動,允許在Headless應用程式中使用在AEM中建立和管理內容的個人化體驗。

在此範例中,我們使用簡單的A/B活動,但可使用任何Target活動。

展開以取得逐步指示
  1. 選取 活動 索引標籤在頂端導覽

  2. 選取 +建立活動,然後選取要建立的活動型別。

    • 此範例會建立一個 A/B測試 但內容片段選件可支援任何活動型別
  3. 建立活動 精靈

    • 選取 Web
    • 選擇體驗撰寫器,選取 表單
    • 選擇工作區,選取 預設工作區
    • 選擇屬性,選取活動可用的屬性,或選取 無屬性限制 以便用於所有屬性。
    • 選取 下一個 建立活動的方式
  4. 透過選取重新命名活動 重新命名 在左上方

    • 為活動提供有意義的名稱
  5. 在初始體驗中,設定 位置1 針對要定位的活動

    • 在此範例中,將目標定位為自訂位置 wknd-adventure-promo
  6. 內容 選取預設內容,然後選取 變更內容片段

  7. 選取要用於此體驗的匯出內容片段,然後選取 完成

  8. 檢閱內容文字區域中的內容片段選件JSON,這是透過內容片段的預覽動作在AEM作者服務中提供的相同JSON。

  9. 在左側欄中新增體驗,並選取要提供的不同內容片段選件

  10. 選取 下一個,並根據活動需要設定鎖定目標規則

    • 在此範例中,請將A/B測試保留為手動50/50分割。
  11. 選取 下一個,並完成活動設定

  12. 選取 儲存並關閉 並為它取一個有意義的名稱

  13. 從Adobe Target的活動中,選取 啟動 從右上角的「非使用中/啟動/封存」下拉式清單。

鎖定目標的Adobe Target活動 wknd-adventure-promo 位置現在可以在AEM Headless應用程式中整合和公開。

Experience Platform資料串流ID datastream-id

一個 Adobe Experience Platform資料流 AEM Adobe Target Headless應用程式若要使用 AdobeWeb SDK.

展開以取得逐步指示
  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: 留空
      • 可在Adobe Target中設定目標環境,網址為 管理>主機.
    • Target第三方ID名稱空間: 留空
  8. 選取 儲存

  9. 在右側,複製 資料串流ID 用於 AdobeWeb SDK 設定呼叫。

將個人化新增至AEM Headless應用程式 code

本教學課程透過以下方式,探索使用Adobe Target中的內容片段選件來個人化簡單的React應用程式 Adobe Experience Platform Web SDK. 此方法可用於個人化任何以JavaScript為基礎的網頁體驗。

Android™和iOS行動體驗可透過以下類似模式進行個人化: Adobe的行動SDK.

先決條件

  • Node.js 14
  • Git
  • WKND共用2.1.4+ 安裝在AEM as a Cloud製作和發佈服務上

設定

  1. 從下載範例React應用程式的原始碼 Github.com

    code language-shell
    $ mkdir -p ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. 開啟程式碼基底於 ~/Code/aem-guides-wknd-graphql/personalization-tutorial 在您最愛的IDE中

  3. 更新您要應用程式連線的AEM服務主機 ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

    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. 安裝 AdobeWeb SDK 作為NPM套件。

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

    Web SDK可用於程式碼中,以依活動位置擷取內容片段選件JSON。

    設定Web SDK時,需要兩個ID:

    • edgeConfigId資料串流ID
    • orgId AEMas a Cloud Service/TargetAdobe組織ID可在下列網址找到: Experience Cloud>設定檔>帳戶資訊>目前的組織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的內容片段,顯示從Adobe Target內容片段選件提供JSON服務的React元件可能視需要複雜多樣。

    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. 將AdobeTargetActivity元件新增至React應用程式的 Home.js 在冒險清單之上。

    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測試為各瀏覽器提供不同的體驗。 如果兩個瀏覽器都顯示相同的冒險選件,請嘗試關閉/重新開啟其中一個瀏覽器,直到顯示另一個體驗為止。

    下圖顯示兩個不同的內容片段選件,分別用於 wknd-adventure-promo 根據Adobe Target邏輯的活動。

    體驗選件

恭喜!

現在我們已將AEMas a Cloud Service設定為將內容片段匯出至Adobe Target,在Adobe Target活動中使用內容片段選件,並在AEM Headless應用程式中顯示該活動,將體驗個人化。

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