How to include JavaScript for an AEM Website

Adding behaviour to a form, button, list of items, or page scroll are some examples of front-end user interactions that we as developers must implement, to enable user rich experiences. How do we add behaviours to a page? JavaScript! JavaScript is the technology used to add user rich experiences for a website.

AEM website can include & run front-end JavaScript logic like all other websites. Note, There’s nothing special about an AEM web page, as an AEM page rendered output is nothing but a standard HTML document; there’s no magic or surprises.

In this article, we will explore the 4 techniques of how we can include JavaScript within a webpage.


1. HTML Event Attributes

HTML possesses the capability to let events trigger actions in a browser, for example, executing JavaScript logic when a user clicks, hovers, drags, or keypress an element on a page. These events include onclick, onmouseout, ondrag, oncopy, etc…

Use Case:
Quickly way to add interactions to a unique HTML element on the page, as a proof of concept. Then later implement the same functionality with a front-end JavaScript application with tests.

Examples:

1
2
3
4
5
6
7
<div class="back-to-top" onclick="window.scrollTo(0,0);"> // Execute a JavaScript when this button is clicked
<a href="#" onmouseover="window.alert('mouse over')">Test</a> // Execute a JavaScript when moving the mouse pointer over the <a> tag
<a href="#" onmouseout="window.alert('mouse out')">Test</a> //Execute a JavaScript when moving the mouse pointer out of the <a> tag
<input type="text" name="fullname" onkeydown="window.alert('key down')"> // Execute a JavaScript when a user presses a key
<input type="text" name="fullname" onkeyup="window.alert('key released')"> // Execute a JavaScript when a user releases a key
<input type="text" name="fullname" onfocus="window.alert('focused')"> // Execute a JavaScript when the input field is focused (selected)
<input type="text" name="fullname" onblur="window.alert('blurred')"> // Execute a JavaScript when the input field is blurred (unselected)

2.Inline JavaScript

Inline JavaScript can be executed by using <script> tag inside the <head> or <body> of the HTML document object model (DOM). Instead of specifying the source(src=”…”) of the JavaScript file in the <script> tag, JavaScript code can be written within the Script tag.

Use Case:
Supporting Adobe Analytics’s Data Layer JSON schema configuration values, based on the context of the page.

Examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Inline JavaScript Example</title>  
    </head>
    <body>  
        <h1 id="intro">Hello  World</div>  
        <script type="text/javascript">
            var digitalDataLayer = {
                environment: {
                    environmentVersion: "6.0.5.1",
                    environmentName: "production",
                    siteName: "SourcedCode.com",
                    statusCode: 200
                },
                target: {},
                page: {
                    pageInfo: {
                        pageName: "home",
                        pageReferrer: document.referrer,
                        pageSiteSection: "homepage",
                        pageSiteSubsection: "",
                        pageType: "homepage",
                        pageURL: "https://www.sourcedcode.com"
                    }
                }
            }
        </script>  
    </body>  
</html>

3. Internal Client Libraries JavaScript

This is the HTML document that references the internal JavaScript file (compiled from client libraries).

The most common way to declare CSS styles and JavaScript behaviour to an AEM website is the use of AEM client libraries. A Client library is very specific to AEM where it is simply configuration declaring which CSS, JS, Resource files to be bundled; a client library can also bundle other client library configurations, and it has the capability to minify and debug. It is by choice and the preferred way that all AEM sites utilise client libraries to define a website.

Use Case:

  • Serving JS and CSS from source files in AEM.
  • Serving organised JS and CSS from different client libraries in AEM.
  • Stitching multiple client libraries to be served in a single CSS or JS file.

Example – HTL loading CSS & JS using a Helper Template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Client Librbary JavaScript file</title>  
        <!--/* Load sourcedcode libraries, css */-->
        <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
        <sly data-sly-call="${clientlib.css @ categories='sourcedcode.utils,sourcedcode.site'}"/>
    </head>  
    <body>  
        ...
        ...
        <!--/* Load sourcedcode libraries, js */-->
        <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
        <sly data-sly-call="${clientlib.js @ categories='sourcedcode.utils,sourcedcode.site'}"/>
    </body>  
</html>

Example – Result of Rendered Page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Client Librbary JavaScript file</title>  
        <script src="/etc.clientlibs/my-site/clientlibs/clientlibs-utils.css"></script>
        <script src="/etc.clientlibs/my-site/clientlibs/clientlibs-site.css"></script>
    </head>  
    <body>  
        ...
        ...
        <script src="/etc.clientlibs/my-site/clientlibs/clientlibs-utils.js"></script>
        <script src="/etc.clientlibs/my-site/clientlibs/clientlibs-site.js"></script>
    </body>  
</html>

4. External JavaScript

This is the HTML document that references the external JavaScript file.
Use Case:

  • Referencing the Adobe Dynamic Tag Manager (DTM) library to support Adobe DTM features.
  • Referencing to the Adobe Analytics library, to support Adobe Analytics features.
  • Referencing third party libraries, to support libraries features.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>  
<html>  
    <head>  
        <title>External Librbary JavaScript file</title>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>  
    <body>  
        ...
        ...
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>  
</html>

Was this post helpful?

Certified AEM Developer who has been working on AEM software developer for the past 5 years.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top