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
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:
- Create a new dialog for the page component.
- Add a text field or textarea field in the dialog to input custom tags.
- Use this input to inject the tags into the <head> section of the page.
Template and Component Inheritance: Ensure that your templates and components can read these properties and render them in the <head> tag.
- Steps:
- Modify the page component's HTML file (.html) to include a placeholder for custom tags.
- Use a Sling Model or a Use API class to fetch the custom tags from the page properties.
- Insert these tags into the <head> section of the page.
2. Using AEM Context-Aware Configurations
Context-Aware Configuration: This feature allows for defining configurations at different levels (site, page, etc.) and can be used to manage head tags.
- Steps:
- Define a configuration that includes a field for custom head tags.
- Create a context-aware configuration specific to each page or section where the custom tags will differ.
- Use Sling Models or WCMUsePojo to read these configurations and inject them into the head section.
3. Client Libraries and JavaScript
Client Libraries: Use AEM's client library system to inject dynamic head content via JavaScript.
- Steps:
- Create a client library that contains a JavaScript file.
- In the JavaScript file, read the custom tags from a data attribute or JSON object embedded in the page.
- Dynamically append these tags to the <head> section.
4. Sling Dynamic Include (SDI)
Sling Dynamic Include (SDI): Use SDI to dynamically include content in the head section.
- Steps:
- Configure SDI to use specific selectors or resource types to include head tag content.
- Create a component that outputs the custom head tags based on the page properties.
- Ensure the component is invoked in the head section of your page templates.
Example Implementation (Page Properties Approach)
Extend Page Properties Dialog:
- In your AEM project, add a new field in the page properties dialog.
- For example, in the dialog XML
<dialog>
...
<items>
<tab>
<items>
<customTags
jcr:primaryType="cq:Widget"
fieldLabel="Custom Head Tags"
name="./customHeadTags"
xtype="textarea"/>
</items>
</tab>
</items>
</dialog>
2. Modify the Page Component HTML:
- In your page component's HTML file (e.g., page.html), include a placeholder for custom head tags:
<head>
...
<meta charset="UTF-8">
<title>${properties.pageTitle}</title>
${properties.customHeadTags @ context='unsafe'}
...
</head>
Fetch Properties Using Sling Models:
- Create a Sling Model to fetch the custom tags from page properties:
@Model(adaptables = Resource.class)
public class CustomHeadTagsModel {
@ValueMapValue
@Default(values = "")
private String customHeadTags;
public String getCustomHeadTags() {
return customHeadTags;
}
}
Include the Model in the HTML:
- Use the model in the HTML file to render the custom tags:
<head>
...
<meta charset="UTF-8">
<title>${properties.pageTitle}</title>
${customHeadTagsModel.customHeadTags @ context='unsafe'}
...
</head>
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.
