Introduction to Adobe Edge Delivery Services & Document-Based Authoring

Optimizing website performance is a key goal for many marketing and development teams. It helps improve conversion rates and reduce bounce rates, thus enhancing the customer experience and ultimately generating more revenue.

To help meet high-impact performance goals, Adobe offers Edge Delivery Services and Document-based Authoring in Adobe Experience Manager (AEM). This post will explain what businesses need to know about these AEM capabilities.

What is Edge Delivery Services?

Edge Delivery Services refers to a composable set of services that enhances AEM. It enables a rapid development environment where new sites can be launched fast, and authors can update and publish content quickly.

Edge Delivery Services offers a built-in experimentation framework that allows quick test creation. It also increases authoring efficiency by decoupling content sources so that content authors can use both AEM authoring, document-based authoring, and headless authoring.

With Edge Delivery Services, businesses can:

• Create high-impact experiences fast.

• Create sites with a perfect Lighthouse performance score.

• Deliver experiences that drive engagement and conversions.

• Go from editing to seeing the content live in just a few clicks.

• Allow multiple content sources to be used for the same site while streamlining the publishing process independently.

Edge Delivery Services has the following characteristics:

• It is decoupled from the content source and can ingest content from different sources.

• It uses GitHub so that customers can manage and deploy code directly from their GitHub repository.

• The content authored using Edge Delivery Services with AEM as a Cloud Service is persisted in AEM as a Cloud Service.

• It is based on the concept of blocks (AEM provides OOTB blocks that can be extended to meet specific project needs).

• It can be integrated into an existing AEM project.

How to Author Content (Pages) Using Adobe Edge Delivery Services

Edge Delivery Services provides different options for authoring content via WYSIWYG authoring, headless authoring, or document-based authoring:

1. The OOTB AEM WYSIWYG authoring capabilities to create content in AEM.

   • It is for creating new pages, Experience Fragments, Content Fragments, and more.

   • It provides advanced AEM features like Workflows, Live Copies, Launches, and MSM.

2. The Universal Headless Editor can be used for authoring content already created in AEM.

   • The new modern headless UI allows authoring content within AEM by dragging and dropping blocks.

   • It is a perfect fit for users that:

     • Prefer WYSIWYG features provided by AEM.

     • Cannot use Sharepoint or Google Drive.

     • Have a headless Native App. Note: a developer must instrument the app to support the Universal Editor.

   • Characteristics include:

     • Authors can use default blocks (provided out of the box by Adobe) or customized blocks (developed for a specific project).

     • All changes are persisted to AEM.

     Some AEM features of the AEM Page Editor may not be available in the Universal Editor.

3. Document-based authoring (Microsoft Word or Google Docs, for example) can be used to create and author content outside of AEM. However, authors can also import it into AEM. Document-based authoring allows documents (Google Docs and Word documents) to be translated into website pages (markdown and HTML markup).

   • It is a perfect fit for users who:

     1. Have content already created in documents.

     2. Require fast content creation and publication.

     3. Need to provide a very easy onboarding for Authors.

     4. Prefer simplicity and do not require AEM's advanced features (Workflows, Live Copies, Launches, MSM, etc).

Document-based authoring:

How It Works

• Each document represents one page.

• There are different documents for the header and footer.

• Each page’s content is rendered using one main document.

• A document can be included in another document.

• Document path and name are used as URLs in the browser, except by the landing page.

• The site’s landing page corresponds to a page in the root path named “index."

• The path of the landing page corresponds to the main site URL (www.mydomain.com for example).

• To access other documents on the root level of the site (the same level as index/landingpage) the route starts with the main site URL (www.mydomain.com/mydoc for example).

•  

  If you want to get a quick, hands-on experience with document-based authoring, Adobe provides a step-by-step tutorial on setting up a demo Helix project.

   

How Common Document Elements are Converted into HTML

Regular document elements like lists, headings, font elements, images, and videos can be transferred from the initial source to your website.

1. Images: Images will be resized to fit the visitor's browser window. Any resizing done in Word or Google Docs will have no effect

2. Videos: With the help of the AEM Slack Bot, you can add videos or large images to your documents.

3. Links: You must use the absolute, public URL, as internal links will be adjusted to be relative to your website.

4. Metadata and SEO: At the end of the document, you can create a table like this:

Blocks:

Blocks are the fundamental components of a page delivered by Edge Delivery Services. Blocks allow authors to work with more structured content while adding functionality to the site.

1. Structure of a block:

   • Every block is a table

   • It requires a header row (a merged first row containing the block name).

   • Every single table cell after the header row is considered content that may or may not contain configuration or references.

2. In code, some blocks are build out of:

   • CSS if they intend to provide some styling to a specific type of content.

   • Javascript if they intend to provide a standard behavior for some specific type of content.

   • Both CSS and Javascript if both apply.

3. Developers can change all the .css and .js code to meet specific project needs.

4. There’s complete documentation on blocks that explains every current block usage, shows live examples, and points to the source code.

5. Boilerplate blocks' source codes are available in the aem-boilerplate project repository.

Structured Data (Spreadsheets):

Structured data allows spreadsheets (Microsoft Excel workbooks and Google Sheets) to be translated into and delivered as JSON files that a website or web application can easily consume.

Naming convention:

1. AEM delivers only sheets whose name starts with helix- prefix.

2. Any sheets not following the naming convention cannot be accessed, which allows for the storage of additional information that is not expected to be exposed.

Handling multiple sheets:

1. One sheet: The only existing sheet is used as default.

2. Multiple sheets: A sheet query parameter allows to specify the name of one or more sheet names to be retrieved. For example a request like ?sheet=budget2023&sheet=budget2024 will return the JSON representation of the information of sheets named helix-budget2023 and helix-budget2024.

Default sheet:

1. A sheet called helix-default is used by default when no additional query parameters are supplied to the request.

Other Parameters:

1. offset and limit: Used to indicate which rows have been delivered. If limit is not specified, AEM will return 1,000 rows by default.

Spreadsheets are read-only, except for two specific files

1. incoming: A spreadsheet (Microsoft Excel or Google Sheets document) used by the forms service to ingest submitted data. This file cannot be delivered as JSON.

2. raw_index: This is used by the index service to write a list of all published pages in a section of the website. This file can also be delivered as JSON.

Example:

1. Let’s say this Google Sheet has been created in the root directory of the Google Drive used as a content source for Edge Delivery Services for Document-based authoring :

   

2. The adobe-aem-tech-support Google Sheet can be accessed (after been published using the Sidekick) at [your_instace].hlx.live/adobe-aem-tech-support.json and this will be it's corresponding JSON output:

{
  "total": 3,
  "offset": 0,
  "limit": 3,
  "data": [
    {
      "AEM Version": "6.3",
      "CurrentlySupported?": "No",
      "End of core support": "4/30/2020"
    },
    {
      "AEM Version": "6.4",
      "CurrentlySupported?": "No",
      "End of core support": "4/30/2021"
    },
    {
      "AEM Version": "6.5",
      "CurrentlySupported?": "Yes",
      "End of core support": "N/A"
    }
  ],
  ":type": "sheet"
}

How to Publish pages Using the AEM Sidekick?

The AEM Sidekick is required to publish documents to the AEM as a Cloud instance. Adobe provides three installation options to choose from.

Note:

• The site’s root page can be accessed at [your_instance].hlx.live, and all of its documents can be accessed by path using this root URL as the prefix.

• You do not need to publish a document to see changes reflected. Any document can be previewed using the Sidekick plugin. For example, changes made to a site's root page can be previewed at [your_instance].hlx.page. TThis is helpful for sharing content with stakeholders even before it is published.

Wrap Up

Adobe Edge Delivery Services has provided different ways to author content. Document-based authoring, in particular, allows users to use well-known tools such as Microsoft Word or Google Docs to create and author documents that can be easily converted into web pages of a website hosted in AEM as a Cloud. In the same way, document-based authoring allows the use of well-known spreadsheets as data sources to be consumed as JSON files.

By doing this, Adobe empowers authors to own site content and create high-impact experiences that drive engagement and conversions. It allows them to easily share content that can be previewed and published with just one click using the AEM Sidekick.

For content editors, mastering your content tools can ensure a high-performing, marketing-boosting team continually meets expectations. Adhering to AEM content editing best practices can streamline your content management process and enhance the user experience.

Learn more about content editing in AEM in our ebook: Adobe Experience Manager Content Editing Best Practices.