11

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.

Charan R
  • 111
  • 1
  • 1
  • 4

5 Answers5

8

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.

Andrew
  • 14,325
  • 4
  • 43
  • 64
7

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

Blue Bot
  • 2,278
  • 5
  • 23
  • 33
  • this is experimental and cannot be used in production yet! – Exlord Aug 20 '19 at 12:13
  • @Exlord Im pretty sure im using it.. can you back this up? Maybe I missed something – Blue Bot Aug 24 '19 at 09:13
  • could u share a simple usable html ? for me its says in the console that I don't have the experimental token or something !! the tokens are bind to domain as far as I know and my widget is gana be used in clients sites and they need to get the token themselves, and Its unacceptable for my employer – Exlord Aug 24 '19 at 09:19
  • somehow cookies thing not working in amp-script as well – Pardeep Jain May 03 '21 at 02:23
4

As far as I know, you can add Javascript to AMP by hosting the AMP script on your origin and intercept the request to get the script using a Service Worker. This technique is called "AMP as PWA". Here is the code

function createCompleteResponse (header, body) {
  return Promise.all([
    header.text(),
    getTemplate(RANDOM STUFF AMP DOESN’T LIKE),
    body.text()
  ]).then(html => {
    return new Response(html[0] + html[1] + html[2], {
      headers: {
        'Content-Type': 'text/html'
      }
    });
  });
}

More explanation here: https://www.smashingmagazine.com/2016/12/progressive-web-amps/#amp-as-pwa

Ngoc Nguyen
  • 51
  • 3
  • It's a nice solution, but unfortunately, Service Workers are not yet supported on iOS safari: https://caniuse.com/#feat=serviceworkers (normally if you create an AMP page, is to target mobile platforms, right?) – olivarra1 Sep 01 '17 at 08:51
1

Javascript blocks DOM construction and delays page rendering, so AMP allows only asynchronous Javascript - AMP pages can't include any custom Javascript. Interactive page features can be handled in custom AMP elements instead of using Javascript.

maxpelic
  • 161
  • 11
Deeksha Sharma
  • 3,199
  • 1
  • 19
  • 16
0

Custom javascript is disallowed on AMP pages, and is one of the founding principles of AMP. You can put custom js within an amp-iframe, as long as the amp-iframe is xdomain'd from the main page.

Brad Frizzell
  • 1