Headless AEM Installation Guide - Cloud

Headless AEM is a Adobe Experience Manager setup in which the frontend is decoupled from the backend. A site with React or Angular in the frontend is classified as Headless AEM.

To see schema markup on the website or to be eligible for rich results, this guide assumes that relevant schema markup has been created and published both on the Editor and on the Highlighter in Schema App software.

Step 1: Select Deployment Type in Schema App

Note: A project on Schema App consists of a group of URLs. Every site on AEM should have a configuration that is linked to a project on Schema App i.e. one configuration for every AEM site.

1. Login to Schema App, select the appropriate project, and click the dropdown to access the settings.

2.  Click "Add Website" and enter the base URL / Domain of your AEM website.

3. Under Deployment Settings, select Adobe Experience Manager.

4. In the Deployment Settings dropdown, copy the API Key and Account ID to your clipboard. These will be required for registration on AEM.
   

Step 2: Download and Install Schema App AEM Connector 

This installation assumes that Experience Manager Cloud instance's source project is checked out from the git repository. 
Download the connector from Adobe Marketplace Or via a link provided by Schema App and install using AEM Package Manager tool on all AEM instances.

1. Download connector from Adobe Marketplace or from link provided by Schema App team. Once file is successfully download, login to your AEM environment.
2. In AEM instance source project, navigate to  / create the path "[base project]/ui.apps/src/main/content/jcr_root/etc/packages/com.schemaapp" 
3. Add the downloaded package. 
4. Navigate to "[base project]/ui.apps/src/main/content/META-INF/vault/filter.xml" 
5. Edit, add the line 
   <filter root="/etc/packages/com. schemaapp/[filename]"/> 
6. Commit change to the git repository.
7. Rebuild the instance.

Step 3: Schema App Connector Configuration 

        1. Login to Adobe Experience Manager. (if not logged in).

        2. Click on ‘Tools’ in the right menu bar.

      3. Click on Cloud Services and then Click on " Schema App Connector" tile.

    4. Click on ‘Create’ button on the top right.

    5. In the dialog box, Enter the Account ID, API key & Website URL (publisher). Also determine whether you want to deploy with JavaScript or the Crawler, this should match your Highlighter deployment in Schema App. When finished click 'Connect to Schema App' to register the site.

Impact of choosing Crawler vs Javascript

Crawler: JavaScript is not added to the site, only JSON-LD is added and the meta tag, schema markup  is updated much less frequently like once a week.

JavaScript: JavaScript will be added, the Scheduler will try and get JavaScript schema markup, Highlight.js and meta tag. Schema Markup will be updated every 4 hours.

    6. You should get a message "You site has been registered with Schema App'.
        Click 'Save' in top right corner of the page.

   7. New config should be listed on the left of the screen.





The next steps guide you on how to configure the Schema App Configuration to the required pages.

  8. Go back to the Home page of your Adobe Experience Manager.

  9. Click on ‘Sites’.

 10. Select the site that you want the configuration earlier created to apply to.



 11. On the top menu bar, click ‘Properties’.

 12. Then Click on ‘Cloud Services’ tab

  13. Select the appropriate configuration created earlier in the drop down.

   14. Click Save and Close.

Step 3: Required Frontend configuration.

1. Add logic to read below data from the AEM page model.json under the “schemaapp” JSON block.

   1. accountId

   2. siteURL

   3. deploymentMethod

   4. entity

2. Check If deploymentMethod attribute value is “JavaScript”, then in your front-end code you have to add below HTML snippet: (you need to paste accountId attribute in the below script) If you are deploying using the Crawler this is not required.

   1. <script>window.schema_highlighter={output: false, accountId: "<paste accountId attribute value here >”}</script>

   2. <script async="" src="https://cdn.schemaapp.com/javascript/highlight.js"></script> 

3. Read “siteURL” attribute value in your front-end code and add below HTML snippet:

   1. <meta data-page-path="< paste siteURL attribute value here>">

4. Read “entity” attribute value in your front-end code and add below HTML snippet:

   1. <script type="application/ld+json">< paste entity attribute value here> </script>

Step 4: Verification of Data for Headless Implementaion.

To confirm data is updated correctly, enter the below in a browser 
<page URL>.model.json e.g. https://weretail.com.model.json 

Browser will return the json, search for 'schemaapp' and It should include the following data:

• accountId

• siteURL

• deploymentMethod

• entity

Step 4: Confirming Meta data added to the Page. 
To confirm a meta data-page-path element is in the head element
- Open any page of the website.
- Right click, then select ‘Inspect’
- Search with ‘meta data-page' Schema App’, you should see the meta data path and the URL. 

Step 6: Confirming schema markup deployment on the website.
To confirm the integration and deployment is complete, allow for 5 minutes.
- Open any page of the website.
- Right click, then select ‘Inspect’
- Search with ‘Schema App’ and 'JSON-LD, you should see the required scripts with Account ID. And schema markup, if any schema markup has been created for the site.

Permissions & Services 

Below table highlights the permissions and services that will be required for the Plugin to work efficiently.