Add Javascript in AMP Pages

Question

Please help me understand how to add javascript in the AMP (Accelerated Mobile Pages). My requirement is I get an ID in URL. For example localhost:8080/home?id=1.I would like to access that id in my html file.

or else please let me know how to add any javascript file.

Thank you.

Answer 1

As of 11th of April 2019 Official Announcement,

it is now possible using your JS inside an AMP project with amp-script component.

First you need to import it to your project:

1. At the top of your .html file import:

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

2. Wrap the html element/s with the amp-script component:

<!-- hello-world.html -->
<amp-script layout="container" src="https://yourdomain.com/hello-world.js">
  <button id="hello">Insert Hello World!</button>
</amp-script>

3. Now you can create the JS file

// hello-world.js
const button = document.getElementById('hello');
button.addEventListener('click', () => {
  const el = document.createElement('h1');
  el.textContent = 'Hello World!';
  // `document.body` is effectively the <amp-script> element.
  document.body.appendChild(el);
});

You can find more details and how it works in the AMP git repo amp-script.md

Answer 2

Unfortunately, you cannot add arbitrary scripts in AMP. From the specification, under "HTML Tags," for the tag script:

Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components.

So, if you want to use JavaScript from AMP, you have to use AMP's predefined components. I don't see a component that does what you want.