19

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>
nyedidikeke
  • 6,899
  • 7
  • 44
  • 59
Fazlul Karim
  • 367
  • 1
  • 2
  • 13
  • You are right that only non executable script tags such as `application/ld+json` tags are allowed. Script tags are prohibited except the mandatory script tag to load the AMP runtime and the script tags to load extended components. You can see the specific form for custom js in [*Allowed and Prohibited AMP html tags*](http://ampready.com/getting-started) documentation. – abielita Mar 18 '16 at 00:08
  • 2
    Thats i know but i am still struggle on that but i didn't find any solution yet. anyway, thanks – Fazlul Karim Mar 25 '16 at 21:09
  • In the AMP documentation there is clearly a section for custom JavaScript. Here is the recommended way to add it: https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/ – Pol Rué Jul 22 '20 at 09:28

6 Answers6

35

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:

  1. Don't use AMP. Nobody is forcing this on you.
  2. Remove the script tag from your amp document and live without that functionality.
  3. 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?
  4. 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.
Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
  • 1
    Hi, could please supply me with an example of an AMP page loading a javascript with amp-iframe? – Apalabrados Jan 24 '17 at 15:24
  • 2
    For #1 - don't use AMP - I guess you could still use AMP and still get most of the speed benefits, but you wouldn't declare or validate it as AMP. (In this case, you could see AMP just as a set of best practices and code examples for achieving fast websites.) – Tom Jun 06 '17 at 15:35
  • @Tom this is actually really true – messinismarios Jul 27 '17 at 23:38
  • 2
    @Tom the whole point of using AMP is for Google to cache your pages. If you aren't going to declare or validate it as AMP, it defeats the whole purpose. AMP is certainly not a set of best practices. – nomad Feb 19 '18 at 17:13
  • 1
    @nomad I can't believe you think that people are using AMP mostly for SEO benefits, rather than cause it's the best framework in the world ever. ("I am shocked - shocked to find that gambling is going on in here!", "Your winnings, sir"). To suggest that, is to suggest that Google is abusing it's dominant position in the market place. Surely if they didn't include the SEO benefits, then AMP would be equally as successful, if not more, based on it's own merits? ;-) – Barry Pollard Feb 19 '18 at 18:22
4

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

Gregable
  • 523
  • 4
  • 10
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>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
PhamThang
  • 73
  • 2
  • 11
2

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

Divyesh Kanzariya
  • 3,629
  • 3
  • 43
  • 44
1

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!

Petr Tomášek
  • 1,428
  • 16
  • 24
1

AMP allow the use of custom JavaScript in both development and production mode without necessitating a (iframe) hack.

To include a custom JavaScript in your AMP page, make use of the <amp-script> component.

Below, a snippet illustrating how to use the <amp-script> component;

<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- Important to add "amp-script" custom element reference -->
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <title>AMP with custom JavaScript</title>
  <link rel="canonical" href=".">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
<head>
<body>
  <amp-script layout="container" src="https://example.com/my-custom-javascript.js">
    <p>Here, content that you may want to modify using a custom JavaScript</p>
  </amp-script>
</body>
</html>

Note that the reference to your custom JavaScript can either be a relative or full path.

It is good to note that AMP enforces a limit of 150 kilobytes of custom JavaScript for all <amp-script> component on any given page.

The reason for the 150 kilobytes of custom JavaScript for all <amp-script> component is to keep performance in check.

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59