How to add a code snippet to pages created on a AEM website?

[asa2022]

Hi there,

Could anyone confirm if it is possible to add a code snippet on a webpage created on Adobe Experience Manager?

My company was selected as the SaaS vendor for an organization that uses AEM. It is the first client using this CMS, so we are not familiar with it yet. Our software works by copying a code snippet and embedding it on the selected webpage. 

If yes, I would appreciate if you could direct me to the right user documentation, so I can pass that along to the client.

Thanks in advance.

[SantoshSai]

Hi @asa2022 ,

What kind of code snippet you want to add? It it any script? 

Pre-assuming,

• If it's script eg. Google Tag Manager code which you wants to include in all pages automatically, In that case, your option is some form of component instance on every page, &
• If some exceptional case where the author doesn't want it then component's dialog.xml has a simple include GTM/don't include GTM checkbox.
  OR
• You should use inheritance to achieve this. usually we got a so called "abstract" or "base" template which is more or less extending the foundation page template were every other template can get kind of global code snippet from. You can put this "global" code into a separate JSP/HTL within the abstract-template too and let people overwrite/disable that functionality in some of the extending templates (in case it is not needed in 100% of them) optionally too. Use this template in a way you would normally use the foundation components in every other template you are creating as resourceSuperType.

For more details how and where to embed please visit this documentation: https://experienceleague.adobe.com/docs/experience-manager-64/assets/managing/touch-ui-using-page-tr...

Hope that helps!

Regards,

Santosh

[arunpatidar]

Hi,

There are are various ways to inject code in the existing AEM page like Google Tag Manager, Adobe Target.

Even you can inject your own client side javascript which basically read the code and inject in the page on run time.

[Pallavi_Shukla_]

experienceleague.adobe.com/docs/experience-manager-64/assets/managing/touch-ui-using-page-tracker.html?lang=en

[Paul-Myers · Accepted solution]

You may want to have a look at the HTMLContainer on the contrib github repo

https://github.com/adobe/aem-contrib-wcm-components/blob/master/ui.apps/src/content/jcr_root/apps/co...

It actually forces the author to first upload to the DAM and then only after it's approved can they put in into a page. This helps with governance and preventing Authors from adding dangerous HTML. 

[asa2022]

Thank you all for your help!