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 markup has been created and published both on the Editor and on the Highlighter in Schema App software.

Step 1: On 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, Click on ‘Home’. If you have an existing project, Click the Edit icon to edit the Deployment option. Please select “Adobe Experience Manager”. If you do not have an existing project, a project will have to be created before proceeding with next steps.

  2.  Enter the base URL / Domain of your AEM website.

  3. Click ‘OK’ to save the selection.
  4. On the side menu bar. Click ‘Integrations’.
  5. Under Deployment options, Select ‘Adobe Experience Manager’. 
  6. Copy the Account ID. These will be required for registration on AEM.


Step 2: Download and Install SchemaApp AEM Connector 

  1.  Download the connector from Adobe Marketplace Or via a link provided by SchemaApp and install using AEM Package Manager tool on all AEM instances.
  2. Once file is successfully download, login to your AEM environment.
  3. Navigate to Tools --> Deployment --> Packages.
  4. Then /crx/packmgr/index.jsp
  5. Click on 'Upload Package'

    Graphical user interface, text, application, email 
Description automatically generated

  6. Locate SchemaApp connector package and select 'Force Upload'. click 'OK'



  7. Install the Package. If installation is successful, package details will be displayed.

    Graphical user interface, text, application, email 
Description automatically generated




    Step 3: SchemaApp 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.



    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.

Graphical user interface, application Description automatically generated

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

 12. Then Click on ‘Cloud Services’ tab

Graphical user interface, text, application, email Description automatically generated

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

   14. Click Save and Close.



Step 4: 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 5: 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 6: 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 7 : Confirming 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 markup, if any 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.    

 

Path

Read

Modify

Create

Notes

/content*

To create schemaapp JSON-LD data node under page content node.

/etc/cloudservices* 

  To create and read schemaapp config

    

 

Function

Role

Author

API registration.

Publisher

Receives requests from the dispatcher.

Scheduler

Makes calls to the Schema App CDN.