Adobe建議對需要以單頁應用程式框架為基礎的使用者端轉譯(例如React)的專案使用SPA編輯器。 深入了解.
本檔案屬於 AEM Mobile快速入門 指南,AEM Mobile參考的建議起點。
AEM Mobile內容個人化功能允許 AEM作者 使用個人化行動應用程式內容 Adobe Target. 這可讓您將目標選件傳送給行動應用程式使用者。 Adobe Experience Manager Mobile能夠建立、鎖定和傳送內容,為使用者提供適合其個人口味的內容。
在AEM中,作者若要開始建立此內容,管理員和開發人員必須先準備環境。
AEM管理員 在AEM Mobile和Adobe TargetCloud Service之間建立連線時需要使用。
同時,AEM Mobile 開發人員 必須編輯其現有的指令碼,以方便目標內容的製作。
必須先完成數個步驟,內容作者才能開始為行動應用程式產生目標式內容:取得使用者和群組的正確許可權集、建立雲端服務、為活動設定應用程式,以及最終產生內容。
本文會逐步引導您完成設定 AEM Mobile混合參考應用程式 目標定位。
我們日後會假設AEM Mobile混合參考應用程式已成功部署並可透過AEM Mobile儀表板存取。
在作者可以在應用程式中產生目標內容之前,您的AEM例項必須 以Adobe TargetCloud Service設定。
需要存取個人化控制檯的使用者必須屬於 target-activity-authors
群組。
建議將target-activity-group新增至apps-admins群組,作為使用者和群組設定的一部分。 透過新增target-activity-authors群組,這可讓使用者看到「個人化」導覽功能表專案。
若忘記將您想要存取個人化Admin Console的使用者或群組新增至Target活動作者群組,會導致使用者無法看到個人化主控台。
若要讓目標內容適用於行動應用程式,必須設定兩項服務: Adobe Target服務和Adobe行動服務服務。 Adobe Target服務提供處理使用者端請求和傳回個人化內容的引擎。 AdobeMobile Services服務會透過AMS Cordova外掛程式使用的ADBMobileConfig.json檔案,提供Adobe服務與行動應用程式之間的連線。 在AEM Mobile Dashboard中,您可以新增兩項服務來設定應用程式。
在AEM Mobile控制面板中,找到管理Cloud Services,然後按一下+按鈕。
從「新增Cloud Service」精靈中,選取「Adobe Target」雲端服務卡並按下一步。
從選取組態下拉式清單中,您可以建立組態或從現有組態中選取。 若要建立設定,請從下拉式清單中選取「建立設定」。 輸入Target設定的標題。 輸入與您的Target帳戶相關聯的使用者端代碼、電子郵件和密碼。 如果您不知道這些欄位的值,請聯絡Adobe Target支援。 按一下「驗證」按鈕以驗證認證。 驗證後,按一下提交按鈕以建立雲端服務。
系統會透過精靈,自動將所建立的雲端服務與行動應用程式建立關聯。 在應用程式群組節點的jcr:content節點上設定cq:cloudserviceconfigs屬性值。 對於混合式應用程式範例,它會在/content/mobileapps/hybrid-reference-app/jcr:content上設定,且值指向在/etc/cloudservices/testandtarget/adobe-target—aem-apps/framework自動產生的架構節點。 框架節點預設會設定兩個屬性:性別和年齡。 此架構僅供AEM預覽使用,對裝置沒有任何影響。
完成精靈後,「管理Cloud Service」表徵圖會包含Target雲端服務。 但是,其中包含有關遺失Adobe Mobile Service帳戶的警告。
還必須將AdobeMobile Services (AMS)帳戶連結至應用程式,AMS服務提供必要的ADBMobileConfig.json檔案,該檔案包含Target使用者端代碼資訊。 在與AMS帳戶建立關聯之前,必須由擁有AMS許可權的使用者修改AMS帳戶。
若要登入AMS服務,請造訪 https://mobilemarketing.adobe.com,選取行動應用程式並按一下設定。 找出「SDK目標選項」欄位,並將使用者端代碼放入欄位中,然後按一下「儲存」。
現在,使用者端代碼已與行動應用程式相關聯,當透過Adobe行動儀表板設定AMS雲端服務時,服務設定的設定將透過ADBMobileConfig.json檔案傳送。
現在已設定AMS,是時候在Adobe行動儀表板中關聯行動應用程式了。 在AEM Mobile控制面板中,找到管理Cloud Services,然後按一下+按鈕。
選取AdobeMobile Services卡片,然後按下一步。
從建立或選取精靈步驟中,選取行動服務下拉式清單,然後選取建立設定專案。 提供標題、公司、使用者名稱、密碼,並選取適當的資料中心。 如果您不知道這些值,請聯絡您的Adobe Mobile Service管理員以取得它們。 填寫完所有欄位後,按一下 驗證. 驗證程式會移至AMS並驗證帳戶的認證,在成功驗證時,會填入行動應用程式清單,您可在其中從下拉式清單中選取關聯的行動應用程式。 按一下 提交 以完成精靈。 此程式可能需要一點時間才能取得設定資料及與應用程式關聯的任何分析。 程式完成後,按一下 完成 返回Adobe行動儀表板。
返回行動儀表板,「管理Cloud Services」表徵圖包含AMS雲端服務。 另請注意,「分析量度」圖磚會填入生命週期報表。
先決條件: 如上所述,管理員必須先設定與Adobe Target服務的連線,作者才能產生新的目標內容。
在管理員設定兩個雲端服務,且開發人員設定mobileappoffers處理常式後,內容作者現在可以開始產生鎖定目標的體驗。
在AEM Mobile應用程式中編寫目標內容時,會遵循與編寫AEM Sites類似的程式:
如需的完整概述,請參閱此處 在AEM中製作目標內容
建立行動應用程式的AEM開發人員在開發元件時,應該繼續遵循AEM中常用的模式。 在此,Adobe會逐步引導您完成必要步驟,讓內容作者建立目標內容:
為了將內容傳送至使用者的裝置,內容會透過轉譯由AEM內容作者建立的選件來產生。 若要處理目標選件的轉譯,有一個新的內容同步處理常式可處理選件。 使用混合參考應用程式作為範例,en (英文)內容套件包含的ContentSyncConfig具有 mobileappoffers 處理常式。 下一步是將選件轉譯至裝置時十分重要。 mobileappoffers處理常式具有路徑屬性,可識別用於應用程式的個人化活動路徑。
例如,如果活動位於 /content/campaigns/hybridref,複製此路徑並貼上做為 路徑 mobileappoffers處理常式的屬性。
對於混合參考應用程式,有兩個Mobileappoffer處理常式,一個用於開發,另一個用於生產。
在mobileappoffers處理常式的path屬性中設定活動路徑後,請儲存處理常式。 處理常式現在已準備好開始呈現行動裝置的選件。
Mobileappoffers處理常式的設定方式不同,適用於發佈和開發設定。 對於發佈設定,有一個稱為的屬性 轉譯模式 具有值 發佈 在cq:ContentSyncConfig節點上設定。 mobileappoffers處理常式會參照renderMode,並在設為publish時編輯所建立的mbox id。 根據預設,AEM建立的mbox會將 — author值附加至mbox id。 這會識別活動尚未發佈,且應使用未發佈的行銷活動來解析優惠方案。
透過Adobe行動儀表板將內容分段時,分段內容會被視為生產就緒內容,並透過非開發內容同步設定進行轉譯。 以這種方式呈現將會導致 — author從所有mbox id中移除,並預期Target伺服器上會有已發佈的活動。 在測試分階段內容之前,請確定活動已發佈。
任何內容的基礎通常是頁面元件,它會延伸其中一個基本AEM頁面元件wcm/foundation/components/page或foundation/components/page (視您使用的是HTL或JSP而定)。 這些步驟的持續時間著重於使用wcm/foundation/components/page元件。 頁面元件的基本結構會細分為多個指令碼,每個指令碼提供特定用途,讓開發人員可視需要整理及覆寫其程式碼。 個人化感興趣的兩個指令碼是head.html和body.html。 這兩個指令碼提供一個區域,可以插入程式碼以支援Context Hub、Cloud Services和行動編寫。
以下為啟用內容鎖定目標之兩個主要指令碼的概觀。
若要讓作者能夠鎖定其內容,必須將目標功能表新增至頁面,讓作者可以將內容從編輯模式變更為目標定位模式。 若要啟用此功能,開發人員應修改head.html指令碼,在靠近head.html頂端或靠近 <title></title> 元素。
<meta data-sly-test="${!wcmmode.disabled}">
<div data-sly-call="${clientLib.all @ categories='personalization.kernel'}" data-sly-unwrap></div>
<div data-sly-resource="${'config' @ resourceType='cq/personalization/components/clientcontext_optimized/config'}" data-sly-unwrap></div>
<div data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}" data-sly-unwrap></div>
</meta>
只有在停用WCM模式(例如停用WCM模式)時(如需詳細資訊,請參閱ContentSync處理常式一節),指令碼才會包含在最終應用程式程式碼中。
為了讓作者能夠預覽目標內容,編輯器必須能夠找到Adobe Target雲端服務的設定。 下列程式碼區塊新增兩個重要指令碼。 首次新增頁面功能,以找出關聯的Target雲端服務,並向Adobe Target發出呼叫。 第二個是新增cq.apps.targeting類別。
此 cq.apps.targeting 類別會覆寫預設的cq/personalization/component/target元件,並使用可針對行動應用程式使用量呈現特定選件的mobileapps/components/target元件。 有關詳細資訊,請參閱目標元件區段。
程式碼應新增至head.html中,並放置在的結尾之前 </head> 元素。
<div data-sly-test="${!wcmmode.disabled}">
<div data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap></div>
<meta data-sly-call="${clientLib.all @ categories='cq.apps.targeting'}" data-sly-unwrap></meta>
</div>
程式碼區塊包裝在WCM模式中時不會停用,因此只有在內容作者正在建立內容時才會發揮作用。 雲端服務指令碼不會新增至產生的行動執行階段程式碼。
若要讓內容作者能夠測試不同角色,body.html指令碼必須包含以下程式碼區塊,做為body元素的第一個子項。
<div data-sly-test="${!wcmmode.disabled}">
<div data-sly-resource="${'clientcontext' @ resourceType='cq/personalization/components/clientcontext_optimized'}" data-sly-unwrap></div>
</div>
程式碼的最後一位元位於body.html底部。 此位元程式碼會尋找關聯的雲端服務,並注入適當的目標定位引擎程式碼。
<div data-sly-test="${!wcmmode.disabled}">
<div data-sly-resource="${'cloudservices' @ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" data-sly-unwrap></div>
</div>
head.html和body.html的範例可在以下網址找到: AEM Mobile混合參考應用程式 顯示開發人員在兩個指令碼中放置指令碼區塊的位置。
當內容作者完成建立行動應用程式的內容時,下一步就是下載來源並建置應用程式,或暫存要發佈的內容。 開發人員需透過數個步驟,才能完成這項工作。 為協助轉譯內容,AEM Mobile使用內容同步處理常式來轉譯及封裝內容。 已為Personalization使用案例引入新的內容同步處理常式,以便呈現目標內容。 「mobileappoffers」處理常式知道如何呈現內容作者建立的關聯目標選件。 mobileappoffers處理常式會擴充抽象頁面更新處理常式,因此許多屬性都類似。 mobileappoffers處理常式的詳細資訊具有以下屬性。
屬性 | 值 | 說明 |
重寫 | +相對父路徑 - "/" |
rewrite屬性可識別應如何重寫內容中的路徑。 |
includedPageTypes | "cq/personalization/components/teaserpage", "cq/personalization/components/offerproxy" |
includePageTypes屬性是選用屬性,預設為具有cq/personalization/components/teaserpage和cq/personalization/components/offerproxy資源型別的頁面。 這兩種資源型別是目標內容時使用的預設資源型別。 如果必須支援其他資源型別,請將它們新增至includePageTypes清單。 |
locationRoot | /content/mobileapps/<app> | 應用程式的位置。 |
類型 | mobileappoffers | 作為mobileappoffers的處理常式名稱。 |
選擇器 | tandt | tandt選擇器可用來轉譯目標內容。 |
targetRootDirectory | www | 要保留演算內容的根目錄。 |
includeImage | true | false | 如果為true,則會轉譯選件中包含的任何影像。 如果為false,則會略過影像。 |
includeVideo | true | false | 如果為True,則會轉譯選件中包含的任何影片。 若為false,則會略過視訊。 |
path | /content/campaigns/<brand> | 指向優惠方案參與的行銷活動品牌。 目前所有優惠方案都必須來自相同行銷活動。 |
深入 | true | false | 如果true會遞迴轉譯所有子頁面,如果false則不會遞回。 |
擴充功能 | html | 設定正在轉譯之資源的擴充功能。 設定為html,讓頁面的副檔名為.html。 |
此 AEM Mobile混合參考應用程式 具有預設的mobileappoffer處理常式設定。 範例中的路徑屬性是空的,因為它取決於行銷活動位置。 Campaign作者建立Campaign後,應用程式管理員應指定指向Campaign的路徑屬性,將Campaign與處理常式建立關聯。
為協助轉譯專門用於行動應用程式的內容,AEM Mobile使用mobileapps/components/target元件。 行動目標元件會擴充cq/personalization/components/target元件,並覆寫engine_tnt.jsp指令碼。 透過覆寫engine_tnt.jsp,這可讓AEM Mobile控制為行動應用程式使用案例產生的HTML。 對於內容作者鎖定的每個元件,都會由engine_tnt.jsp建立關聯的mbox。
對於每個mbox,屬性為 cq目標定位 新增功能,讓應用程式開發人員可撰寫自訂程式碼,以使用任何想要使用的程式碼。 此 AEM Mobile混合參考應用程式 有一個使用cq-targeting屬性的Angular指示詞範例。 內容取代的概念(何時及如何進行)由行動應用程式開發人員決定。 有一個透過AEM /etc/clientlibs/mobileapps/js/mobileapps.js傳遞的Mobile SDK,其提供呼叫Adobe鎖定目標服務的API。 應用程式開發人員可自行指定何時應根據其應用程式的設計進行該呼叫。