page policies customization - adding new tabs

Hi @kummari_dilipku ,

To manage custom tags under the <head> tag in Adobe Experience Manager (AEM) effectively, especially when the tags can vary for each page, you can use several approaches depending on your specific needs and the flexibility required. Here are some approaches you might consider:

1. Page Properties and Template Configuration

1. Custom Page Properties: Add a custom field in the page properties where authors can enter the custom tags. This can be achieved by extending the page properties dialog.

   • Steps:
     1. Create a new dialog for the page component.
     2. Add a text field or textarea field in the dialog to input custom tags.
     3. Use this input to inject the tags into the <head> section of the page.

2. Template and Component Inheritance: Ensure that your templates and components can read these properties and render them in the <head> tag.

   • Steps:
     1. Modify the page component's HTML file (.html) to include a placeholder for custom tags.
     2. Use a Sling Model or a Use API class to fetch the custom tags from the page properties.
     3. Insert these tags into the <head> section of the page.

2. Using AEM Context-Aware Configurations

1. Context-Aware Configuration: This feature allows for defining configurations at different levels (site, page, etc.) and can be used to manage head tags.

   • Steps:
     1. Define a configuration that includes a field for custom head tags.
     2. Create a context-aware configuration specific to each page or section where the custom tags will differ.
     3. Use Sling Models or WCMUsePojo to read these configurations and inject them into the head section.

3. Client Libraries and JavaScript

1. Client Libraries: Use AEM's client library system to inject dynamic head content via JavaScript.

   • Steps:
     1. Create a client library that contains a JavaScript file.
     2. In the JavaScript file, read the custom tags from a data attribute or JSON object embedded in the page.
     3. Dynamically append these tags to the <head> section.

4. Sling Dynamic Include (SDI)

1. Sling Dynamic Include (SDI): Use SDI to dynamically include content in the head section.

   • Steps:
     1. Configure SDI to use specific selectors or resource types to include head tag content.
     2. Create a component that outputs the custom head tags based on the page properties.
     3. Ensure the component is invoked in the head section of your page templates.

Example Implementation (Page Properties Approach)

1. Extend Page Properties Dialog:

   • In your AEM project, add a new field in the page properties dialog.
   • For example, in the dialog XML

2. Modify the Page Component HTML:

• In your page component's HTML file (e.g., page.html), include a placeholder for custom head tags:

Fetch Properties Using Sling Models:

• Create a Sling Model to fetch the custom tags from page properties:
   

Include the Model in the HTML:

• Use the model in the HTML file to render the custom tags:

By using these approaches, you can effectively manage custom head tags in AEM, providing flexibility for content authors to define tags on a per-page basis.

@kummari_dilipku Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!