Include a script in the head section of specific page | Community
Skip to main content
M
manasabojja7
New Participant
August 28, 2023
Solved

Include a script in the head section of specific page

  • August 28, 2023
  • 3 replies
  • 4354 views

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

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Preetpal_Bindra

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

3 replies

Mahedi_Sabuj
Mahedi_Sabuj
New Participant
August 29, 2023

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.html

 

Mahedi Sabuj
    Preetpal_Bindra
    Preetpal_BindraAccepted solution
    New Participant
    August 29, 2023

    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

      M
      manasabojja7Author
      New Participant
      September 6, 2023

      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
      Preetpal_Bindra
      New Participant
      September 6, 2023

      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

       

      Saravanan_Dharmaraj
      Saravanan_Dharmaraj
      New Participant
      August 29, 2023

      @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

       

        Terms & ConditionsAccessibility statement

        Loading footer...