Saturday, December 15, 2018

Different approaches to dynamically include custom scripts into websites - Adobe Experience Manager(AEM)


The standard way to include a client-side library (that is, a JS or CSS file) in the HTML of a page is simply to include a <script> or <link> tag for that page, containing the path to the JS or CSS files. For example

...
<head>...
<script type="text/javascript" src="/etc.clientlibs/clientlibs/test.js"></script>
...
</head>
...

Even the inline scripts can be added to the page

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>


While these approaches work in AEM by adding the client-side library as a link or inline to the page components, AEM provides Client-side Library Folders, which allow you to store your client-side code — JavaScript and CSS in the repository, organize it into categories, and define when and how each category of code is to be served to the client. The client-side library system then takes care of producing the correct links in your final webpage to load the correct code.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

The generated HTML page contains the reference to the final script URL

....
<head>
...
<script type="text/javascript" src="/etc.clientlibs/clientlibs/test.js"></script>
...
</head>
...

Sometimes we may need to include scripts dynamically into the websites without changing the code, this tutorial will explain the different approaches to include the scripts dynamically in the websites without performing the code changes.

Tag Manager:


Tag management software simplifies and unifies the management and maintenance of tags — A tag is a short snippet of code across, all digital properties. Inject the custom scripts remotely by enabling container on the pages, this will provide better management of tags without changing the code.

You can use any one of the tag managers in the market to include the custom scripts into the page. GTM and Adobe Launch are the two popular tag management system in the market.

GTM(Google Tag Manager) — Refer to the below URL for more details on injecting the custom script through GTM.


Adobe Launch- Refer to the below URL for more details on injecting the custom script through Adobe Launch.


AEM Custom Component:


In this approach define a custom component and include that wherever required in the page to inject the custom scripts and HTML dynamically.

Let us now enable a custom component e.g OpenHTML that will include the scripts to the page.

The component should be enabled with the required dialog to configure the custom scripts and HTML


Add the following content into openhtml.html

<sly data-sly-test.editor="${wcmmode.edit}">
<p>
Open HTML
</p>
</sly><!-- Open HTML component -->
${properties.openhtml @ context='unsafe'}
<!-- end of Open HTML component -->


Drag and drop the component to the parsys on the required website and configure the script — make sure the script/HTML is valid and all the tags are closed.

In Edit mode the place holder string “Open Html” is displayed


Now author the required scripts and HTML— ensure the script/HTML is valid otherwise the page may break


Now the HTML content and the script is included into the website page


AEM Cloud configuration:


This approach uses the custom AEM Cloud Configuration to include the dynamic scripts — header and footer to the website

Define a custom Cloud configuration to enable the header and footer scripts, attach the cloud configuration to the required websites to inject the custom dynamic scripts. Even you should be able to manage the scripts through page properties or through an external configuration page.

Refer to the following URL for the sample cloud service that enables the configuration option for header and footer scripts.

https://github.com/techforum-repo/youttubedata/tree/master/aem/customcloudservice

Add the below line to the header file(e.g /apps/wknd/components/structure/page/customheaderlibs.html) of your page rendering component — this will display the header script configured in the generic-script cloud configuration to head section

<sly data-sly-include="/apps/utilities/cloudserviceconfigs/components/servicelibs/serviceheaderlibs.jsp" />

Add the below line to the footer file(/apps/wknd/components/structure/page/customfooterlibs.html) of your page rendering component — this will display the footer script configured in the generic-script cloud configuration to the end of the body section

<sly data-sly-include="/apps/utilities/cloudserviceconfigs/components/servicelibs/servicefooterlibs.jsp" />

Create a service user with the name “script-service” and enable the read access for “/apps/utilities” and “/etc/cloudservices/generic-script”


Add an entry in “Apache Sling Service User Mapper Service Amendment” for “script-service” — “customcloudservice.core:script-service=script-service”


Create a configuration page of type “generic-script” e.g sample-script through http://localhost:4503/libs/cq/core/content/tools/cloudservices.html and configure the required head and footer scripts.




Configure the cloud configuration in parent page properties


Now the website displays the header and footer scripts



This covers some of the feasible options to dynamically include the scripts into the pages without modifying the code, even some of the other options e.g configure through separate site-specific configuration pages, enable through page properties dialog, etc can be used based on the requirement.


No comments:

Post a Comment