預檢設定

AEM Sites Optimizer預檢商機識別需要設定預檢擴充功能。 您可以在通用編輯器、檔案式預覽或AEM Cloud Service中進行設定,以便在發佈頁面之前先對頁面執行預檢稽核。

啟用使用者存取

若要使用Preflight擴充功能,請確定已在Adobe Admin Console中將您的使用者指派給下列至少一個AEM Sites Optimizer產品設定檔:

  • AEM Sites Optimizer - 自動建議使用者
  • AEM Sites Optimizer - 自動最佳化使用者

啟用預檢擴充功能

通用編輯器

若要在通用編輯器中設定預檢,請依照以下步驟進行:

  1. 在此開啟 Extension Manager
    https://experience.adobe.com/#/@org/aem/extension-manager/universal-editor?lang=zh-hant

  2. 找到 AEM Sites Optimizer 預檢擴充功能​並提出啟用的請求。

  3. Adobe AEM團隊​會檢閱並啟用您組織的擴充功能。

  4. 啟用擴充功能後,在 通用編輯器​中開啟一個頁面,例如:
    https://author-p12345-e123456.adobeaemcloud.com/ui#/@org/aem/universal-editor/canvas/author-p12345-e123456.adobeaemcloud.com/content/en/example/home.html

  5. 預檢擴充功能​出現在​ 側邊欄 ​中。

  6. 在側邊欄中選取​「預檢擴充功能」,針對目前頁面開始進行​預檢稽核

文件型製作

若要設定對文件型製作進行預檢,請依照下列步驟進行:

  1. 在 Edge Delivery Services 專案的 GitHub 存放庫中,將以下設定新增至 /tools/sidekick/config.json

    code language-json
    {
      "plugins": [
        {
          "id": "preflight",
          "titleI18n": {
            "en": "Preflight"
          },
          "environments": ["preview"],
          "event": "preflight"
        }
      ]
    }
    
  2. 建立新檔案 /tools/sidekick/aem-sites-optimizer-preflight.js 並新增以下內容:

    code language-javascript
    (function () {
      let isAEMSitesOptimizerPreflightAppLoaded = false;
      function loadAEMSitesOptimizerPreflightApp() {
        const script = document.createElement('script');
        script.src = 'https://experience.adobe.com/solutions/OneAdobe-aem-sites-optimizer-preflight-mfe/static-assets/resources/sidekick/client.js?source=plugin';
        script.onload = function () {
          isAEMSitesOptimizerPreflightAppLoaded = true;
        };
        script.onerror = function () {
          console.error('Error loading AEMSitesOptimizerPreflightApp.');
        };
        document.head.appendChild(script);
      }
    
      function handlePluginButtonClick() {
        if (!isAEMSitesOptimizerPreflightAppLoaded) {
          loadAEMSitesOptimizerPreflightApp();
        }
      }
    
      // Sidekick V1 extension support
      const sidekick = document.querySelector('helix-sidekick');
      if (sidekick) {
        sidekick.addEventListener('custom:preflight', handlePluginButtonClick);
      } else {
        document.addEventListener('sidekick-ready', () => {
          document.querySelector('helix-sidekick')
            .addEventListener('custom:preflight', handlePluginButtonClick);
        }, { once: true });
      }
    
      // Sidekick V2 extension support
      const sidekickV2 = document.querySelector('aem-sidekick');
      if (sidekickV2) {
        sidekickV2.addEventListener('custom:preflight', handlePluginButtonClick);
      } else {
        document.addEventListener('sidekick-ready', () => {
          document.querySelector('aem-sidekick')
            .addEventListener('custom:preflight', handlePluginButtonClick);
        }, { once: true });
      }
    }());
    
  3. 更新 /scripts/scripts.js 中的函數 loadLazy() 以便匯入預覽 URL 的預檢指令碼:

    code language-javascript
    if (window.location.href.includes('.aem.page')) {
       import('../tools/sidekick/aem-sites-optimizer-preflight.js');
    }
    
  4. 開啟您要稽核之頁面的預覽URL (*.aem.page)。

  5. Sidekick 中,按一下​ 「預檢」 ​按鈕,開始對目前頁面進行稽核。

AEM Sites 頁面編輯器

若要在 AEM Sites 頁面編輯器中使用預檢,您可以在網頁瀏覽器中建立書籤小程式。請依照下列步驟操作:

  1. 在網頁瀏覽器中顯示您的​書籤列

    • 按下 Ctrl+Shift+B (Windows) 或 Cmd+Shift+B (Mac)。
  2. 在瀏覽器中建立新書籤:

    • 在書籤列上按一下右鍵,然後選取「新頁面」或「新增書籤」。
    • 在「位址 (URL)」欄位中,貼上以下程式碼:
    code language-javascript
    javascript:(function(){const script=document.createElement('script');script.src='https://experience.adobe.com/solutions/OneAdobe-aem-sites-optimizer-preflight-mfe/static-assets/resources/sidekick/client.js?source=bookmarklet&target-source=aem-cloud-service';document.head.appendChild(script);})();
    
  3. 將書籤命名為「預檢」(或任何您喜歡的名稱)。

  4. *.aem.pageAEM Sites頁面編輯器​中開啟您要稽核之頁面的預覽URL ()。

  5. 在書籤列中按一下「預檢」書籤,以便開始稽核目前頁面。

Adobe Managed Services
note important
IMPORTANT
僅支援使用Adobe的身分提供者(IMS)對AEM Author進行驗證的Adobe Managed Services (AMS)環境。 如果您的組織使用任何其他身分提供者進行AMS驗證,Preflight就沒有作用。

若要在AMS環境的AEM Sites頁面編輯器中使用Preflight,請在網頁瀏覽器中建立書籤小程式,步驟如下:

  1. 在網頁瀏覽器中顯示您的​書籤列

    • 按下 Ctrl+Shift+B (Windows) 或 Cmd+Shift+B (Mac)。
  2. 在瀏覽器中建立新書籤:

    • 在書籤列上按一下右鍵,然後選取「新頁面」或「新增書籤」。
    • 在「位址 (URL)」欄位中,貼上以下程式碼:
    code language-javascript
    javascript:(function(){const script=document.createElement('script');script.src='https://experience.adobe.com/solutions/OneAdobe-aem-sites-optimizer-preflight-mfe/static-assets/resources/sidekick/client.js?source=bookmarklet&target-source=ams';document.head.appendChild(script);})();
    
  3. 將書籤命名為「預檢」(或任何您喜歡的名稱)。

  4. 在​ AEM Sites頁面編輯器 ​中開啟您要稽核的頁面。

  5. 在書籤列中按一下「預檢」書籤,以便開始稽核目前頁面。

最佳做法

執行預檢稽核時,請牢記以下準則:

  • 在發佈到生產環境前,請務必先在​ 中繼或預覽頁面 ​上執行稽核。
  • 優先解決​影響重大的問題,例如連結失效、缺少 H1 標記或不安全的連結。
  • 在執行稽核之前,請確定已針對受保護的臨時環境啟用​驗證
  • 審閱並套用​ 後設標記推薦 ​以提升 SEO 效能。
recommendation-more-help
29313de6-c6a3-44ed-b5c7-faf76d71ebb7