Adobe Experience Manager Sites & More

manasabojja7 · 8/28/23

Hi Team,

I have a page with no body but will just need to have the script included in the head section of the document. Is there a suggested/recommended way to achieve this other than building a component that includes this <script> tag?

Thanks in advance for the help!!

-Manasa

Preetpal_Bindra · 8/28/23

Hello @manasabojja7 ,

You could also create a template with this script in the head.HTML or headerlibs.HTML file in AEM.

We had a requirement in a project where based on the screen width (desktop, mobile, etc.) the users must be redirected to one app or another. The app were external to AEM, however, AEM sat right in the middle of them and had to handle this redirection.

The page did not have any body, just did the job of a routing the traffic.

regards,

Preetpal

View solution in original post

Saravanan_Dharmaraj · 8/28/23

@manasabojja7 you can use launch to embed the script in the page , please check this detailed explanation of this process here

https://www.pedromonjo.com/2021/08/tutorial-aem-launch-integration.html

Preetpal_Bindra · 8/28/23

Hello @manasabojja7 ,

You could also create a template with this script in the head.HTML or headerlibs.HTML file in AEM.

We had a requirement in a project where based on the screen width (desktop, mobile, etc.) the users must be redirected to one app or another. The app were external to AEM, however, AEM sat right in the middle of them and had to handle this redirection.

The page did not have any body, just did the job of a routing the traffic.

regards,

Preetpal

manasabojja7 · 9/6/23

Thanks for your response @Preetpal_Bindra

Do we have any document reference of how this can be implemented? Would be helpful if you could point to the relevant documentation for this approach.

- Manasa

Preetpal_Bindra · 9/6/23

I do not have documentation on that. However, this is what I did.

1. Create a template (Editable or classic). I created an Editable template for one use case and classic for another.

2. Extend the sling:resourceType for the template to a custom page component.

Now, either this page component can have a hardcoded JavaScript or an authorable component to accept the JavaScript.

I did both for 2 separate requirements.

Classic template: JavaScript snippet was fixed and so placed it in the head.html for the page component.

Editable template: The JavaScript snippet could change, so placed a new custom component on the Editable template. This custom component had just 1 Rich Text Editor (RTE) field. The Administrator would place the script in the RTE field and publish the template and the page created using this Editable template. One thing to note in this case is, the custom component containing the single RTE field was placed in the Editable template's Structure mode, so that authors do not edit the script on the pages. To change the script, Administrators need to update it in the template and that will automatically update all the pages created from it.

Hope that helps!

regards,

Preetpal

Mahedi_Sabuj · 8/29/23

Hi @manasabojja7,

You can utilize the "Generic Analytic Snippet" Cloud Service Configuration (/miscadmin#/etc/cloudservices/generic-tracker) to add dynamic scripts.

After generating the scripts, you need to insert the following code snippet into either the <head> or <body> section, depending on your requirements.

<sly data-sly-resource="${'cloudservices' 
  @ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" />

You can check the "AEM Cloud configuration" section, as it provides instructions for adding the script to the generic snippet. https://www.albinsblog.com/2018/12/different-approaches-to-dynamically-include-scripts-website-aem.h...

Adobe Experience Manager Sites & More

Include a script in the head section of specific page

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe