Page specific javascript Best practices

[vhochsteinTef]

HI,

I am wondering what is the best way to add page specific javascript using AEM as a Cloud.

Author should be able to control which flavor of javascript logic is included.
Javascript code should be part of AEM Code Repository same as all other javascript (ui.frontend)

My brainstorming results:
- Add option to add a custom css class to each page, which "activates" the javascript flavour if present

- Build a new component which is added to page, Author can select logic flavor by adding component
- ...

Your feedback would be greatly appreciated 

--

Volker

[anupampat]

Hi @vhochsteinTef ,

Page specific JS can be achieved by including the clientlib(JS & CSS) at a template level.

Regards,

Anupam Patra

[anupampat]

Checkout https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/load-site-specific-client-... thread more info.

[vhochsteinTef]

thank you all for your replies...

a template might be used for many pages.

I do not understand how I might add page specific javascript by using templates ??

--

[AmitVishwakarma]

To add page-specific JavaScript in AEM as a Cloud:

1. Use Client Libraries: Include JS at the template level, allowing specific scripts per template.
2. Custom CSS Class: Add a custom class to the page and load JS based on its presence.
3. Page-Specific Component: Create a component where authors select the JS flavor to apply.

Make sure the JS is stored in the AEM code repository (ui.frontend) for easy management.

[chaudharynick]

Hi @vhochsteinTef ,

You can try 2 ways:

1. write component specific JS and create individual client libraries and include them within components.
2. create a page property field to select custom client library and in the customheadlibs.html, call that clientlibs from the page property

[kautuk_sahni]

@vhochsteinTef Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!