Best way to include custom JavaScript in AMP

javascript amp-html

39,668

Solution 1

The whole point of AMP is to only allow a subset of web technologies to stop your page being slow.

Javascript is often the cause of slow websites and so AMP pages do not allow them (except for the AMP scripts themselves), though they've tried to fill in the gap this leaves with amp components which are specially written to not be slow.

So if you want to use Javascript you've several choices:

Don't use AMP. Nobody is forcing this on you.
Remove the script tag from your amp document and live without that functionality.
Find an amp-component which does the same as your JavaScript and use that instead. Not having a clue what legaltext.js I would guess by the name it displays some legal text like a cookie notice so maybe the amp-user-notification widget would work instead?
Use your Javascript in an amp iframe. These are allowed in amp pages but will presumable be loaded with a lower priority to ensure they don't slow down the main page.

Solution 2

<script> tags are generally not allowed in AMP. There are a handful of external javascript files, built as part of the AMP project, which are allowed and even required in some cases. Other than those, javascript is not allowed. Custom script tags are not possible with AMP.

Solution 3

To use custom Javascript in AMP page, you should write it in Javascript file (e.g.: amp-iframe-0.1.js). Then add this script to <head>: <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Custom javascript could be called by using amp-iframe. E.g.:

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Solution 4

Now no need to use amp-iframe because of AMP natively support javascript as mentioned in the official document

AMP pages support custom JavaScript through the <amp-script> component as like below :

<!doctype html>
<html ⚡>
<head>
  ...
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<body>  
  ...
  <amp-script layout="container" src="https://example.com/myfile.js">
    <p>Initial content that can be modified from JavaScript</p>
  </amp-script>
  ...
</body>
</html>

Here is official amp-script specs

Solution 5

Ok, I had the same problem and the best way for me is use iframe, which amp will render asynchronously. It does mean, you can solve it for example like this:

Server side api: GET request (for example /api/frames/my-js-script-app). After call it, you will get follow code:

<html>
<head>
   <script defer src="your_js_scripts"></script>
</head>
<body>
  <!-- html code which using your javascript, if exists... --!>
</body>
</html>

Add AMP frame lib to your app:

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

Now, you can use in your body this:

<amp-iframe width=500 height=300
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://localhost/api/frames/my-js-script-app">
</amp-iframe>

Be careful with creating api on your server. AMP frame need https communication - it does mean something like this: https://localhost/api/frames/my-js-script-app

Now, amp will render your app asynchronously and everyone are happy :-))

Hope it helps!

View more solutions

39,668

Author by

Fazlul Karim

I design web experiences and build brands, it has to be for minimal, simple and interactive pixels.

Updated on August 06, 2022

Comments

Fazlul Karim over 1 year
I read all documentation about script tag but I cannot find how to include a custom JavaScript in AMP HTML.

I know the <script> tag is prohibited unless its type is application/ld+json.

There are default AMP HTML runtime components and extended components which contain specific form for different components, but I could not find a specific one for custom JavaScript.

Here is the script tag I want to include in AMP HTML;
```
<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>
```
Gregable about 8 years

You would need to remove the script tag.