Add JavaScript functions to a page

Kam-nyc

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)

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)

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