Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Add JavaScript functions to a page

Kam-nyc
Level 2
Level 2

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
BrianKasingli
Correct answer by
Community Advisor
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
BrianKasingli
Correct answer by
Community Advisor
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

BrianKasingli
Community Advisor
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
BrianKasingli
Community Advisor
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.
Kam-nyc
Level 2
Level 2

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

BrianKasingli
Community Advisor
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
Kam-nyc
Level 2
Level 2
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.
BrianKasingli
Community Advisor
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.

Singaiah_Chintalapudi
Community Advisor
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