Preflight-Setup

Gehen Sie wie folgt vor, um Preflight im universellen Editor einzurichten:

1. Öffnen Sie den Extension Manager unter:
   https://experience.adobe.com/#/@org/aem/extension-manager/universal-editor

2. Suchen Sie nach der AEM Sites Optimizer Preflight-Erweiterung und senden Sie eine Anfrage, um sie zu aktivieren.

3. Das Adobe AEM Team überprüft und aktiviert die Erweiterung für Ihr Unternehmen.

4. Nachdem die Erweiterung aktiviert ist, öffnen Sie eine Seite im universellen Editor, z. B.:
   https://author-p12345-e123456.adobeaemcloud.com/ui#/@org/aem/universal-editor/canvas/author-p12345-e123456.adobeaemcloud.com/content/en/example/home.html

5. Die Preflight-Erweiterung wird in der Seitenleiste angezeigt.

6. Wenn Sie in der Seitenleiste auf die Preflight-Erweiterung klicken, wird das Preflight-Audit für die aktuelle Seite gestartet.

Gehen Sie wie folgt vor, um Preflight für das dokumentenbasierte Authoring einzurichten:

1. Fügen Sie folgende Konfiguration zum /tools/sidekick/config.json im GitHub-Repository Ihres Edge Delivery Services-Projekts hinzu:

   code language-json
   { "plugins": [ { "id": "preflight", "titleI18n": { "en": "Preflight" }, "environments": ["preview"], "event": "preflight" } ] }

2. Erstellen Sie eine neue Datei mit dem Namen /tools/sidekick/aem-sites-optimizer-preflight.js und fügen Sie den folgenden Inhalt hinzu:

   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. Aktualisieren Sie die loadLazy()-Funktion in /scripts/scripts.js, um das Preflight-Skript für Vorschau-URLs zu importieren:

   code language-javascript
   if (window.location.href.includes('.aem.page')) { import('../tools/sidekick/aem-sites-optimizer-preflight.js'); }

4. Öffnen Sie die Vorschau-URL (*.aem.page) der Seite, die Sie prüfen möchten.

5. Klicken Sie in Sidekick auf die Schaltfläche Preflight, um die Prüfung für die aktuelle Seite zu starten.

Um Preflight im Seiteneditor von AEM Sites zu verwenden, können Sie in Ihrem Webbrowser ein Bookmarklet erstellen. Führen Sie die folgenden Schritte aus:

1. Zeigt Ihre Lesezeichenleiste in Ihrem Webbrowser an:

   • Drücken Sie Strg+Umschalt+B (Windows) oder Befehl+Umschalt+B (Mac).

2. Erstellen Sie ein neues Lesezeichen in Ihrem Browser:

   • Klicken Sie mit der rechten Maustaste auf die Lesezeichenleiste und wählen Sie Neue Seite oder Lesezeichen hinzufügen aus.
   • Fügen Sie im Feld Adresse (URL) den folgenden Code ein:

   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. Nennen Sie das Lesezeichen Preflight (oder verwenden Sie einen beliebigen Namen, den Sie bevorzugen).

4. Öffnen Sie die Vorschau-URL (*.aem.page) der Seite, die Sie im AEM Sites-Seiteneditor überprüfen.

5. Klicken Sie in Ihrer Lesezeichenleiste auf das Preflight-Lesezeichen, um den Audit für die aktuelle Seite zu starten.

Um Preflight im AEM Sites-Seiteneditor in einer AMS-Umgebung zu verwenden, erstellen Sie eine Lesezeichenliste in Ihrem Webbrowser, indem Sie die folgenden Schritte ausführen:

1. Zeigen Sie Ihre Lesezeichenleiste in Ihrem Webbrowser an:

   • Drücken Sie Strg+Umschalt+B (Windows) oder Befehl+Umschalt+B (Mac).

2. Erstellen Sie ein neues Lesezeichen in Ihrem Browser:

   • Klicken Sie mit der rechten Maustaste auf die Lesezeichenleiste und wählen Sie Neue Seite oder Lesezeichen hinzufügen aus.
   • Fügen Sie im Feld Adresse (URL) den folgenden Code ein:

   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. Nennen Sie das Lesezeichen Preflight (oder verwenden Sie einen beliebigen Namen, den Sie bevorzugen).

4. Öffnen Sie die zu prüfende Seite im AEM Sites-Seiteneditor.

5. Klicken Sie in Ihrer Lesezeichenleiste auf das Preflight-Lesezeichen, um den Audit für die aktuelle Seite zu starten.