Add JavaScript functions to a page

Avatar

Avatar
Validate 1
Level 1
Kam-nyc
Level 1

Like

1 like

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
Kam-nyc
Level 1

Like

1 like

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
Kam-nyc
Level 1

29-09-2020

I want to add some JavaScript functions to a single specific page in AEM 6.5. I don't want to create any custom component or template.

Is it anyway I could easily add that JavaScript functions to a single specific page only?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

29-09-2020

@Kam-nyc,

There are 4 ways that you can add custom javascript to a page in AEM, highlighted in this blog, https://sourcedcode.com/blog/aem/how-to-include-javascript-for-an-aem-website

  1. HTML Event Attributes
  2. Inline JavaScript
  3. Internal Client Libraries JavaScript
  4. External JavaScript

One of the ways that you can easily get JavaScript( without any setup or configurations) to run on your website is #2, from the list, inline Javascript: As you can see, you can just insert a block of code in your HTML.

If you are using WCM Core Components, you can overlay the basepage component, specifically this script, http://localhost:4502/crx/de/index.jsp#/apps/core/wcm/components/page/v2/page/footer.html.

The outcome of your HTML is expected to look like:

 

<!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>

 

I hope this helps,
Brian.

Answers (1)

Answers (1)

Avatar

Avatar
Validate 25
MVP
Singaiah_Chintalapudi
MVP

Likes

131 likes

Total Posts

234 posts

Correct reply

39 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile

Avatar
Validate 25
MVP
Singaiah_Chintalapudi
MVP

Likes

131 likes

Total Posts

234 posts

Correct reply

39 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Ignite 5
Ignite 3
View profile
Singaiah_Chintalapudi
MVP

29-09-2020

I am sure most of the organization would use the Tag Management tools to handle these kind of requests. It is best to load these kind of requests through Tag Management tools (Adobe Launch (DTM), GTM, Taleo..etc). You can easily deploy without any code deployments and have more control over. 

 

Thanks,

Singaiah