Expand my Community achievements bar.

SOLVED

Add JavaScript functions to a page

Avatar

Level 3

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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.

View solution in original post

10 Replies

Avatar

Correct answer by
Community Advisor

@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.

Avatar

Level 3

Thanks Brian.

If I just want to add some JS to this page: http://localhost:4502/content/wknd/us/en/magazine/arctic-surfing.html?wcmmode=disabled

I don't see anywhere we could add the JS function.

Avatar

Community Advisor
You can add the Javascript to your basepage.html, look at the resourceType for this node in CRX/DE, /content/wknd/us/en/magazine/arctic-surfing

Avatar

Community Advisor
for a quick non-production implementation, and for testing purposes only,, find the HTL script for the page, then just edit the .html file, to include the block of JavaScript code.

Avatar

Level 3

Hi Brian, I am new to AME, make sure I got this correctly. I found the sling:resourceType which is pointing to the structure page. The structure base page is a shared template page?

Annotation.png

Avatar

Community Advisor
now find /apps/wknd/components/structure/page

Avatar

Community Advisor
now find /apps/wknd/components/structure/page, and add your custom javascript in any .html you find, from /apps/wknd/components/structure/page

Avatar

Level 3
Yes, I found some html files, I believe I could add JS to the customfooterlibs.html, but the question is the customfooterlibs.html is a shared file. If I add Js code there, it would apply to all pages, not just one page.

Avatar

Community Advisor

in order for you to target a single page, you would need to either., 1. wrap your script in a condition if (validate(window.location.href)) {}... 2. create a new template, and only that page uses that template, 3, create a new component to only be included in that page.

Avatar

Community Advisor

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