Configurações de simulação

Para configurar a simulação no Universal Editor, siga estas etapas:

1. Abra o Extension Manager em:
   https://experience.adobe.com/#/@org/aem/extension-manager/universal-editor
2. Localizar a extensão de Simulação do AEM Sites Optimizer.
3. O administrador de sistema da organização precisará habilitar essa extensão.
4. Após habilitar a extensão, abra uma página no Universal Editor, como, por exemplo:
   https://author-p12345-e123456.adobeaemcloud.com/ui#/@org/aem/universal-editor/canvas/author-p12345-e123456.adobeaemcloud.com/content/en/example/home.html
5. A Extensão do Preflight aparece no painel lateral.
6. Selecione a Extensão de simulação no painel lateral para abrir a simulação para a página atual.

Para configurar a simulação para criação baseada em documentos, siga estas etapas:

1. Adicione a seguinte configuração a /tools/sidekick/config.json no repositório do GitHub do seu projeto do Edge Delivery Services:

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

2. Crie um novo arquivo /tools/sidekick/aem-sites-optimizer-preflight.js e adicione o seguinte conteúdo:

   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. Atualize a função loadLazy() em /scripts/scripts.js para importar o script de simulação para URLs de pré-visualização:

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

4. Abra o URL de visualização (*.aem.page) da página que deseja auditar.

5. No Sidekick, clique no botão Comprovação para abrir a Comprovação da página atual.

Para usar a simulação no editor de páginas do AEM Sites, você pode criar um marcador no seu navegador da web. Siga estas etapas:

1. Exiba a Barra de Favoritos no seu navegador da Web:

   • Pressione Ctrl+Shift+B (Windows) ou Cmd+Shift+B (Mac).

2. Crie um novo marcador no seu navegador:

   • Clique com o botão direito do mouse na barra de marcadores e selecione Nova página ou Adicionar marcador.
   • No campo Endereço (URL), cole o seguinte código:

   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. Nomeie o marcador Simulação (ou qualquer nome que preferir).

4. Abra o URL de visualização (*.aem.page) da página que você deseja auditar no Editor de páginas do AEM Sites.

5. Clique no marcador Comprovação na Barra de marcadores para abrir a Comprovação da página atual.

Para usar a comprovação no Editor de páginas do AEM Sites em um ambiente do AMS, crie um bookmarklet no navegador da Web, seguindo estas etapas:

1. Exiba a Barra de marcadores do seu navegador da web:

   • Pressione Ctrl+Shift+B (Windows) ou Cmd+Shift+B (Mac).

2. Crie um novo marcador no seu navegador:

   • Clique com o botão direito do mouse na barra de marcadores e selecione Nova página ou Adicionar marcador.
   • No campo Endereço (URL), cole o seguinte código:

   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. Nomeie o marcador Simulação (ou qualquer nome que preferir).

4. Abra a página que deseja auditar no editor de páginas do AEM Sites.

5. Clique no marcador Comprovação na Barra de marcadores para abrir a Comprovação da página atual.